MVC整合Ajax
ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第五篇:MVC整合Ajax 摘要
????? 本文將從完成“輸入數(shù)據(jù)驗證”這個功能出發(fā),逐漸展開ASP.NET MVC與Ajax結(jié)合的方法。首先,本文將使用ASP.NET MVC提供的同步方式完成數(shù)據(jù)驗證。而后,將分別結(jié)合ASP.NET AJAX和JQuery將這個功能重構(gòu)成異步形式。
數(shù)據(jù)驗證
????? 在上一篇文章中,我們完成了發(fā)布公告的功能。但是從健壯性角度看,這個功能并不完善,因為一般情況下,我們輸入的數(shù)據(jù)要符合一定的約束條件,例如,在我們的例子中,我們至少不能將空字符串作為標(biāo)題或內(nèi)容吧。下面,我們來為程序加入數(shù)據(jù)驗證功能,
????? ASP.NET MVC中提供了良好的數(shù)據(jù)驗證實現(xiàn)支持,下面我們來看實現(xiàn)過程。首先,我們要修改一下Release.aspx視圖,修改后的視圖如下。
Release.aspx:
?1<%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="Release.aspx.cs"?Inherits="MVCDemo.Views.Announce.Release"?%>
?2<%@?Import?Namespace="MVCDemo.Models.Entities"?%>
?3
?4<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?5
?6<html?xmlns="http://www.w3.org/1999/xhtml"?>
?7<head?runat="server">
?8????<title></title>
?9</head>
10<body>
11????<%?SelectList?categories?=?ViewData["Categories"]?as?SelectList;?%>
12????<div>
13????????<h1>MVC公告發(fā)布系統(tǒng)——發(fā)布公告</h1>
14????????<%?Html.BeginForm("DoRelease","Announce",FormMethod.Post);?%>
15????????<dl>
16????????????<dt>標(biāo)題:</dt>
17????????????<dd><%=?Html.TextBox("Title")?%></dd>
18????????????<dd><%=?Html.ValidationMessage("TitleValidator")?%></dd>
19????????????<dt>分類:</dt>
20????????????<dd><%=?Html.DropDownList("Category",categories)?%></dd>
21????????????<dd></dd>
22????????????<dt>內(nèi)容:</dt>
23????????????<dd><%=?Html.TextArea("Content")?%></dd>
24????????????<dd><%=?Html.ValidationMessage("ContentValidator")?%></dd>
25????????</dl>
26????????<input?type="submit"?value="發(fā)布"?/>
27????????<%?Html.EndForm();?%>
28????</div>
29</body>
30</html>
????? 可以看到,并沒有什么大的變動,只是多了兩個Html.ValidationMessage方法。可以這樣理解,這個方法相當(dāng)于產(chǎn)生一個span標(biāo)簽,而這個span就是要顯示錯誤信息的地方。這個方法接收一個參數(shù),用來指明其在Controller中的名字。如果你對這個迷惑,不要緊,接下來看完Controller的代碼,你就什么都清楚了。
AnnounceController.cs:
?1using?System;
?2using?System.Collections.Generic;
?3using?System.Linq;
?4using?System.Web;
?5using?System.Web.Mvc;
?6using?System.Web.Mvc.Ajax;
?7using?MVCDemo.Models;
?8using?MVCDemo.Models.Interfaces;
?9using?MVCDemo.Models.Entities;
10
11namespace?MVCDemo.Controllers
12{
13????public?class?AnnounceController?:?Controller
14????{
15????????public?ActionResult?Release()
16????????{
17????????????ICategoryService?cServ?=?ServiceBuilder.BuildCategoryService();
18????????????List<CategoryInfo>?categories?=?cServ.GetAll();
19????????????ViewData["Categories"]?=?new?SelectList(categories,?"ID",?"Name");
20????????????return?View("Release");
21????????}
22
23????????public?ActionResult?DoRelease()
24????????{
25????????????if?(String.IsNullOrEmpty(Request.Form["Title"])?||?String.IsNullOrEmpty(Request.Form["Content"]))
26????????????{
27????????????????if?(String.IsNullOrEmpty(Request.Form["Title"]))
28????????????????{
29????????????????????ViewData.ModelState.AddModelError("TitleValidator","公告標(biāo)題不能為空!");
30????????????????}
31????????????????if?(String.IsNullOrEmpty(Request.Form["Content"]))
32????????????????{
33????????????????????ViewData.ModelState.AddModelError("ContentValidator",?"公告內(nèi)容不能為空!");
34????????????????}
35
36????????????????return?Release();
37????????????}
38
39????????????AnnounceInfo?announce?=?new?AnnounceInfo()
40????????????{
41????????????????ID?=?1,
42????????????????Title?=?Request.Form["Title"],
43????????????????Category?=?Int32.Parse(Request.Form["Category"]),
44????????????????Content?=?Request.Form["Content"],
45????????????};
46
47????????????IAnnounceService?aServ?=?ServiceBuilder.BuildAnnounceService();
48????????????aServ.Release(announce);
49
50????????????ViewData["Announce"]?=?announce;
51????????????return?View("ReleaseSucceed");
52????????}
53????}
54}
????? 可以看到,我們的DoRelease這個Action方法多了不少東西。我們看多了什么:當(dāng)從表單傳遞過來的標(biāo)題或內(nèi)容為空時,我們做了一定處理。注意,這個ViewData.ModelState.AddModelError方法,它就是往我們剛才說的由Html.ValidationMessage生成的span里加入錯誤信息的方法,它可以有兩個參數(shù),第一個指明哪個span,這個參數(shù)Html.ValidationMessage中的參數(shù)是對應(yīng)的。第二個參數(shù)就是要顯示的信息。
????? 相信結(jié)合視圖和控制器,已經(jīng)很好理解了。最后,如果標(biāo)題或內(nèi)容有空值的話,我們不再調(diào)用業(yè)務(wù)邏輯組件處理了,而是調(diào)用了Release這個Action。為什么我們不用Redirect呢?因為我們要保持ViewData中的數(shù)據(jù),剛才我們的錯誤信息可都放在里面的,而使用了Redirect,ViewData的信息就傳不過去了。
????? 現(xiàn)在,我們再來發(fā)布公告。我們故意什么都不填,提交,看結(jié)果:
沒有問題,我們的程序成功對標(biāo)題和內(nèi)容進行了完整性檢測(這里就是均不能為空),在驗證不通過時,返回了發(fā)布公告視圖并正確顯示了錯誤提示信息。
????? 也許你有一個疑問,為什么第一次請求Release視圖時沒有顯示任何錯誤信息呢?因為那時ViewData中的ModelError是空的。而Html.ValidationMessage生成的標(biāo)簽會自動尋找ModelError中同名的錯誤信息,找不到,當(dāng)然是空的了。而在提交空信息時,DoRelease這個Action為ViewData的ModelError添加了內(nèi)容,于是當(dāng)再次返回Release視圖時,相應(yīng)信息就顯示在我們指定的位置了。
使用ASP.NET AJAX實現(xiàn)客戶端數(shù)據(jù)驗證
????? 上面的代碼運行起來沒問題,也達到了我們的要求。但是驗證標(biāo)題內(nèi)容是否為空這種行為在客戶端應(yīng)該就可以完成。當(dāng)然,為了放置惡意攻擊或瀏覽器將JavaScript屏蔽的情況,我們應(yīng)該在后臺進行驗證,但是我們不能每次都將這種請求發(fā)到后臺去驗證,這太費資源了,畢竟惡意攻擊者和JavaScript被屏蔽的瀏覽器只是少數(shù)。所以,在數(shù)據(jù)被送到后臺前,我們應(yīng)該先進行一遍驗證,這樣可以節(jié)約很多資源。
????? 下面,我們使用ASP.NET AJAX框架完成客戶端的數(shù)據(jù)驗證。
????? 說實話,在ASP.NET MVC中使用ASP.NET AJAX或JQuery實在太方便了,不信你展開Scripts文件夾,看到?jīng)],微軟已經(jīng)把這些庫放到里面了,所以,我們要做的只是直接引用??次覀冃薷暮蟮腞elease.aspx。
Release.aspx:
?1<%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="Release.aspx.cs"?Inherits="MVCDemo.Views.Announce.Release"?%>
?2<%@?Import?Namespace="MVCDemo.Models.Entities"?%>
?3
?4<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?5
?6<html?xmlns="http://www.w3.org/1999/xhtml"?>
?7<head?runat="server">
?8????<title></title>
?9????<script?type="text/javascript"?src="<%=?Url.Content("~/Scripts/MicrosoftAjax.debug.js")?%>"></script>
10????<script?type="text/javascript"?src="<%=?Url.Content("~/Scripts/MicrosoftAjaxValidate.js")?%>"></script>
11</head>
12<body>
13????<%?SelectList?categories?=?ViewData["Categories"]?as?SelectList;?%>
14????<div>
15????????<h1>MVC公告發(fā)布系統(tǒng)——發(fā)布公告</h1>
16????????<%?Html.BeginForm("DoRelease","Announce",FormMethod.Post);?%>
17????????<dl>
18????????????<dt>標(biāo)題:</dt>
19????????????<dd><%=?Html.TextBox("Title")?%></dd>
20????????????<dd><span?id="TitleValidator"></span></dd>
21????????????<dt>分類:</dt>
22????????????<dd><%=?Html.DropDownList("Category",categories)?%></dd>
23????????????<dd></dd>
24????????????<dt>內(nèi)容:</dt>
25????????????<dd><%=?Html.TextArea("Content")?%></dd>
26????????????<dd><span?id="ContentValidator"></span></dd>
27????????</dl>
28????????<input?id="Submit"?type="submit"?value="發(fā)布"?/>
29????????<%?Html.EndForm();?%>
30????</div>
31</body>
32</html>
????? 改動有兩處,首先我們在頁頭引用了兩個js文件,第一個是ASP.NET AJAX的庫文件,第二個就是我們一會要實現(xiàn)的包含驗證代碼的js文件了。你可能注意到那個Url.Content了,Url是ViewPage的一個對象,它最常用的一個方法就是Content,它的功能是返回某個文件的路徑。一般情況下,在使用了ASP.NET MVC后,目錄結(jié)構(gòu)變得有點詭異,像js、css、圖片等與路徑(即使是相對路徑)引用相關(guān)的地方可能會出現(xiàn)問題,但是,只要你在這些地方用Url.Content生成路徑,而不是直接將路徑寫在頁面里,一般就沒什么問題了。所以,凡是引用js、css、圖片等除,請一定使用Url.Content生成路徑,其參數(shù)只有一個,就是文件原始的相對路徑。
????? 下一個改動就是顯示錯誤信息的span不再是Html.ValidationMessage生成的了,而是普通的span。
????? 下面我們在Scripts目錄下新建MicrosoftAjaxValidate.js文件。
MicrosoftAjaxValidate.js:
?1Sys.Application.add_init(onPageInit);
?2
?3function?onPageInit()?{
?4????$addHandler($get("Submit"),?"click",?validate);
?5}
?6
?7function?validate()?{
?8????if?($get("Title").value?==?""?||?$get("Content").value?==?"")?{
?9????????if?($get("Title").value?==?"")?{
10????????????$get("TitleValidator").innerHTML?=?"標(biāo)題不能為空!";
11????????}
12????????if?($get("Content").value?==?"")?{
13????????????$get("ContentValidator").innerHTML?=?"內(nèi)容不能為空!";
14????????}
15
16????????return?false;
17????}
18
19????return?true;
20}
????? 關(guān)于這段代碼我不多說了,對ASP.NET AJAX有興趣的可以參看《ASP.NET AJAX客戶端編程之旅》系列文章。
????? 現(xiàn)在運行,將標(biāo)題和內(nèi)容留空,提交。OK!效果和剛才很像,只不過這次是在客戶端驗證了,并沒有提交到服務(wù)器端。
整合JQuery
????? 下面我們再使用JQuery實現(xiàn)這個功能。
????? 其實看懂上面的實現(xiàn)后,我想你已經(jīng)想到怎么整合JQuery了,無非也是引入相應(yīng)庫和js文件,然后使用JQuery編寫驗證代碼。修改后的Release.aspx就沒必要看了,無非是引入Scripts目錄下的JQuery庫,然后再引入一個自定義驗證js文件,我們姑且叫JQueryValidate.js吧。
????? 下面在Scripts目錄下新建JQueryValidate.js,代碼如下。
JQueryValidate.js:
?1$(document).ready(function(){
?2????$("#Submit").click(function()?{
?3????????if?($("#Title").attr("value")?==?""?||?$("#Content").attr("value")?==?"")?{
?4????????????if?($("#Title").attr("value")?==?"")?{
?5????????????????$("#TitleValidator").attr("innerHTML",?"標(biāo)題不能為空!");
?6????????????}
?7????????????if?($("#Content").attr("value")?==?"")?{
?8????????????????$("#ContentValidator").attr("innerHTML",?"內(nèi)容不能為空!");
?9????????????}
10
11????????????return?false;
12????????}
13
14????????return?true;
15????}
16????);
17}
18);
小結(jié)
????? 從本文可以看出,在MVC框架中整合Ajax和普通應(yīng)用差別不大,唯一就是注意在引用外部js時使用Url.Content方法處理一下相對路徑。其實在本文中我們并沒有使用到Ajax,而僅僅是整合了JavaScirpt,但是這已經(jīng)足夠了,因為Ajax無非就是在這些JavaScript里包含了異步后臺調(diào)用。
????? 其實,ASP.NET MVC有專門針對ASP.NET AJAX的擴展,放在MicrosoftMvcAjax.js里。而在ViewPage里有個叫Ajax的AjaxHelper對象,可以實現(xiàn)一些簡單的異步調(diào)用。但是這個擴展的功能很有限,有興趣的可以自己研究一下。我個人還是建議大家自己寫JS代碼,當(dāng)然可以使用ASP.NET AJAX或JQeury這樣優(yōu)秀的框架。
????? 這篇文章先到這里,下一篇中我們討論一下攔截器的使用。^_^
????? 本文將從完成“輸入數(shù)據(jù)驗證”這個功能出發(fā),逐漸展開ASP.NET MVC與Ajax結(jié)合的方法。首先,本文將使用ASP.NET MVC提供的同步方式完成數(shù)據(jù)驗證。而后,將分別結(jié)合ASP.NET AJAX和JQuery將這個功能重構(gòu)成異步形式。
數(shù)據(jù)驗證
????? 在上一篇文章中,我們完成了發(fā)布公告的功能。但是從健壯性角度看,這個功能并不完善,因為一般情況下,我們輸入的數(shù)據(jù)要符合一定的約束條件,例如,在我們的例子中,我們至少不能將空字符串作為標(biāo)題或內(nèi)容吧。下面,我們來為程序加入數(shù)據(jù)驗證功能,
????? ASP.NET MVC中提供了良好的數(shù)據(jù)驗證實現(xiàn)支持,下面我們來看實現(xiàn)過程。首先,我們要修改一下Release.aspx視圖,修改后的視圖如下。
Release.aspx:
?1<%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="Release.aspx.cs"?Inherits="MVCDemo.Views.Announce.Release"?%>
?2<%@?Import?Namespace="MVCDemo.Models.Entities"?%>
?3
?4<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?5
?6<html?xmlns="http://www.w3.org/1999/xhtml"?>
?7<head?runat="server">
?8????<title></title>
?9</head>
10<body>
11????<%?SelectList?categories?=?ViewData["Categories"]?as?SelectList;?%>
12????<div>
13????????<h1>MVC公告發(fā)布系統(tǒng)——發(fā)布公告</h1>
14????????<%?Html.BeginForm("DoRelease","Announce",FormMethod.Post);?%>
15????????<dl>
16????????????<dt>標(biāo)題:</dt>
17????????????<dd><%=?Html.TextBox("Title")?%></dd>
18????????????<dd><%=?Html.ValidationMessage("TitleValidator")?%></dd>
19????????????<dt>分類:</dt>
20????????????<dd><%=?Html.DropDownList("Category",categories)?%></dd>
21????????????<dd></dd>
22????????????<dt>內(nèi)容:</dt>
23????????????<dd><%=?Html.TextArea("Content")?%></dd>
24????????????<dd><%=?Html.ValidationMessage("ContentValidator")?%></dd>
25????????</dl>
26????????<input?type="submit"?value="發(fā)布"?/>
27????????<%?Html.EndForm();?%>
28????</div>
29</body>
30</html>
????? 可以看到,并沒有什么大的變動,只是多了兩個Html.ValidationMessage方法。可以這樣理解,這個方法相當(dāng)于產(chǎn)生一個span標(biāo)簽,而這個span就是要顯示錯誤信息的地方。這個方法接收一個參數(shù),用來指明其在Controller中的名字。如果你對這個迷惑,不要緊,接下來看完Controller的代碼,你就什么都清楚了。
AnnounceController.cs:
?1using?System;
?2using?System.Collections.Generic;
?3using?System.Linq;
?4using?System.Web;
?5using?System.Web.Mvc;
?6using?System.Web.Mvc.Ajax;
?7using?MVCDemo.Models;
?8using?MVCDemo.Models.Interfaces;
?9using?MVCDemo.Models.Entities;
10
11namespace?MVCDemo.Controllers
12{
13????public?class?AnnounceController?:?Controller
14????{
15????????public?ActionResult?Release()
16????????{
17????????????ICategoryService?cServ?=?ServiceBuilder.BuildCategoryService();
18????????????List<CategoryInfo>?categories?=?cServ.GetAll();
19????????????ViewData["Categories"]?=?new?SelectList(categories,?"ID",?"Name");
20????????????return?View("Release");
21????????}
22
23????????public?ActionResult?DoRelease()
24????????{
25????????????if?(String.IsNullOrEmpty(Request.Form["Title"])?||?String.IsNullOrEmpty(Request.Form["Content"]))
26????????????{
27????????????????if?(String.IsNullOrEmpty(Request.Form["Title"]))
28????????????????{
29????????????????????ViewData.ModelState.AddModelError("TitleValidator","公告標(biāo)題不能為空!");
30????????????????}
31????????????????if?(String.IsNullOrEmpty(Request.Form["Content"]))
32????????????????{
33????????????????????ViewData.ModelState.AddModelError("ContentValidator",?"公告內(nèi)容不能為空!");
34????????????????}
35
36????????????????return?Release();
37????????????}
38
39????????????AnnounceInfo?announce?=?new?AnnounceInfo()
40????????????{
41????????????????ID?=?1,
42????????????????Title?=?Request.Form["Title"],
43????????????????Category?=?Int32.Parse(Request.Form["Category"]),
44????????????????Content?=?Request.Form["Content"],
45????????????};
46
47????????????IAnnounceService?aServ?=?ServiceBuilder.BuildAnnounceService();
48????????????aServ.Release(announce);
49
50????????????ViewData["Announce"]?=?announce;
51????????????return?View("ReleaseSucceed");
52????????}
53????}
54}
????? 可以看到,我們的DoRelease這個Action方法多了不少東西。我們看多了什么:當(dāng)從表單傳遞過來的標(biāo)題或內(nèi)容為空時,我們做了一定處理。注意,這個ViewData.ModelState.AddModelError方法,它就是往我們剛才說的由Html.ValidationMessage生成的span里加入錯誤信息的方法,它可以有兩個參數(shù),第一個指明哪個span,這個參數(shù)Html.ValidationMessage中的參數(shù)是對應(yīng)的。第二個參數(shù)就是要顯示的信息。
????? 相信結(jié)合視圖和控制器,已經(jīng)很好理解了。最后,如果標(biāo)題或內(nèi)容有空值的話,我們不再調(diào)用業(yè)務(wù)邏輯組件處理了,而是調(diào)用了Release這個Action。為什么我們不用Redirect呢?因為我們要保持ViewData中的數(shù)據(jù),剛才我們的錯誤信息可都放在里面的,而使用了Redirect,ViewData的信息就傳不過去了。
????? 現(xiàn)在,我們再來發(fā)布公告。我們故意什么都不填,提交,看結(jié)果:
沒有問題,我們的程序成功對標(biāo)題和內(nèi)容進行了完整性檢測(這里就是均不能為空),在驗證不通過時,返回了發(fā)布公告視圖并正確顯示了錯誤提示信息。
????? 也許你有一個疑問,為什么第一次請求Release視圖時沒有顯示任何錯誤信息呢?因為那時ViewData中的ModelError是空的。而Html.ValidationMessage生成的標(biāo)簽會自動尋找ModelError中同名的錯誤信息,找不到,當(dāng)然是空的了。而在提交空信息時,DoRelease這個Action為ViewData的ModelError添加了內(nèi)容,于是當(dāng)再次返回Release視圖時,相應(yīng)信息就顯示在我們指定的位置了。
使用ASP.NET AJAX實現(xiàn)客戶端數(shù)據(jù)驗證
????? 上面的代碼運行起來沒問題,也達到了我們的要求。但是驗證標(biāo)題內(nèi)容是否為空這種行為在客戶端應(yīng)該就可以完成。當(dāng)然,為了放置惡意攻擊或瀏覽器將JavaScript屏蔽的情況,我們應(yīng)該在后臺進行驗證,但是我們不能每次都將這種請求發(fā)到后臺去驗證,這太費資源了,畢竟惡意攻擊者和JavaScript被屏蔽的瀏覽器只是少數(shù)。所以,在數(shù)據(jù)被送到后臺前,我們應(yīng)該先進行一遍驗證,這樣可以節(jié)約很多資源。
????? 下面,我們使用ASP.NET AJAX框架完成客戶端的數(shù)據(jù)驗證。
????? 說實話,在ASP.NET MVC中使用ASP.NET AJAX或JQuery實在太方便了,不信你展開Scripts文件夾,看到?jīng)],微軟已經(jīng)把這些庫放到里面了,所以,我們要做的只是直接引用??次覀冃薷暮蟮腞elease.aspx。
Release.aspx:
?1<%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="Release.aspx.cs"?Inherits="MVCDemo.Views.Announce.Release"?%>
?2<%@?Import?Namespace="MVCDemo.Models.Entities"?%>
?3
?4<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?5
?6<html?xmlns="http://www.w3.org/1999/xhtml"?>
?7<head?runat="server">
?8????<title></title>
?9????<script?type="text/javascript"?src="<%=?Url.Content("~/Scripts/MicrosoftAjax.debug.js")?%>"></script>
10????<script?type="text/javascript"?src="<%=?Url.Content("~/Scripts/MicrosoftAjaxValidate.js")?%>"></script>
11</head>
12<body>
13????<%?SelectList?categories?=?ViewData["Categories"]?as?SelectList;?%>
14????<div>
15????????<h1>MVC公告發(fā)布系統(tǒng)——發(fā)布公告</h1>
16????????<%?Html.BeginForm("DoRelease","Announce",FormMethod.Post);?%>
17????????<dl>
18????????????<dt>標(biāo)題:</dt>
19????????????<dd><%=?Html.TextBox("Title")?%></dd>
20????????????<dd><span?id="TitleValidator"></span></dd>
21????????????<dt>分類:</dt>
22????????????<dd><%=?Html.DropDownList("Category",categories)?%></dd>
23????????????<dd></dd>
24????????????<dt>內(nèi)容:</dt>
25????????????<dd><%=?Html.TextArea("Content")?%></dd>
26????????????<dd><span?id="ContentValidator"></span></dd>
27????????</dl>
28????????<input?id="Submit"?type="submit"?value="發(fā)布"?/>
29????????<%?Html.EndForm();?%>
30????</div>
31</body>
32</html>
????? 改動有兩處,首先我們在頁頭引用了兩個js文件,第一個是ASP.NET AJAX的庫文件,第二個就是我們一會要實現(xiàn)的包含驗證代碼的js文件了。你可能注意到那個Url.Content了,Url是ViewPage的一個對象,它最常用的一個方法就是Content,它的功能是返回某個文件的路徑。一般情況下,在使用了ASP.NET MVC后,目錄結(jié)構(gòu)變得有點詭異,像js、css、圖片等與路徑(即使是相對路徑)引用相關(guān)的地方可能會出現(xiàn)問題,但是,只要你在這些地方用Url.Content生成路徑,而不是直接將路徑寫在頁面里,一般就沒什么問題了。所以,凡是引用js、css、圖片等除,請一定使用Url.Content生成路徑,其參數(shù)只有一個,就是文件原始的相對路徑。
????? 下一個改動就是顯示錯誤信息的span不再是Html.ValidationMessage生成的了,而是普通的span。
????? 下面我們在Scripts目錄下新建MicrosoftAjaxValidate.js文件。
MicrosoftAjaxValidate.js:
?1Sys.Application.add_init(onPageInit);
?2
?3function?onPageInit()?{
?4????$addHandler($get("Submit"),?"click",?validate);
?5}
?6
?7function?validate()?{
?8????if?($get("Title").value?==?""?||?$get("Content").value?==?"")?{
?9????????if?($get("Title").value?==?"")?{
10????????????$get("TitleValidator").innerHTML?=?"標(biāo)題不能為空!";
11????????}
12????????if?($get("Content").value?==?"")?{
13????????????$get("ContentValidator").innerHTML?=?"內(nèi)容不能為空!";
14????????}
15
16????????return?false;
17????}
18
19????return?true;
20}
????? 關(guān)于這段代碼我不多說了,對ASP.NET AJAX有興趣的可以參看《ASP.NET AJAX客戶端編程之旅》系列文章。
????? 現(xiàn)在運行,將標(biāo)題和內(nèi)容留空,提交。OK!效果和剛才很像,只不過這次是在客戶端驗證了,并沒有提交到服務(wù)器端。
整合JQuery
????? 下面我們再使用JQuery實現(xiàn)這個功能。
????? 其實看懂上面的實現(xiàn)后,我想你已經(jīng)想到怎么整合JQuery了,無非也是引入相應(yīng)庫和js文件,然后使用JQuery編寫驗證代碼。修改后的Release.aspx就沒必要看了,無非是引入Scripts目錄下的JQuery庫,然后再引入一個自定義驗證js文件,我們姑且叫JQueryValidate.js吧。
????? 下面在Scripts目錄下新建JQueryValidate.js,代碼如下。
JQueryValidate.js:
?1$(document).ready(function(){
?2????$("#Submit").click(function()?{
?3????????if?($("#Title").attr("value")?==?""?||?$("#Content").attr("value")?==?"")?{
?4????????????if?($("#Title").attr("value")?==?"")?{
?5????????????????$("#TitleValidator").attr("innerHTML",?"標(biāo)題不能為空!");
?6????????????}
?7????????????if?($("#Content").attr("value")?==?"")?{
?8????????????????$("#ContentValidator").attr("innerHTML",?"內(nèi)容不能為空!");
?9????????????}
10
11????????????return?false;
12????????}
13
14????????return?true;
15????}
16????);
17}
18);
小結(jié)
????? 從本文可以看出,在MVC框架中整合Ajax和普通應(yīng)用差別不大,唯一就是注意在引用外部js時使用Url.Content方法處理一下相對路徑。其實在本文中我們并沒有使用到Ajax,而僅僅是整合了JavaScirpt,但是這已經(jīng)足夠了,因為Ajax無非就是在這些JavaScript里包含了異步后臺調(diào)用。
????? 其實,ASP.NET MVC有專門針對ASP.NET AJAX的擴展,放在MicrosoftMvcAjax.js里。而在ViewPage里有個叫Ajax的AjaxHelper對象,可以實現(xiàn)一些簡單的異步調(diào)用。但是這個擴展的功能很有限,有興趣的可以自己研究一下。我個人還是建議大家自己寫JS代碼,當(dāng)然可以使用ASP.NET AJAX或JQeury這樣優(yōu)秀的框架。
????? 這篇文章先到這里,下一篇中我們討論一下攔截器的使用。^_^
轉(zhuǎn)載于:https://www.cnblogs.com/linpengfeixgu/articles/1331250.html
總結(jié)
- 上一篇: 轻松掌握Ajax.net系列教程二:部署
- 下一篇: MVC学习笔记2 认识项目的目录结构与核