Html.BeginForm() vs Ajax.BeginForm() in MVC3
我们知道,BeginForm()方法能创建一个Form标签,因此可以结合表单级的方法,在这个页面中。我一直在考虑Html.BeginForm()方法和Ajax.BeginForm()方法在MVC3中有什么不同。读了很多博客,很多人都强调了一件事:Ajax Form,Form被提交是使用了JavaScript异步提交的。
Html Form和 Ajax Form区别:
一,我做了一个简单的Demo来示范:
Step1:创建一个MVC项目
Step2:创建一个视图名为TestHtmlView.cshtml,此视图的Form表单使用Html.BeginForm()创建。此例子的操作是:当提交此表单时进行重定向;
- <span style="font-family:KaiTi_GB2312;font-size:18px;">@{
- ViewBag.Title = "Home Page";
- }
- <h2>@ViewBag.Message</h2>
- <p>
- @using(Html.BeginForm("TestHtmlRedirect", "Test",FormMethod.Post, null))
- {
- <input type="submit"value="Html PsBk Click" />
- }
- </p></span>
Step3:定义两个action方法,一个用于返回创建的视图,一个用于响应表单提交;
- <span style="font-family:KaiTi_GB2312;font-size:18px;"> //This section of code is forTestHtmlView.cshtml
- public ActionResult TestHtmlView()
- {
- ViewBag.Message = "HtmlForm——This is a HTML form";
- return View();
- }
- [HttpPost]
- public ActionResult TestHtmlRedirect()
- {
- returnRedirectToAction("TestAjaxView", "Test", null);
- }
- //End of the section of code forTestHtmlView.cshtml</span>
看一下TestHtmlRedirect()方法的实现体,我们想从该视图重定向到另一个视图TestAjaxView.cshtml。
Step4:创建一个视图名为AjaxHtmlView.cshtml,此视图的Form表单使用Ajax.BeginForm()创建。
- <span style="font-family:KaiTi_GB2312;font-size:18px;">@{
- ViewBag.Title = "Test Page";
- }
- <scriptsrcscriptsrc="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"type="text/javascript"></script>
- <h2>@ViewBag.Message</h2>
- <p>
- @using(Ajax.BeginForm("TestAjaxRedirect", "Test",FormMethod.Post, null))
- {
- <input type="submit"value="Ajax PsBk Click" />
- }
- </p></span>
Step5:如果想让此Ajax Form正确工作,能达到预期,那么还需要在AjaxHtmlView.cshtml中添加此JS文件引用
<scriptsrc="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"type="text/javascript"></script>
还要确保在Web.Config文件中支持JS的执行,需要此配置文件中添加如下标签:
- <span style="font-family:KaiTi_GB2312;font-size:18px;"> <!--启用客户端验证,Start。。。-->
- <addkeyaddkey="ClientValidationEnabled" value="true"/>
- <!--支持JavaScript的执行-->
- <addkeyaddkey="UnobtrusiveJavaScriptEnabled" value="true"/></span>
Step6:定义两个action方法,一个用于返回创建的视图,一个用于响应表单提交;
- <span style="font-family:KaiTi_GB2312;font-size:18px;">//This section ofcode is for TestAjaxView.cshtml
- public ActionResult TestAjaxView()
- {
- ViewBag.Message = "AjaxForm——This is a AJAX form";
- return View();
- }
- [HttpPost]
- public ActionResult TestAjaxRedirect()
- {
- returnRedirectToAction("About", "Test", null);
- }
- //End of Section of code forTestAjaxView.cshtml</span>
看一下TestAjaxRedirect()方法的实现体,我们想从该视图重定向到另一个视图About.cshtml。
(附录:
(1)About.cshtml:
- <span style="font-family:KaiTi_GB2312;font-size:18px;">@{
- ViewBag.Title = "关于我们";
- }
- <h2>关于</h2>
- <p>
- 将内容放置在此处。
- </p></span>
(2)Test控制器中添加About方法:
- <span style="font-family:KaiTi_GB2312;font-size:18px;">public ActionResult About() {
- return View();
- }</span>
(3)Global.asax
- <span style="font-family:KaiTi_GB2312;font-size:18px;">using System;
- usingSystem.Collections.Generic;
- using System.Linq;
- using System.Web;
- usingSystem.Web.Mvc;
- usingSystem.Web.Routing;
- namespaceComplaintManageSystem
- {
- // 注意: 有关启用 IIS6 或 IIS7 经典模式的说明,
- // 请访问 http://go.microsoft.com/?LinkId=9394801
- public class MvcApplication :System.Web.HttpApplication
- {
- public static voidRegisterGlobalFilters(GlobalFilterCollection filters)
- {
- filters.Add(newHandleErrorAttribute());
- }
- public static voidRegisterRoutes(RouteCollection routes)
- {
- routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
- routes.MapRoute(
- "Default", // 路由名称
- "{controller}/{action}/{id}", // 带有参数的 URL
- new { controller ="Test", action = "TestHtmlView", id =UrlParameter.Optional } // 参数默认值
- );
- }
- protected void Application_Start()
- {
- AreaRegistration.RegisterAllAreas();
- RegisterGlobalFilters(GlobalFilters.Filters);
- RegisterRoutes(RouteTable.Routes);
- }
- }
- }
- </span>
)
Step7:让我们开始执行程序,观察执行结果,如下图1:
图1
当我点击图1中“Html PsBk Click”按钮时,TestHtmlRedirect()方法被调用,并且视图重定向到TestAjaxView.cshtml,如下图:
图2
现在,考虑一件事,当我点击图2中"Ajax PsBk Click"按钮时,是否会发生同样的事,视图会重定向到About.cshtml?点击后,发现这件事并没有发生。
点击按钮后,TestAjaxRedirect()方法被调用,重定向语句段执行,但是视图并没有重定向。原因是:表单的提交使用了JavaScript的异步提交。正如我们看到的,操作的执行是异步的,Ajaxforms是适用于多种情况的,比如你需要修改或保存时是异步操作,但是不能重定向到其他表单。
二,下面,我们再做一个Demo,让我们测试一下Htmlforms和Ajax forms在执行修改操作时会有何不同。
Step8:定义一个实体 PersonnelModel
- <span style="font-family:KaiTi_GB2312;font-size:18px;">using System;
- usingSystem.Collections.Generic;
- using System.Linq;
- using System.Text;
- usingSystem.Reflection;
- using Model.Adapter;
- namespaceModel.Entity
- {
- public class PersonnelModel
- {
- public string UserName { get; set; }
- public string MailAdress { get; set; }
- }
- }</span>
Step9:再分别定义Html和Ajax视图
HtmlViewModel.cshtml:
- <span style="font-family:KaiTi_GB2312;font-size:18px;">@modelHtmlVsAjaxBeginForm.Models.PersonnelModel
- @{
- ViewBag.Title ="HtmlViewModel";
- }
- <h2>HtmlViewModel</h2>
- @using (Html.BeginForm("HtmlViewModel","Home",null))
- {
- @Html.ValidationSummary(true)
- <fieldset>
- <legend>PersonnelModel</legend>
- <divclassdivclass="editor-label">
- @Html.LabelFor(model =>model.UserName)
- </div>
- <divclassdivclass="editor-field">
- @Html.EditorFor(model =>model.UserName)
- @Html.ValidationMessageFor(model => model.UserName)
- </div>
- <divclassdivclass="editor-label">
- @Html.LabelFor(model =>model.MailAdress)
- </div>
- <divclassdivclass="editor-field">
- @Html.EditorFor(model =>model.MailAdress)
- @Html.ValidationMessageFor(model => model.MailAdress)
- </div>
- </fieldset>
- <p>
- <input type="submit"value="Html Form Action" />
- </p>
- }</span>
AjaxViewModel.cshtml:
- <span style="font-family:KaiTi_GB2312;font-size:18px;">@model Model.Entity.PersonnelModel
- @{
- ViewBag.Title = "AjaxViewModel";
- }
- <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
- <h2>AjaxViewModel</h2>
- @using (Ajax.BeginForm("AjaxViewModel", "Test", new AjaxOptions { UpdateTargetId = "result" }))
- {
- @Html.ValidationSummary(true)
- <fieldset>
- <legend>PersonnelModel</legend>
- <div id="result"></div>
- <div class="editor-label">
- @Html.LabelFor(model => model.UserName)
- </div>
- <div class="editor-field">
- @Html.EditorFor(model => model.UserName)
- @Html.ValidationMessageFor(model => model.UserName)
- </div>
- <div class="editor-label">
- @Html.LabelFor(model => model.MailAdress)
- </div>
- <div class="editor-field">
- @Html.EditorFor(model => model.MailAdress)
- @Html.ValidationMessageFor(model => model.MailAdress)
- </div>
- </fieldset>
- <p>
- <input type="submit" value="Ajax Form Action" />
- </p>
- }</span>
Step10:定义两个action方法,目的均为返回数据内容,显示在各自视图中
- <span style="font-family:KaiTi_GB2312;font-size:18px;">//HTML Form Method
- //Purpose: Will return the belowcontent, once after the method triggered.
- [HttpPost]
- public ActionResultHtmlViewModel(PersonnelModel Pmodel)
- {
- return Content("Hi" + Pmodel.UserName + ", Thanks for the details, a mail will be sentto " + Pmodel.MailAdress + " with all the login details.","text/html");
- }
- //AJAX Form Method
- //Purpose: Will return the belowcontent, once after the method triggered.
- [HttpPost]
- public ActionResultAjaxViewModel(PersonnelModel Pmodel)
- {
- return Content("Hi" + Pmodel.UserName + ", Thanks for the details, a mail will be sentto " + Pmodel.MailAdress + " with all the login details.","text/html");
- }</span>
Step11:现在分别运行这两个视图,点击各自按钮,观察执行效果:
HtmlViewModel.cshtml加载:
文本框中输入数据:
点击“Html Form Action”按钮后,运行效果:
弹出了新页面,将返回的数据显示
AjaxViewModel.cshtml加载:
文本框中输入数据:
点击“Ajax Form Action”按钮后,运行效果:
页面无刷新,将返回的数据显示在原页面
(注:当然在Html forms中也可以产生如上Ajaxfroms中的效果,例如:写js代码,使用Ajax请求函数)
总结:
Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素;
区别:Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步的表单提交;
Ajax.BeginForm()优点:不用再自己去用JQ代码了,直接用MVC自代的Ajax.BeginForm就可以很容易的完成一个异步的表单提交动作。
转载于:https://www.cnblogs.com/zjoch/p/4350072.html
Html.BeginForm() vs Ajax.BeginForm() in MVC3相关推荐
- 转:MVC3系列:~Html.BeginForm与Ajax.BeginForm
Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...
- ajax.beginform onfailure,如何使用Ajax.BeginForm OnSuccess和OnFailure方法?
我也寻找相同的答案,但看起来像Ajax.BeginForm()..的事件的都有详细的记载或需要更多的自我实验发现当这些onSuccess和onFailure事件被调用时.但是我得到了一个非常简单直接的 ...
- Ajax.BeginForm无法调用 ajaxOptions的js函数
使用ajax.beginForm无法调用ajaxOptions的js函数的原因,一般都是缺少以下2个JS文件: 1,Install-Package jQuery –version 1.10.2 2,I ...
- data ajax begin,Ajax.BeginForm()知多少
在ASP.NET MVC中,Ajax.BeginForm扮演着异步提交的重要角色.其中就有五个重载方法,可是在实际应用中,你未必使用的驾轻就熟,今天咱们就从主要的参数来一探究竟. javascript ...
- C#MVC Razor的Ajax.BeginForm里面的OnSuccess未执行(未成功跳转)
C#MVC Razor的Ajax.BeginForm里面的OnSuccess未执行(未成功跳转),结合网上的说法,检查以下位置 1.引用Jquery,注意版本,网上说版本要低一点 <script ...
- asp.net core mvc 异步表单(Ajax.BeginForm)
.net core中已经没有beginform扩展函数了. 通过Bower引入jquery-ajax-unobtrusive: <script src="~/lib/jquery-aj ...
- mvc4 html.beginform,MVC4 Html.BeginForm在Internet Explorer中提交按钮 9不工
我已经写在ASP.NET MVC4 /剃刀的形式. 该表格后很完善在Firefox和Chrome,但由于某种原因在Internet Explorer 10和11,"提交"按钮没有反 ...
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
假如有一个数据表格UserInfo: public class UserInfo {public int Id { get; set; }public string Name { get; set; ...
- mvc3中正确处理ajax访问需要登录的页面
mvc3中有Ajax.ActionLink和Ajax.BeginForm两个方法用来生成ajax的连接和ajax的表单提交. 但是当要访问的连接是一个需要登录的页面,显示时就不太友好了 我简单模拟了一 ...
最新文章
- 云计算安全:技术与应用
- 如何根据keras的fit后返回的history绘制loss acc曲线
- 开始接触QM(Quality Management)
- 最有影响力的自然语言处理NLP论文
- 用四种方法Python求出两个有序数组中的中位数
- R语言统计与绘图:正态、方差齐性、多重比较
- Vue-Router + Vuex 实现单页面应用
- Python 教你自动发微博,每日一句英语
- Web API——添加Swagger、SQL Server、日志记录、导出到Excel和Docker
- php 在模板中赋值数组变量,PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例...
- logback 配置详解(一)configuration and logger
- mysql数据库中如何创建角色_MySQL数据库如何创建用户呢?
- 二维码生成原理及解析代码
- 同频切换的事件_目前现网中,LTE同频切换主要是通过A5事件进行触发
- mysql怎么创建外表_PostgreSQL使用MySQL外表的步骤详解(mysql_fdw)
- 分享个免费的图文识别orc接口
- MYSQL学习笔记06:列属性[NULL,default,comment],主键,自增长,唯一键,数据库设计规范[范式(1NF,2NF,3NF),逆规范化],表关系[1V1,1VN,NVN]
- Java设计模式入门
- 分布式系统与计算机网络
- localhost:8080网址进入后不是Tomcat 而是phpwamp 为什么?怎么解决? 我想这个网址打开是Tomcat 求大神解疑。