Ajax.ActionLink()方法的使用


 

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

 

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM