第一句話都會這麼去寫:程式猿就是苦逼,除了開發還要會寫博文!哎,今天就和大家一起讨論下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