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

╰+攻爆jí腚メ 2022-09-17 13:17 104阅读 0赞

[回到目录][Link 1]

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

### Html.BeginForm的原型解释： ###

![复制代码][copycode.gif]

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     }

![复制代码][copycode.gif]

### Ajax.BeginForm异步表单原型解释 ###

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

View代码：

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

Controller层代码如下：

![复制代码][copycode.gif]

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         }

![复制代码][copycode.gif]

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

![Center][]

![Center 1][]

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

[Link 1]: http://www.cnblogs.com/lori/archive/2013/01/29/2881099.html
[copycode.gif]: /images/20220828/cb20e252745b4d158a0ee95f65ef89e4.png
[Center]: /images/20220828/e6c7cb0e1f384efa9c2f8b79f459d927.png
[Center 1]: /images/20220828/ea235592788a4ccea7f5919e5b5cbb9e.png