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