Ajax.ActionLink()方法的使用

標籤：style   http   java   color   使用   strong   

 

第一句話都會這麼去寫：程式猿就是苦逼，除了開發還要會寫博文！哎，今天就和大家一起討論下Ajax的輔助方法ActionLink的使用，如果有講的不好的地方或錯的地方，請大家務必扔板磚，要投准哦，砸死我算了！

1、引入JS檔案：Ajax輔助方法依賴於非侵入式JavaScript，所謂非侵入式JavaScript是指：在HTML中不包含任何的JavaScript代碼。如果要使用Ajax的輔助方法，就必須引用相關的JS檔案。如下：

首先引入JQ：<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

其次引入和AJax相關的JS檔案： <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

至於這些與Ajax相關的JS檔案，在項目的Script檔案夾中，自己找哈！

2、引入了這些JS檔案以後，我們就可以在視圖中調用Ajax.ActionLink()方法了，在此聲明下哈，我這裡用的視圖是Razor視圖，即：csHTML檔案！

在Index視圖中，我們可以通過Ajax的屬性訪問ActionLink方法，廢話不多說，咱們直接看代碼吧！嘻嘻~_~

 @Ajax.ActionLink("Click Here", "Hello", "Home", new { name="天才臥龍"}, new AjaxOptions { UpdateTargetId = "myDiv2", HttpMethod = "GET", InsertionMode = InsertionMode.Replace }, new { Title = "點擊我，實現非同步！" })

 

<div id="myDiv2">
       @* 用於非同步載入返回結果*@
    </div>

 

 參數註解：Click Here            是指連結所要顯示的文本。

                Hello                   對應構造方法中的 action                      是指調用的操作的名稱

                Home                  對應構造方法中的Controller                 是指非同步作業調用的控制器名稱

new { name="天才臥龍"}       對應構造方法中的routeValues              是指傳遞的參數  參數名為：name   值為：天才臥龍

new AjaxOptions {.....}         對應構造方法中的AjaxOptions              在此詳細介紹下參數AjaxOptions

對於HTML輔助方法與Ajax輔助方法，顯著不同的就是AjaxOptions。該參數指定了發送請求的方式及處理伺服器返回結果的方式。下面分別介紹各個屬性的意義。

一、UpdateTargetId = "myDiv2"  是指用來接收伺服器返回結果的容器ID

二、HttpMethod = "GET"   不必多說，大家都知道，以GET方式請求資料。

三、InsertionMode = InsertionMode.Replace     指定使用哪一種方式在指定的UpdateTargetId元素更新資料，可以有三種方式： "InsertAfter", "InsertBefore", or "Replace" 。預設為：Replace

new { Title = "點擊我，實現非同步！" }   是指：HtmlAttributes  不做解釋

 

3、根據上述的解析，找到Home控制器，添加名為Hello的action，代碼如下：

 

[HttpGet]        

public string Hello(string name)        

{

 

            return "Hello：" + name;        

}

最後運行程式，點擊下：Click Here   就會在ID為myDiv2的容器中顯示：Hello：天才臥龍

其實實現Ajax.ActionLink()方法很簡單，通過上述的例子，我相信大家都明白怎樣用Ajax.ActionLink()方法實現非同步了。

最後將上述知識在做下總結(僅僅總結參數AjaxOptions對應屬性用法，其他的和HTML輔助方法大同小異。自己學哈。)

 

AjaxOptions中還有其他可以指定的屬性：

 

Confirm	等效於javascript中的return confirm(msg)，在點擊該連結時先提示需要確認的資訊。
HttpMethod	指定使用Get或者是Post方式發送Http請求
InsertMode	指定使用哪一種方式在指定的UpdateTargetId元素更新資料，可以有三種方式： "InsertAfter", "InsertBefore", or "Replace" 。預設為：Replace
LoadingElementDuration	Loading元素顯示的時間
LoadingElementId	可以指定在Http請求期間顯示的Loading元素
OnBegin	在Http請求之前執行的javascript方法
OnComplete	在Http請求結束時執行的方法
OnFailure	在Http請求失敗時執行的方法
OnSuccess	在Http請求成功時執行的方法
UpdateTargetId	Http請求更新的頁面元素
Url	Http請求的Url