請注明轉載地址：http://www.cnblogs.com/arhat

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

在上一節中，我們講了JsonResult和JavaScriptResult兩個類，同時涉及到了Ajax。同時老魏認為在上一節中對于@Ajax和JavaScriptResult講的有點亂，所以本節老魏專門來探討一下@Ajax和JavaScriptResult吧。

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

@Ajax.ActionLink(text,method,AjaxOptions)

這個是用來生成一個超鏈接的，這個超鏈接要異步調用服務器端的method，然后把method的結果傳遞給AjaxOptions進行處理。其實這個很好理解，我們可以拿著傳統的Ajax和這個@Ajax輔助方法來對比一下。比如，我們現在要發送一個Get異步請求，從服務器段得到一串字符串。

先來看看傳統的Ajax調用：

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()”>傳統調用</a>

大家可以看出，傳統的Ajax調用需要用到一個JS函數來發起一個異步請求，同時需要一個回掉函數來處理服務器端發送過來的數據。

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

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

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

下面，我們來對比一下：

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

不知道大家看到這里有沒有明白@Ajax的用法呢？其實就是傳統Ajax調用的簡寫方式。下面我們來分析一下這個@Ajax.ActionLink方法。

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

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

Linktext:超鏈接的文本

actionName:調用的action

routeValue:包含路由參數的對象

ajaxOption:異步請求選項的對象

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

ajaxOptions:其實就是回調對象，就相當于傳統Ajax的回調函數了。我們來看一下這個對象的屬性。

那么AjaxOptions對象就是通過這些屬性來執行相應的回調內容。

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

預覽一下，看看結果。

當我們點解確定之后，才會出現服務器返回的內容。

HttpMethod:設置請求方法Get還是Post。

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

下面我們更改一下View中代碼，添加一個Div，用來存放服務器返回的內容。

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

預覽一下結果：

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

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

預覽一下結果：

LoadingElementId：Ajax請求沒有完成時要顯示的元素。

更改一下代碼：

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

同時為了實現loading的效果，我們在服務器端加入 System.Threading.Thread.Sleep(3000)來延長時間。

我們來看一下結果：當我們點擊鏈接的時候loading會顯示出來，完成之后會自動的消失。

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

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

轉載于:https://www.cnblogs.com/arhat/p/3551361.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。