我們知道,BeginForm()方法能創建一個Form標簽,因此可以結合表單級的方法,在這個頁面中。我一直在考慮Html.BeginForm()方法和Ajax.BeginForm()方法在MVC3中有什么不同。讀了很多博客,很多人都強調了一件事:Ajax Form,Form被提交是使用了JavaScript異步提交的。
?
Html?Form和?Ajax Form區別:
一,我做了一個簡單的Demo來示范:
Step1:創建一個MVC項目
Step2:創建一個視圖名為TestHtmlView.cshtml,此視圖的Form表單使用Html.BeginForm()創建。此例子的操作是:當提交此表單時進行重定向;
?
[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方法,一個用于返回創建的視圖,一個用于響應表單提交;
?
[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()方法的實現體,我們想從該視圖重定向到另一個視圖TestAjaxView.cshtml。
?
Step4:創建一個視圖名為AjaxHtmlView.cshtml,此視圖的Form表單使用Ajax.BeginForm()創建。
?
[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正確工作,能達到預期,那么還需要在AjaxHtmlView.cshtml中添加此JS文件引用
<scriptsrc="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"type="text/javascript"></script>
?
還要確保在Web.Config文件中支持JS的執行,需要此配置文件中添加如下標簽:
?
[html]?view plaincopy
<span?style="font-family:KaiTi_GB2312;font-size:18px;">??????<addkeyaddkey="ClientValidationEnabled"?value="true"/>????????????<addkeyaddkey="UnobtrusiveJavaScriptEnabled"?value="true"/></span>?? ?
Step6:定義兩個action方法,一個用于返回創建的視圖,一個用于響應表單提交;
?
[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()方法的實現體,我們想從該視圖重定向到另一個視圖About.cshtml。
(附錄:
(1)About.cshtml:
?
[html]?view plaincopy
<span?style="font-family:KaiTi_GB2312;font-size:18px;">@{??????ViewBag.Title?=?"關于我們";??}?????<h2>關于</h2>??<p>???????將內容放置在此處。??</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:讓我們開始執行程序,觀察執行結果,如下圖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
?
[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方法,目的均為返回數據內容,顯示在各自視圖中
?
[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:現在分別運行這兩個視圖,點擊各自按鈕,觀察執行效果:
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的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。