我們知道，BeginForm()方法能創(chuàng)建一個Form標(biāo)簽，因此可以結(jié)合表單級的方法，在這個頁面中。我一直在考慮Html.BeginForm()方法和Ajax.BeginForm()方法在MVC3中有什么不同。讀了很多博客，很多人都強(qiáng)調(diào)了一件事：Ajax Form，Form被提交是使用了JavaScript異步提交的。
?
Html?Form和?Ajax Form區(qū)別：
一，我做了一個簡單的Demo來示范：
Step1：創(chuàng)建一個MVC項目
Step2：創(chuàng)建一個視圖名為TestHtmlView.cshtml，此視圖的Form表單使用Html.BeginForm()創(chuàng)建。此例子的操作是：當(dāng)提交此表單時進(jìn)行重定向；
?
[html]?view plaincopy
<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方法，一個用于返回創(chuàng)建的視圖，一個用于響應(yīng)表單提交；
?
[java]?view plaincopy
<span?style="font-family:KaiTi_GB2312;font-size:18px;">?????????public?ActionResult?TestHtmlView()??????????{??????????????ViewBag.Message?=?"HtmlForm——This?is?a?HTML?form";??????????????return?View();??????????}??????????[HttpPost]??????????public?ActionResult?TestHtmlRedirect()??????????{??????????????returnRedirectToAction("TestAjaxView",?"Test",?null);??????????}?????????? ?
?
看一下TestHtmlRedirect()方法的實現(xiàn)體，我們想從該視圖重定向到另一個視圖TestAjaxView.cshtml。
?
Step4：創(chuàng)建一個視圖名為AjaxHtmlView.cshtml，此視圖的Form表單使用Ajax.BeginForm()創(chuàng)建。
?
[html]?view plaincopy
<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正確工作，能達(dá)到預(yù)期，那么還需要在AjaxHtmlView.cshtml中添加此JS文件引用
<scriptsrc="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"type="text/javascript"></script>
?
還要確保在Web.Config文件中支持JS的執(zhí)行，需要此配置文件中添加如下標(biāo)簽：
?
[html]?view plaincopy
<span?style="font-family:KaiTi_GB2312;font-size:18px;">??????<addkeyaddkey="ClientValidationEnabled"?value="true"/>????????????<addkeyaddkey="UnobtrusiveJavaScriptEnabled"?value="true"/></span>?? ?
Step6：定義兩個action方法，一個用于返回創(chuàng)建的視圖，一個用于響應(yīng)表單提交；
?
[java]?view plaincopy
<span?style="font-family:KaiTi_GB2312;font-size:18px;">????????public?ActionResult?TestAjaxView()??????????{??????????????ViewBag.Message?=?"AjaxForm——This?is?a?AJAX?form";??????????????return?View();??????????}??????????[HttpPost]??????????public?ActionResult?TestAjaxRedirect()??????????{??????????????returnRedirectToAction("About",?"Test",?null);??????????}?????????? ?
?
看一下TestAjaxRedirect()方法的實現(xiàn)體，我們想從該視圖重定向到另一個視圖About.cshtml。
（附錄：
(1)About.cshtml:
?
[html]?view plaincopy
<span?style="font-family:KaiTi_GB2312;font-size:18px;">@{??????ViewBag.Title?=?"關(guān)于我們";??}?????<h2>關(guān)于</h2>??<p>???????將內(nèi)容放置在此處。??</p></span>?? ?
?
(2)Test控制器中添加About方法：
?
[java]?view plaincopy
<span?style="font-family:KaiTi_GB2312;font-size:18px;">public?ActionResult?About()?{??????????????return?View();??????????}</span>?? ?
?
(3)Global.asax
?
[java]?view plaincopy
<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??{?????????????????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}",?????????????????new?{?controller?="Test",?action?=?"TestHtmlView",?id?=UrlParameter.Optional?}?????????????);?????????????}?????????????protected?void?Application_Start()??????????{?????????????AreaRegistration.RegisterAllAreas();????????????????RegisterGlobalFilters(GlobalFilters.Filters);??????????????RegisterRoutes(RouteTable.Routes);??????????}??????}??}??</span>?? ?
）
Step7：讓我們開始執(zhí)行程序，觀察執(zhí)行結(jié)果，如下圖1：
?????????????????????????????????????????圖1
當(dāng)我點(diǎn)擊圖1中“Html?PsBk Click”按鈕時，TestHtmlRedirect()方法被調(diào)用，并且視圖重定向到TestAjaxView.cshtml,如下圖：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???圖2
?
現(xiàn)在，考慮一件事，當(dāng)我點(diǎn)擊圖2中"Ajax PsBk Click"按鈕時，是否會發(fā)生同樣的事，視圖會重定向到About.cshtml？點(diǎn)擊后，發(fā)現(xiàn)這件事并沒有發(fā)生。
點(diǎn)擊按鈕后，TestAjaxRedirect()方法被調(diào)用，重定向語句段執(zhí)行，但是視圖并沒有重定向。原因是：表單的提交使用了JavaScript的異步提交。正如我們看到的，操作的執(zhí)行是異步的，Ajaxforms是適用于多種情況的，比如你需要修改或保存時是異步操作，但是不能重定向到其他表單。
?
二，下面，我們再做一個Demo，讓我們測試一下Htmlforms和Ajax forms在執(zhí)行修改操作時會有何不同。
Step8:定義一個實體?PersonnelModel
?
[java]?view plaincopy
<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:
?
[html]?view plaincopy
<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:
?
[html]?view plaincopy
<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方法，目的均為返回數(shù)據(jù)內(nèi)容，顯示在各自視圖中
?
[java]?view plaincopy
<span?style="font-family:KaiTi_GB2312;font-size:18px;">????????????????[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");??????????}??????????????????????????[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：現(xiàn)在分別運(yùn)行這兩個視圖，點(diǎn)擊各自按鈕，觀察執(zhí)行效果：
HtmlViewModel.cshtml加載：
?
文本框中輸入數(shù)據(jù)：
?
點(diǎn)擊“Html?Form Action”按鈕后，運(yùn)行效果：
彈出了新頁面，將返回的數(shù)據(jù)顯示
?
AjaxViewModel.cshtml加載：
?
文本框中輸入數(shù)據(jù)：
?
點(diǎn)擊“Ajax?Form Action”按鈕后，運(yùn)行效果：
頁面無刷新，將返回的數(shù)據(jù)顯示在原頁面
?
?
（注：當(dāng)然在Html forms中也可以產(chǎn)生如上Ajaxfroms中的效果，例如:寫js代碼，使用Ajax請求函數(shù)）
總結(jié)：
? ?? ? Html.BeginForm與Ajax.BeginForm都是ＭＶＣ架構(gòu)中的表單元素；
? ? ? 區(qū)別：Html.BeginForm是普通的表單提交，而Ajax.BeginForm是支持異步的表單提交；
? ? ?Ajax.BeginForm()優(yōu)點(diǎn)：不用再自己去用ＪＱ代碼了，直接用ＭＶＣ自代的Ajax.BeginForm就可以很容易的完成一個異步的表單提交動作。
轉(zhuǎn)載于:https://www.cnblogs.com/zjoch/p/4350072.html
總結(jié)
以上是生活随笔為你收集整理的Html.BeginForm() vs Ajax.BeginForm() in MVC3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
