Html.BeginForm与Ajax.BeginForm都是ＭＶＣ架构中的表单元素，它们从字面上可以看到区别，即Html.BeginForm是普通的表单提交，而Ajax.BeginForm是支持异步的表单提交，这对于我们开发者来说是一个福音，我们不用再自己去用ＪＱ代码了，直接用ＭＶＣ自代的Ajax.BeginForm就可以很容易的完成一个异步的表单提交动作。

Html.BeginForm的原型解释：

 

1 @using (Html.BeginForm()) {} //提交到当前页面 2  3 @using (Html.BeginForm(new {} )) {} //提交到当前页面,并可以传递参数 4  5 @using (Html.BeginForm("action","controller")) {} //提交到指定controller下的action中 6  7 @using (Html.BeginForm("action","controller",FormMethod.POST)) {} //提交到指定controller下的action中，并指定提交方式 8  9 FormMethod枚举如下：   10 11 　// 摘要:12     //     枚举窗体的 HTTP 请求类型。13     public enum FormMethod14     {15         // 摘要:16         //     指定 GET 请求。17         Get = 0,18         //19         // 摘要:20         //     指定 POST 请求。21         Post = 1,22     }

 

 

Ajax.BeginForm异步表单原型解释

 

1 @using (Ajax.BeginForm( 2     new AjaxOptions 3     { 4         UpdateTargetId = "UserLogOnContainer", 5         HttpMethod = "Post", 6         OnSuccess = " ", 7     })){}　//提交到当前页面，提交方式为Post,异步更新模块ＩＤ为UserLogOnContainer 8  9  @using (Ajax.BeginForm("action", "controller", null,10     new AjaxOptions11     {12         UpdateTargetId = "UserLogOnContainer",13         HttpMethod = "Post",14         OnSuccess = " ",15     }))16     {} //提交到指定controller下的action，提交方式为Post,异步更新模块ＩＤ为UserLogOnContainer

 

 

下面看一下Ajax.BeginForm的例子，一个用户登陆的ＤＥＭＯ

View代码：

 

1 @model TsingDa.Ask.Models.UserLogOnModel 2 @{Layout = "";} 3  4  5  6 
     
       7     @using (Ajax.BeginForm("UserLogOn", "Home", null, 8     new AjaxOptions 9     {10         UpdateTargetId = "UserLogOnContainer",11         HttpMethod = "Post",12         OnSuccess = " ",13     }))14     {15         @Html.ValidationSummary(true)16         
      
       17             @Html.TextBoxFor(m => m.Email)18             @Html.ValidationMessageFor(m => m.Email)19         
      
20         
      
       21             @Html.TextBoxFor(m => m.Password)22             @Html.ValidationMessageFor(m => m.Password)23         
      
24         
      25     }26 
     

 

Controller层代码如下：

 

1  　　　　/// 
 2         /// 用户登陆 3         /// 
 4         /// 
      5         public ActionResult UserLogOn() 6         { 7             return View(new UserLogOnModel("邮箱", "密码")); 8         } 9         [HttpPost]10         public ActionResult UserLogOn(UserLogOnModel entity)11         {12             if (ModelState.IsValid)13             {14                 VM = user_InfoManager.UserLogOn(new User_Info { Email = entity.Email, Password = entity.Password });15                 if (VM.IsComplete)16                 {17                     return RedirectToAction("Index", "Home");18                 }19                 else20                 {21                     VM.ToList().ForEach(i => ModelState.AddModelError("", i));22                 }23             }24 25             return View();26         }

 

表单提交后，页面效果如下：

需要注意的是，表单中的按钮在异步表单中也是Submit类型，如果是异步表单，引入的ＪＳ文件需要有jquery.unobtrusive-ajax.min.js，在这项目的scripts目录已经存在。

 

 

 

 

 

 

 

Ajax.BeginForm可用于异步提交表单。

＠using （Ajax.BeginForm（"AjaxFormPost"， "Home"，     new { ID="11"， ClassName="FirstClass"}，     new AjaxOptions     {         HttpMethod = "POST"，         OnBegin="OnBeginPost（）"，         OnComplete="OnEndPost（）"，         OnSuccess="OnSuccessPost"，         InsertionMode = InsertionMode.Replace     }））

 AjaxFormPost为Action，Home为把握器，new {ID=“11”，ClassName="FirstClass"}为路由参数即Url参数

AjaxOptions

1.HttpMethod提交表单的体式格式。

2.onBegin表单提交前 客户端Js的操纵。

3.OnSuccess表单提交后客户端在此可以返回的操纵

4.OnComplete表单提交完成后的操纵

5.InsertionMode

// 择要:     //     Enumerates the AJAX script ion modes.     public enum InsertionMode     {         // 择要:         //     Replace the element.         Replace = 0，         //         // 择要:         //     Insert before the element.         InsertBefore = 1，         //         // 择要:         //     Insert after the element.         InsertAfter = 2，     }

 

     
         
      
                    
        
                          
                     ＠Html.Label（"lblName"， "姓名"）                 
                          
                     ＠Html.TextBox（"TxtName"）                 
                     
                     
                          
                     ＠Html.Label（"lblAge"， "春秋"）                 
                          
                     ＠Html.TextBox（"TxtAge"）                 
                     
                
      
         
               
     

 这是简单的表单控件，一个Name，一个Age，和一个提交按钮。

下面来看一下对应Home把握器中Action的操纵，此处只做测试，所以只进行取表单数据

public string AjaxFormPost（string ID）         {             string ClassName = Request.QueryString["ClassName"];             string Name = Request.Form["TxtName"];             string Age = Request.Form["TxtAge"];             return "姓名" + Name + "春秋" + Age;         }

 ID为路由机制的参数。TxtName，TxtAge是经由过程表单进行获取，前面设置为post体式格式，所以要用Request.Form的体式格式进行获取响应的值。

然后返回一个字符串string，若是想在客户端进行返回此字符串那么可以在上方AjaxOptions中的OnSuccess   

<script type="text/javascript">      function OnSuccessPost（e） {         alert（e+"提交成功!"）;     } </script>

 

当然若是想调用客户端JavaScript还须要引用一个JavaScript库。

 

    
      如许就可以进行调用测试