爱上MVC3系列~Html.BeginForm与Ajax.BeginForm

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 FormMethod
14     {
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 AjaxOptions
11     {
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 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
 4 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
 5 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
 6 <div id="UserLogOnContainer">
 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         <div class="editor-field">
17             @Html.TextBoxFor(m => m.Email)
18             @Html.ValidationMessageFor(m => m.Email)
19         </div>
20         <div class="editor-field">
21             @Html.TextBoxFor(m => m.Password)
22             @Html.ValidationMessageFor(m => m.Password)
23         </div>
24         <input type="submit" id="logOnBtn" value="登陆" />
25     }
26 </div>

Controller层代码如下：

 1  　　　　/// <summary>
 2         /// 用户登陆
 3         /// </summary>
 4         /// <returns></returns>
 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                 else
20                 {
21                     VM.ToList().ForEach(i => ModelState.AddModelError("", i));
22                 }
23             }
24
25             return View();
26         }

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQEAAAB4CAIAAAB91NAXAAAEfUlEQVR4nO3cO1IjMRCA4TkCxRFIuYQDjsERqOIKPggJdyAm3mCDDTalOAUBAaVNtsayHq2WZ6yRpv+vKMrgsT2Y/q2xeUwOsG3aegeAjdEArKMBWEcDsI4GYB0NwDoagHU0AOtoANbRAKyjAVjXZQPTJL3JlyperX4Handsvkhxs+JuLPxKUaPLuzKep/i0/xnlkMmbVc23vM/Kc5WpLMwJJV3eg7UNCBfPfTIXQPChP4Xy9QjjqJxUZUWaW0SNtnfi25t7enIvL+7nR9pM/7CnbKDqsVyesE0aKK4JWKDh3ff6evqePT9LW667DiQHKHejxSHLLRHKqxW+2GIDyb2igcUa3n0PD6dv3u2ttGVtA/qHxuLEyPMtdyLvXu7WhSsvfo2sA2toePc9Pp6+Z/f30pa1Q6YkXJt+vIpnxR9qMpa/FtaBa2p49318uLs7N03u5sa9v0tb1q4DRcv7ia+qOJe53dakcsGN4lJt777vb/f56b6+CpspG9B8+6vWEM0jt34dUO4n68DW+rv7hEG/oAFhYxqAc26YBuLJq/3ea44iLjvYKG4mt1F1kBOMvmb3UMLdB+toANbRAKyjAVhHA7COBmAdDcA6GoB1NADraADW0QCsowFYRwOwjgZgHQ3AOhqAdTQA62gA1tEArKMBWEcDsI4GYB0NwDoagHXZBn4DV9NyxIukBlruB+zobbRoAK31NlraBibFP7UMttFcBAbtoYHpXPLzwmYwbrwG4lEO5t4/kfsQmA3ZQPJ9fMJ/+D/dABng3H4aiIdbc7wE7KeB4ITmeAlwgzagnG/WAWgM2UDyvX+u84Y++LxjHcC5/TRQfM86gKQhG8gdCyVfFwrOcqwDODdkA6etxVf9eT4AjfEaSFxG10Bxe9i0hwaAJXobLRpAa72NFg2gtd5Gi78jwwZajngRz1ZhHQ3AOhqAdTQA62gA1tEArOO1UWyg5YgX8TMytNbbaNEAWutttOoaUP4G6BS5fAexO4M1EE9zcrjliacB+MZrQLpw/p8r8vcDyBmsgdN24n8Wij9JA8gZsoHgsCc44W+TPJcG4BuvAWEFCJ4PuEwhNADfeA383+78yW7uiW/uWTIZYDZYA/4Ea178yc06DWA2WAPh1vlRDg6ZglpoALMhG9Ac5cvHPDSA2Z4bSFw7iwAiozaQpLoBAsC5IRsAVtTbaNEAWutttGgArfU2WvwdGTbQcsSLxnjCejgctt4F7JbUwN8/v3p4Ox6PNIDroQFYRwOwbs0GpmkKThS3pAFsblED/s+M58kO5jvYhgbQm6XrQDD384fxmuCflQyDBrCJFY6F4gd+IRLWAfRmtXUgPijyj4XkbGgAG7q8AflIJvkkIff7pzSADa1zLCTMdPLFItYB9KPR84F4QdDHQAO4qhbrQPKgiAbQidavC9EAerPOz4mFmdYkQQPY0NLXhWTJBqpeFKIBXBu/MwfraADW0QCskxo4doMGcD3ZBg6daXmnwJQx/qYeuB4agHU0AOtoANbRAKyjAVhHA7COBmDdP8evLzlR97nHAAAAAElFTkSuQmCC" alt="" />

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUsAAABOCAIAAAAmb6POAAAD2ElEQVR4nO2cS47bMAxAfbQcLcebRRdd9BxzBXcxRaBQJPWxTbrKeyAKO5ZtpdATaSWZbQeAddmyOwAAF4LhACuD4QArg+EAK4PhACuD4QArg+EAK/Nm+C+Ay8ga4h+ONHz//iaI0wPDs8BwIiIwPAsMJyICw7PAcCIiTMO31lqvaNBs39ly2/41+NlQG78OOW38G9VXsC5VvtL/HjvAcCIiugyvBRCvNH1zjBLXFB2wrubsqod62hy50TgYTkSENFzVT3ji7ypj2U6zzum+4T1zinVxf7qx5qyeqmEEDCciQjG8NkSVbXSUN0tia05RWzZ74lTXpbHObt3ev+MgGE5ExAmGTyS3ntrbP92fKfaWokM9bE4xU2A4EREDVbql9Ghy84v54yWxVZ87/bfesnpB5y0MdbPcwXDiohjI4dYob9rYY9ReaaN61X8dv8/OK86bsro6BYYTETFpuJ/uGkO7Q6r61lYP/aNWdT003fSUA+NgOBERvYbX1vXncDm07Tw/1NK/r3jRUb3e3Q3Dm6ePgOFERMw8hw/JoAxtO4fXu34Sdm5hnVhfp97dO6YP0WwcDCciwszhqgD+KG+Odb+NyMziLLVv6mTU0zG/VBH3OsPnGgwnIoLvpWeB4UREYHgWGE5EBIZnIQ0HuIisIf7hnPM0DwD3BMMBVgbDAVYGwwFWBsMBVgbDAVaGT8sgiKwh/uFU33gBuACGVhYYDhEwtLJoG771/cZlqzing7AEGJ6FYnjtqqqu7zOGQwmGZ6Eb7p3wfrTctbYBMDwLr0r/sbT8V57cZzsAhmdhGi4KcrFRtlGPYjiUYHgWuuFO9hbP4bvhP4ZDCYZn0ajSfWlrw1lOBxUMz8JbS98raeXJ9iO68zp8IBiexaHPw0UxL+YCDIcXGJ6Ft9ImNnbtmdypxjEcXmB4FkcNV65IAocKDM+i8WnZ3OIZeoMAw7PglycQAUMrCwyHCBhaWWA4RMDQyoK/8QJBZA3xD+e+S2KPxyO7CwD/PdLwP7+/7hDP5xPDAY6D4QArg+EAK3PU8G3bxEazJYYDhDFsePn9tpe3wl7RBsMBspjJ4cLq126dz8tDqvYYDnApk1V6nbSdKYAcDpDFoRxel+tlle5PChgOEMCY4X6NrT6cW79Rw3CAAOardMdYdYGdHA4Qz4XP4XUy71cdwwFO4aocrpbrGA4QTMRaOoYDZDH/nTbH2B7hMRwggJm1dB/V8KGFdAwHOAt+eQKwMhgOsDIYDrAy0vDnbcBwgOO8Gf64GVn/KQDLcN+/xAgAx8FwgJXBcICVwXCAlcFwgJX5C0VlUv65CY4aAAAAAElFTkSuQmCC" alt="" />

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

Reference from : http://www.cnblogs.com/lori/archive/2012/06/27/2565470.html