标签：des style blog http color java os io
Html.BeginForm与Ajax.BeginForm都是ＭＶＣ架构中的表单元素，它们从字面上可以看到区别，即Html.BeginForm是普通的表单提交，而Ajax.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 }
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
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目录已经存在。
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>
如许就可以进行调用测试
Ajax.BeginForm的异步提交数据 简介,布布扣,bubuko.com
标签：des style blog http color java os io
原文地址：http://www.cnblogs.com/itjeff/p/3892591.html
