請(qǐng)注明轉(zhuǎn)載地址：http://www.cnblogs.com/arhat

首先老魏先說一下抱歉，昨天由于在安裝CentOS,Mono，Jexus配置Linux環(huán)境下的ASP.NET運(yùn)行環(huán)境，花費(fèi)了不少的時(shí)間才配置好了，一直忙到2點(diǎn)多，由于太晚了，老魏沒有來得及寫文章，抱歉了各位。好了，廢話不多說，開始今天的旅程。

在上一節(jié)中，我們講了JsonResult和JavaScriptResult兩個(gè)類，同時(shí)涉及到了Ajax。同時(shí)老魏認(rèn)為在上一節(jié)中對(duì)于@Ajax和JavaScriptResult講的有點(diǎn)亂，所以本節(jié)老魏專門來探討一下@Ajax和JavaScriptResult吧。

那么在Razor中，提供了一個(gè)用于處理Ajax的輔助方法,如果要使用Ajax輔助方法，則必須在頁(yè)面中加入jquery.unobtrusie-ajax.js這個(gè)文件才能正常運(yùn)行。那么我們可以在”_Layout.cshtml”中加入這個(gè)js引用。
在Ajax輔助方法中，提供了常用的兩種方法，一個(gè)是超鏈接，一個(gè)是表單。下面我們來看一下這個(gè)兩個(gè)方法。

@Ajax.ActionLink(text,method,AjaxOptions)

這個(gè)是用來生成一個(gè)超鏈接的，這個(gè)超鏈接要異步調(diào)用服務(wù)器端的method，然后把method的結(jié)果傳遞給AjaxOptions進(jìn)行處理。其實(shí)這個(gè)很好理解，我們可以拿著傳統(tǒng)的Ajax和這個(gè)@Ajax輔助方法來對(duì)比一下。比如，我們現(xiàn)在要發(fā)送一個(gè)Get異步請(qǐng)求，從服務(wù)器段得到一串字符串。

先來看看傳統(tǒng)的Ajax調(diào)用：

Server:

public ActionResult ServerMethod(){return Content(“Hello ajax”);}

Client:

<script type=”text/script”>function InvokeAjax(){$.get(“/Home/ServerMethod”,null,function(data){alert(data);},”text”);} </script><a href=”javascript:InvokeAjax()”>傳統(tǒng)調(diào)用</a>

大家可以看出，傳統(tǒng)的Ajax調(diào)用需要用到一個(gè)JS函數(shù)來發(fā)起一個(gè)異步請(qǐng)求，同時(shí)需要一個(gè)回掉函數(shù)來處理服務(wù)器端發(fā)送過來的數(shù)據(jù)。

那么，下面我們看看Ajax輔助方法的使用。

首先需要在頁(yè)面中加入jquery.unobtrusie-ajax.js文件，然后通過@Ajax來生成一個(gè)連接。

@{ViewBag.Title = "Ajax輔助方法";}@section script{function success(data){alert(data);}}@Ajax.ActionLink("Ajax輔助方法", "ServerMethod", new AjaxOptions() { OnSuccess="success" })

下面，我們來對(duì)比一下：

從上圖，我們可以看出，success函數(shù)就相當(dāng)于function(data)，都是回調(diào)函數(shù)，而ActionLink生成的超鏈接就相當(dāng)于直接調(diào)用InvokeAjax方法來發(fā)送一個(gè)異步請(qǐng)求。參數(shù)ServerMethod就是異步請(qǐng)求的方法就相當(dāng)于”/Home/ServerMethod”,所以，從本質(zhì)上看沒有任何的區(qū)別，只不過@Ajax輔助方法用起來就顯得比較簡(jiǎn)單了。

不知道大家看到這里有沒有明白@Ajax的用法呢？其實(shí)就是傳統(tǒng)Ajax調(diào)用的簡(jiǎn)寫方式。下面我們來分析一下這個(gè)@Ajax.ActionLink方法。

ActionLink(String linktext, String actionName, AjaxOptions) ActionLink(String linktext, String actionName, Object routeValue, AjaxOptions)

我們來看看這兩個(gè)重載方法(常用的)的參數(shù)

Linktext:超鏈接的文本

actionName:調(diào)用的action

routeValue:包含路由參數(shù)的對(duì)象

ajaxOption:異步請(qǐng)求選項(xiàng)的對(duì)象

其中對(duì)于linktext和actionName不用過多解釋，上面的例子中就已經(jīng)可以看出是什么了，對(duì)于routeValue其實(shí)就是要傳遞的參數(shù)對(duì)象，通過匿名對(duì)象傳遞給服務(wù)器。

ajaxOptions:其實(shí)就是回調(diào)對(duì)象，就相當(dāng)于傳統(tǒng)Ajax的回調(diào)函數(shù)了。我們來看一下這個(gè)對(duì)象的屬性。

那么AjaxOptions對(duì)象就是通過這些屬性來執(zhí)行相應(yīng)的回調(diào)內(nèi)容。

Confirm：在請(qǐng)求之前彈出一個(gè)警告框（一般用于刪除，更新等操作的提示）。我們來操作一下，把上面的代碼改一下：
@Ajax.ActionLink("Ajax輔助方法", "ServerMethod", new AjaxOptions() { Confirm="確認(rèn)調(diào)用嗎?", OnSuccess="success" })

預(yù)覽一下，看看結(jié)果。

當(dāng)我們點(diǎn)解確定之后，才會(huì)出現(xiàn)服務(wù)器返回的內(nèi)容。

HttpMethod:設(shè)置請(qǐng)求方法Get還是Post。

InsertionMode：設(shè)置如何把服務(wù)器返回的內(nèi)容插入到目標(biāo)Dom中，而這個(gè)Dom元素通過UpdateTargetId來指定。InsertionMode是個(gè)枚舉類型Replace(替換，默認(rèn)),InsertBefore(在Dom內(nèi)容之前插入),InsertAfter(在Dom內(nèi)容之后插入)

下面我們更改一下View中代碼，添加一個(gè)Div，用來存放服務(wù)器返回的內(nèi)容。

@Ajax.ActionLink("Ajax輔助方法", "ServerMethod", new AjaxOptions() { UpdateTargetId="result"})<div id="result"></div>

預(yù)覽一下結(jié)果：

我們來試一下InsertBefore(在Dom內(nèi)容之前插入)。更改代碼如下：

@Ajax.ActionLink("Ajax輔助方法", "ServerMethod", new AjaxOptions() { InsertionMode=InsertionMode.InsertBefore, UpdateTargetId="result"})<div id="result">內(nèi)容</div>

預(yù)覽一下結(jié)果：

LoadingElementId：Ajax請(qǐng)求沒有完成時(shí)要顯示的元素。

更改一下代碼：

@Ajax.ActionLink("Ajax輔助方法", "ServerMethod", new AjaxOptions() { LoadingElementId="loading", InsertionMode=InsertionMode.InsertBefore, UpdateTargetId="result"})<div id="result">內(nèi)容</div><div id="loading" style="display:none">loading....</div>

同時(shí)為了實(shí)現(xiàn)loading的效果，我們?cè)诜?wù)器端加入 System.Threading.Thread.Sleep(3000)來延長(zhǎng)時(shí)間。

我們來看一下結(jié)果：當(dāng)我們點(diǎn)擊鏈接的時(shí)候loading會(huì)顯示出來，完成之后會(huì)自動(dòng)的消失。

? 對(duì)于OnBegin,OnComplate,OnSuccess,OnFailure這幾個(gè)屬性，大家猜猜就應(yīng)該知道是怎么回事了，分別是在開始，完成，成功，失敗時(shí)要執(zhí)行的JS函數(shù)，用法和上面的例子中OnSuccess的用法一樣，大家可以自行的研究，老魏這里就不在舉例子了。

這就是@Ajax的用法，當(dāng)然還有表單，表單也可以使用@Ajax。那么下一節(jié)中我們繼續(xù)來研究@Ajax和JavaScriptResult吧，本節(jié)先講到這兒吧。順便說一下，老魏在后面的幾天可能比較繁忙，文章盡可能的按時(shí)發(fā)布。順便，這幾天抽個(gè)空，老魏把Mono,CentOS的配置寫一下吧！

轉(zhuǎn)載于:https://www.cnblogs.com/arhat/p/3551361.html

總結(jié)

以上是生活随笔為你收集整理的一步步学习ASP.NET MVC3 (10)——@Ajax,JavaScriptResult(1)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。