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

简介:

Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步的表单提交,这对于我们开发者来说是一个福音,我们不用再自己去用JQ代码了,直接用MVC自代的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,异步更新模块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的例子,一个用户登陆的DEMO

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类型,如果是异步表单,引入的JS文件需要有jquery.unobtrusive-ajax.min.js,在这项目的scripts目录已经存在。

本文转自博客园张占岭(仓储大叔)的博客,原文链接:爱上MVC3系列~Html.BeginForm与Ajax.BeginForm,如需转载请自行联系原博主。

目录
相关文章
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
108 0
|
3月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
40 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
4月前
|
XML 前端开发 安全
【专栏:HTML 进阶篇】HTML 表单验证与 AJAX 交互
【4月更文挑战第30天】本文探讨了HTML表单验证和AJAX在现代网页开发中的重要性。HTML表单验证通过必填、数据格式和范围验证确保用户输入的准确性,而AJAX则实现异步通信,提供动态数据加载、局部更新和实时交互。两者的结合优化了表单处理,提高用户体验并减少服务器负担。实际应用包括在线注册、购物车系统和表单反馈。然而,开发者需注意浏览器兼容性、错误处理和安全性问题。掌握这些技术,能打造更智能、高效的网页应用,为用户提供更好的体验。在数字化时代,HTML表单验证和AJAX是网页创新与进步的关键。
32 0
|
4月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
10月前
|
JSON 前端开发 数据格式
ajax请求模拟json数据并且拼接到html
ajax请求模拟json数据并且拼接到html
40 0
|
10月前
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
|
开发框架 前端开发 安全
ASP.NET Core MVC 从入门到精通之Html辅助标签补充及模型校验基础
ASP.NET Core MVC 从入门到精通之Html辅助标签补充及模型校验基础
114 0
|
开发框架 前端开发 .NET
ASP.NET Core MVC 从入门到精通之Html辅助标签(一)
ASP.NET Core MVC 从入门到精通之Html辅助标签(一)
88 0
|
前端开发
ajax返回数据进行for双循环实现前端html渲染数据的解决方案
ajax返回数据进行for双循环实现前端html渲染数据的解决方案
144 0
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
90 0