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         }

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

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