How to validate button on server side and client side?

Question

0.00/5 (No votes)

See more:

, +

C#

public class addcustomerController : Controller
    {

        private SqlConnection con;

        // GET: addcustomer
       public ActionResult customerdetail()
        {
            return View("customerdetail");
        }

        [HttpPost]
        public ActionResult customerdetail(customerdata obj)
       {
           if (ModelState.IsValid)
           {
               custmerinfo(obj);
               return View("customerdetail");
              // return RedirectToAction("customerdetail", obj);
               
           }
           else
           {
              return View(); 
           }


           
       }


       private void connection()
        {
            string constr = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;
            con = new SqlConnection(constr);
        }

       public void custmerinfo(customerdata obj)
        {
            connection();
            SqlCommand com = new SqlCommand("addcustomer", con);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@name", obj.name);
            com.Parameters.AddWithValue("@city", obj.city);
            com.Parameters.AddWithValue("@address", obj.address);
            con.Open();
            com.ExecuteNonQuery();
            con.Close();

        }
        

        

        

   }

Model

C#

public class customerdata
   {

       [Required(ErrorMessage="Please Enter your Name")]
       public string name { get; set; }


       [Required(ErrorMessage = "Please Enter your City")]
       public string city { get; set; }


       [Required(ErrorMessage = "Please Enter your Address")]
       public string address { get; set; }
   }

View

Razor

@{
    ViewBag.Title = "customerdetail";
}

<h2>Customerdetail</h2>

<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnsave").click(function () {

                $.ajax(
                {
                    type: "POST",
                    url: "addcustomer"/"customerdetail",
                    data: {
                        Name: $("#txtname").val(),
                        City: $("#txtcity").val(),
                        Address: $("#txtaddress").val()
                    }


                });






            });





        });





    </script>

</head>
<body>

    <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2" for="name">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="txtname" placeholder="Enter your Name">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="city">City</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="txtcity" placeholder="Enter your City">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-2" for="address">Address</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="txtaddress" placeholder="Enter your Address">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn-default" id="btnsave">Save</button>
                </div>
            </div>
        </form>
    </div>

</body>
</html>

What I have tried:

I have added the validation on model and i implemented the the condition on action result but the validation doesn't work, do i need to change anything on view?

Posted 20-Feb-16 21:59pm

h dave

Updated 22-Feb-16 22:16pm

Add a Solution

Comments

Sinisa Hajnal 22-Feb-16 3:04am

For client side validation you need to write javascript functions that will validate before sending model data to the server. In #btnsave.click before ajax add if(validateData()) then ajax call else error message (or return if you showed error message from the validator)

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohsin_Khan_ · Answer 1 · 2016-02-22T22:16:00

Solution 1

Create strongly type view to apply validation using data annotation.
Please refer below link
MVC Data Annotations for Model Validation

Posted 22-Feb-16 22:16pm

Mohsin_Khan_

How to validate button on server side and client side?

1 solution

Solution 1

Add your solution here

Preview 0

How to validate button on server side and client side?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us