如何在服务器端和客户端验证按钮？ [英] How to validate button on server side and client side?

问题描述

  public   class  addcustomerController：Controller 
 {
 
  private  SqlConnection con; 
 
  //   GET：addcustomer  
  public  ActionResult customerdetail（）
 {
  return 查看（   customerdetail）; 
} 
 
 [HttpPost] 
  public  ActionResult customerdetail（customerdata obj）
 {
  if （ModelState.IsValid）
 {
 custmerinfo（obj）; 
  return 查看（  customerdetail）; 
  //  返回RedirectToAction（customerdetail，obj）;  
 
} 
 其他 
 {
  return 查看（）; 
} 
 
 
 
} 
 
 
 私人 < span class =code-keyword> 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（）; 
 
} 
 
 
 
 
 
 
} 

型号

  public   class  customerdata 
 {
 
 [必需（ErrorMessage =  请输入您的姓名）] 
  public   string  name {获得;  set ; } 
 
 
 [必需（ErrorMessage =  请输入你的城市）] 
  public   string  city {获得;  set ; } 
 
 
 [必需（ErrorMessage =  请输入您的地址）] 
  public   string 地址{获得;  set ; } 
} 
 

查看

 @ {
 ViewBag.Title =customerdetail; 
} 
 
 <   h2  >  Customerdetail <   / h2  >  
 
 <   html     lang   =  en >  
 <   head  >  
 <   title  >  Bootstrap示例<   / title  >  
 <   meta     charset   =  utf-8 >  
 <   meta    名称  =  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/bootstra p.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（
 {
类型：  POST，
 url：  addcustomer /    customerdetail，
数据：{
名称：$（  #txtname）。val（），
城市：$（  #txtcity）。val（），
地址：$（  #txtaddress）。val（）
} 
 
 
}）; 
 
 
 
 
 
 
}）; 
 
 
 
 
 
}）; 
 
 
 
 
 
 <   /   script  >  
 
 <   / head  >  
 <  正文 >  
 
 <   div     class   =  container >  
 <  表单    class   = 表单 - 水平   角色  = 表单 >  
 <   div     class   =  form-group >  
 <   label     class   =  control-label col-sm-2 < span class =code-attribute>   for   =  name > 名称<   / label  >  
 <   div     class   =  col-sm-10 >  
 <  输入    type   =  text    class   = 表单控件    id   =  txtname   占位符  = 输入您的姓名 >  
 <   / div  >  
 <   / div  >  
 <   div     class   =  form-group >  
 <   label     class   =  control-lab el col-sm-2    for   =  city > 城市< ;   / label  >  
 <   div     class   =  col-sm-10 >  
 <  输入    type   =  text < span class =code-attribute>   class   =  表格控制    id   =  txtcity   占位符  = 输入您的城市 >  
 <   / div  < span class =code-keyword>>  
 <   / div  >  
 
 <   div     class   =  form-group >  
 <   label     class   =  control-label col-sm-2      = 地址 > 地址<   / label  >  
 <   div     class   =  col-sm-10 >  
 <   input     type   =  text    class   = 表单控件    id   =  txtaddress   占位符  = 输入您的地址 >  
 <   / div  >  
 <   / div  >  
 
 <   div     class   =  form-group > ;  
 <   div     class   =  col-sm-offset -2 col-sm-10 >  
 <  按钮    type   = 按钮    class   =  btn-default    id   =  btnsave > 保存<   / button  >  
 <   / div  >  
 <   / div  >  
 <   / form  >  
 <   / div  >  
 
 <   / body  >  
 <   / html  >  

我尝试过：



我已经在模型上添加了验证，并且我在操作结果上实现了条件，但验证不起作用，我是否需要在视图上更改任何内容？

解决方案

（ document ）。ready（ function （）{

< blockquote>（ ＃btnsave）。click（ function （）{

.ajax（
{
type： POST，
url： addcustomer / customerdetail，
data：{
Name：

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

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

@{
    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?

解决方案

(document).ready(function () {

("#btnsave").click(function () {

.ajax( { type: "POST", url: "addcustomer"/"customerdetail", data: { Name:

这篇关于如何在服务器端和客户端验证按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！