Ajax.BeginForm的异步提交数据 简介

时间:2023-03-09 07:23:37
Ajax.BeginForm的异步提交数据 简介

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

Html.BeginForm的原型解释:

Ajax.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的异步提交数据 简介

Ajax.BeginForm异步表单原型解释

Ajax.BeginForm的异步提交数据 简介
 1 @using (Ajax.BeginForm(
2 new AjaxOptions
3 {
4 UpdateTargetId = "UserLogOnContainer",
5 HttpMethod = "Post",
6 OnSuccess = " ",
7 })){} //提交到当前页面,提交方式为Post,异步更新模块ID为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,异步更新模块ID为UserLogOnContainer
Ajax.BeginForm的异步提交数据 简介

下面看一下Ajax.BeginForm的例子,一个用户登陆的DEMO

View代码:

Ajax.BeginForm的异步提交数据 简介
 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>
Ajax.BeginForm的异步提交数据 简介

Controller层代码如下:

Ajax.BeginForm的异步提交数据 简介
 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 }
Ajax.BeginForm的异步提交数据 简介

表单提交后,页面效果如下:

Ajax.BeginForm的异步提交数据 简介

Ajax.BeginForm的异步提交数据 简介

需要注意的是,表单中的按钮在异步表单中也是Submit类型,如果是异步表单,引入的JS文件需要有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,

}

    <div id="content">

<table>

<tr>

<td>

@Html.Label("lblName", "姓名")

</td>

<td>

@Html.TextBox("TxtName")

</td>

</tr>

<tr>

<td>

@Html.Label("lblAge", "春秋")

</td>

<td>

@Html.TextBox("TxtAge")

</td>

</tr>

</table>

<input type="submit" value="提交" />

</div>

这是简单的表单控件,一个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库。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

如许就可以进行调用测试