ASP.NET MVC第021天_Ajax Helper_AjaxOptions,AjaxExtensions,ActionLink,InsertionMode使用筆記part1

- 11月 28, 2021

在.net webform開發時代往往只要提到ajax

很直覺會去聯想到的就是局部更新、updatepanel

和一些webform以前要比較細心留意asp.net ajax生命週期等等技術的關鍵字

在asp.net mvc 這塊則是需透過ajax helper來實踐

底層是透過jQuery來封裝的

首先我們新增好一個.net framework的 mvc5專案

預設要先從nuget補安裝好

跟ajax相關的jQuery

Microsoft.jQuery.Unobtrusive.Ajax

跟ajax驗證相關的jQuery

Microsoft.jQuery.Unobtrusive.Validation

至布局頁加上全域性ajax相關的 js引入

一定要比照此上下順序(因有前後依賴)

AjaxOptions的介紹

在asp.net MVC中要達成一些ajax設定主要就是透過此class

namespace System.Web.Mvc.Ajax
{
    //
    // 摘要:
    //     表示在 ASP.NET MVC 應用程式中執行 Ajax 指令碼的選項設定。
    public class AjaxOptions
    {
        //
        // 摘要:
        //     初始化 System.Web.Mvc.Ajax.AjaxOptions 類別的新執行個體。
        public AjaxOptions();

        //
        // 摘要:
        //     取得或設定在送出要求之前，要在確認視窗中顯示的訊息。
        //
        // 傳回:
        //     要在確認視窗中顯示的訊息。
        public string Confirm { get; set; }
        //
        // 摘要:
        //     取得或設定 HTTP 要求方法 ("Get" 或 "Post")。
        //
        // 傳回:
        //     HTTP 要求方法。預設值為 "Post"。
        public string HttpMethod { get; set; }
        //
        // 摘要:
        //     取得或設定模式，這個模式會指定如何將回應插入至目標 DOM 項目中。
        //
        // 傳回:
        //     插入模式 ("InsertAfter"、"InsertBefore" 或 "Replace")。預設值為 "Replace"。
        public InsertionMode InsertionMode { get; set; }
        //
        // 摘要:
        //     取得或設定值 (以毫秒為單位)，在顯示或隱藏正載入的項目時，這個值會控制動畫的持續時間。
        //
        // 傳回:
        //     值 (以毫秒為單位)，在顯示或隱藏正載入的項目時，這個值會控制動畫的持續時間。
        public int LoadingElementDuration { get; set; }
        //
        // 摘要:
        //     取得或設定載入 Ajax 函式時所顯示之 HTML 項目的 id 屬性。
        //
        // 傳回:
        //     載入 Ajax 函式時所顯示之項目的 ID。
        public string LoadingElementId { get; set; }
        //
        // 摘要:
        //     取得或設定更新頁面之前所要立即呼叫之 JavaScript 函式的名稱。
        //
        // 傳回:
        //     更新頁面之前所要立即呼叫之 JavaScript 函式的名稱。
        public string OnBegin { get; set; }
        //
        // 摘要:
        //     取得或設定在已執行個體化回應資料但尚未更新頁面之前所要呼叫的 JavaScript 函式。
        //
        // 傳回:
        //     已執行個體化回應資料時所要呼叫的 JavaScript 函式。
        public string OnComplete { get; set; }
        //
        // 摘要:
        //     取得或設定頁面更新失敗時所要呼叫的 JavaScript 函式。
        //
        // 傳回:
        //     頁面更新失敗時所要呼叫的 JavaScript 函式。
        public string OnFailure { get; set; }
        //
        // 摘要:
        //     取得或設定成功更新頁面之後所要呼叫的 JavaScript 函式。
        //
        // 傳回:
        //     成功更新頁面之後所要呼叫的 JavaScript 函式。
        public string OnSuccess { get; set; }
        //
        // 摘要:
        //     使用來自伺服器的回應取得或設定要更新之 DOM 項目的 ID。
        //
        // 傳回:
        //     要更新之 DOM 項目的 ID。
        public string UpdateTargetId { get; set; }
        //
        // 摘要:
        //     取得或設定要對其提出要求的 URL。
        //
        // 傳回:
        //     要對其提出要求的 URL。
        public string Url { get; set; }
        public bool AllowCache { get; set; }

        //
        // 摘要:
        //     以 HTML 屬性集合形式傳回 Ajax 選項以支援非干擾性的 JavaScript。
        //
        // 傳回:
        //     Ajax 選項，其形式為 HTML 屬性集合以支援不顯眼的 JavaScript。
        public IDictionary<string, object> ToUnobtrusiveHtmlAttributes();
    }
}

Confirm用來做提交前確認的跳窗

HttpMethod則可以設定要用GET或POST

InsertionMode則代表要安插DOM元素時候的模式要採用

像是InsertAfter , InsertBefore 或者Replace等 (預設為Replace)

LoadingElementDuration 則以毫秒為單位來做特定某個值的設置或存取加載元素的動畫持續時間

LoadingElementId 則是獲取和設置加載過程中要顯示的HTML元素 id

OnBegin :發生在響應之前立即會執行的js 函數

OnComplete : 發生在響應完成之後會執行的js 函數

OnFailure : 發生在響應失敗會執行的js 函數

OnSuccess : 發生在響應成功會執行的js 函數

UpdateTargetId: 則代表目標要更新的DOM元素ID

Url 代表發出請求的位置

AllowCache 是否允許緩存

AjaxExtensions的介紹

主要包含如下四種extension method的封裝

ActionLink

BeginForm

BeginRouteForm

RouteLink

以下是微軟的封裝結構

namespace System.Web.Mvc.Ajax
{
    //
    // 摘要:
    //     表示 ASP.NET MVC 應用程式內對 ASP.NET AJAX 的支援。
    public static class AjaxExtensions
    {
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   protocol:
        //     URL 的通訊協定，例如 "http" 或 "https"。
        //
        //   hostName:
        //     URL 的主機名稱。
        //
        //   fragment:
        //     URL 片段名稱 (錨定名稱)。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   protocol:
        //     URL 的通訊協定，例如 "http" 或 "https"。
        //
        //   hostName:
        //     URL 的主機名稱。
        //
        //   fragment:
        //     URL 片段名稱 (錨定名稱)。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, string protocol, string hostName, string fragment, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   actionName:
        //     動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     一項物件，該物件包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   controllerName:
        //     控制器的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, object routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   actionName:
        //     處理要求之動作方法的名稱。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, string actionName, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginForm(this AjaxHelper ajaxHelper, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     使用指定的路由資訊，將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginRouteForm(this AjaxHelper ajaxHelper, string routeName, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     使用指定的路由資訊，將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginRouteForm(this AjaxHelper ajaxHelper, string routeName, object routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     使用指定的路由資訊，將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginRouteForm(this AjaxHelper ajaxHelper, string routeName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     使用指定的路由資訊，將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginRouteForm(this AjaxHelper ajaxHelper, string routeName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     使用指定的路由資訊，將開頭的 <form> 標記寫入至回應。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     開頭的 <form> 標記。
        public static MvcForm BeginRouteForm(this AjaxHelper ajaxHelper, string routeName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     傳回 HTML script 項目，其中包含定義指定之文化特性資訊的全球化指令碼參考。
        //
        // 參數:
        //   ajaxHelper:
        //     此方法擴充的 AJAX Helper 物件。
        //
        //   cultureInfo:
        //     封裝目標文化特性的相關資訊，例如日期格式。
        //
        // 傳回:
        //     其 src 屬性設為全球化指令碼的 HTML script 項目，如下列程式碼範例所示：<script type="text/javascript" src="/MvcApplication1/Scripts/Globalization/en-US.js"></script>
        //
        // 例外狀況:
        //   T:System.ArgumentNullException:
        //     cultureInfo 參數是 null。
        public static MvcHtmlString GlobalizationScript(this AjaxHelper ajaxHelper, CultureInfo cultureInfo);
        //
        // 摘要:
        //     傳回 HTML script 項目，其中包含定義文化特性資訊的全球化指令碼參考。
        //
        // 參數:
        //   ajaxHelper:
        //     此方法擴充的 AJAX Helper 物件。
        //
        // 傳回:
        //     其 src 屬性設為全球化指令碼的 script 項目，如下列程式碼範例所示：<script type="text/javascript" src="/MvcApplication1/Scripts/Globalization/en-US.js"></script>
        public static MvcHtmlString GlobalizationScript(this AjaxHelper ajaxHelper);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, string routeName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, object routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, string routeName, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, string routeName, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, string routeName, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, string routeName, object routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。這些參數是藉由檢查物件之屬性，透過反映所擷取而來。此物件通常是使用物件初始設定式語法來建立。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, string routeName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, string routeName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
        //
        // 摘要:
        //     傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。
        //
        // 參數:
        //   ajaxHelper:
        //     AJAX Helper。
        //
        //   linkText:
        //     錨定項目的內部文字。
        //
        //   routeName:
        //     用來取得表單張貼 URL 之路徑的名稱。
        //
        //   protocol:
        //     URL 的通訊協定，例如 "http" 或 "https"。
        //
        //   hostName:
        //     URL 的主機名稱。
        //
        //   fragment:
        //     URL 片段名稱 (錨定名稱)。
        //
        //   routeValues:
        //     包含路徑參數的物件。
        //
        //   ajaxOptions:
        //     物件，提供非同步要求的選項。
        //
        //   htmlAttributes:
        //     物件，包含要針對項目設定的 HTML 屬性。
        //
        // 傳回:
        //     錨定項目。
        //
        // 例外狀況:
        //   T:System.ArgumentException:
        //     linkText 參數是 null 或空白。
        public static MvcHtmlString RouteLink(this AjaxHelper ajaxHelper, string linkText, string routeName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
    }
}

Ajax.ActionLink的使用

以ActionLink來說就有12種overload method

public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, AjaxOptions ajaxOptions);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, string protocol, string hostName, string fragment, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions);
public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, AjaxOptions ajaxOptions);

這裡改寫Home控制器對應Index動作方法回傳的View

採用最基本的多載

public static MvcHtmlString ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, AjaxOptions ajaxOptions);

在此要注意這裡的actionName指定必須是在當前controller之中

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<h2>Ajax  ActionLink 測試</h2>

<div>
    @Ajax.ActionLink("獲得目前時間", "GetCurrentDateTime", new AjaxOptions() { Confirm = "確定要獲取目前時間嗎?", InsertionMode = InsertionMode.Replace,UpdateTargetId="date" })
</div>

<div id="date">顯示時間內容</div>

在 HomeController中擴充GetCurrentDateTime的方法

用於回傳局部更新顯示在指定id的div內容

也就是當前時間

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAjaxTestApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public string GetCurrentDateTime()
        {
            return DateTime.Now.ToString();
        }


        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

在按下conifrm確定之後就可成功把資訊局部更新

InsertionMode介紹

namespace System.Web.Mvc.Ajax
{
    //
    // 摘要:
    //     列舉 AJAX 指令碼插入模式。
    public enum InsertionMode
    {
        //
        // 摘要:
        //     取代項目。
        Replace = 0,
        //
        // 摘要:
        //     在項目之前插入。
        InsertBefore = 1,
        //
        // 摘要:
        //     在項目之後插入。
        InsertAfter = 2,
        //
        // 摘要:
        //     取代整個項目。
        ReplaceWith = 3
    }
}

這裡我把InsertionMode調整改為別的

InsertAfter

就會發現原本的文字內容保留後頭多串時間

InsertBefore

就會發現原本的文字內容保留但跟After相反過來串在前面

而當你指定的是

ReplaceWith

則是會把整個div id = date的都取代掉

在AjaxOption中

比較常用的就是

LoadingElementId

和

LoadingElementDuration (By毫秒為單位)

通常會搭配使用

下圖就是兩秒時間加載的動畫

指定在 id 為 load的 div中做內容變更呈現

以實際應用可能是要先將該div隱藏加載開始先慢慢顯示直到結束再隱藏

所以預設通常可以把div設置為display none

加載動畫程式範本

@{
    ViewBag.Title = "Home Page";
}

<h2>Ajax  ActionLink 測試</h2>

<div>
    @Ajax.ActionLink("獲得目前時間", "GetCurrentDateTime", 
                    new AjaxOptions() { Confirm = "確定要獲取目前時間嗎?", 
                                        InsertionMode = InsertionMode.Replace,
                                        UpdateTargetId="date",
                                        LoadingElementId = "load",
                                        LoadingElementDuration = 2000})
</div>

<div id="date">顯示時間內容</div>
<div id="load" style="display:none" >加載中...</div>

其他還有像是

OnBegin

跟

OnComplete

通常OnComplete幾乎都會跟局部更新完的時間點是同時出現的

在不需要等待情況下

由於跑的狀況會感覺OnBegin跟OnComplete幾乎同時出現沒差別

所以在GetCurrentDateTime方法中我們可以增加Thread.Sleep延遲個4秒

來觀察

HomeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAjaxTestApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public string GetCurrentDateTime()
        {
            System.Threading.Thread.Sleep(4000);
            return DateTime.Now.ToString();
        }
    }
}

Index View

@{
    ViewBag.Title = "Home Page";
}

<h2>Ajax  ActionLink 測試</h2>

<div>
    @Ajax.ActionLink("獲得目前時間", "GetCurrentDateTime", 
                    new AjaxOptions() { Confirm = "確定要獲取目前時間嗎?", 
                                        InsertionMode = InsertionMode.Replace,
                                        UpdateTargetId="date",
                                        LoadingElementId = "load",
                                        LoadingElementDuration = 1000,
                                        OnBegin="begin",
                                        OnComplete="complete"})
</div>

<div id="date">顯示時間內容</div>
<div id="begin_date"></div>
<div id="complete_date"></div>
<div id="load" style="display:none" >加載中...</div>

<script type="text/javascript">
    function GetCurrentDateTime() {
        var d = new Date(),
            str = '';
        str += d.getFullYear() + '年';
        str += d.getMonth() + 1 + '月'; //0~11
        str += d.getDate() + '日';
        str += d.getHours() + '時';
        str += d.getMinutes() + '分';
        str += d.getSeconds() + '秒';
        return str;
    }

    function begin() {
        $("#begin_date").text("OnBegin 最一開始執行" + GetCurrentDateTime());
    }
    function complete() {
        $("#complete_date").text("OnComplete 最後完成局部更新才開始執行" + GetCurrentDateTime());
    }
</script>

看一下效果

OnSuccess

和

OnFailure

則適用於判斷是否有成功執行ajax功能

這兩個的出現時機點跟OnComplete差不多

通常預設Ajax HttpMethod沒特別設定默認都會是GET

而我們action也是默認不太指定會採用GET但這裡我要讓他報錯

因此改為POST

最後較常有困惑的是AjaxOptions 的 Url

優先級別會比原本就在ActionLink指定的Action還要高

有指定AjaxOptions 的 Url

就會發現原先跑的Action被覆蓋了改走Url指定的method

沒指定AjaxOptions 的 Url

最後稍微補充routeValues

在其他overload method的參數中會看到 object routeValues

也就是URL後面要傳遞的參數(通常對應action method的參數名稱兩邊要一致)

當然也可以用另一個做設定

RouteValueDictionary routeValues

若資料較多組通常都會用這種Dictionary的key-value方式添加好一個物件再傳遞

而當我們想從Home的View去call ProductControler下的Action

若要同時滿足上述這些條件

則較合適的overload method會是這種簽章

ActionLink(this AjaxHelper ajaxHelper,

string linkText,

string actionName,

string controllerName,

RouteValueDictionary routeValues,

AjaxOptions ajaxOptions);

假如目前產生的A link標籤想增加一些html屬性或是style , class等

則較適合的簽章是這種

ActionLink(this AjaxHelper ajaxHelper,

string linkText,

string actionName,

string controllerName,

RouteValueDictionary routeValues,

AjaxOptions ajaxOptions,

IDictionary<string, object> htmlAttributes);

附上Index 示範兩種ActionLink寫法

@{
    ViewBag.Title = "Home Page";
}
<h2>Ajax  ActionLink 測試</h2>
<div>
    @Ajax.ActionLink("獲得目前時間", "GetCurrentDateTime",
                    new { format="short" },
                    new AjaxOptions() { Confirm = "確定要獲取目前時間嗎?",
                        InsertionMode = InsertionMode.Replace,
                        UpdateTargetId="date",
                        HttpMethod="GET",
                        LoadingElementId = "load",
                        LoadingElementDuration = 1000,
                        OnBegin="begin",
                        OnComplete="complete",
                        OnFailure="failure",
                        OnSuccess= "success",
                        //Url = "/Home/GetTestUrl"
                    })
</div>
<div>

    @{
        var rvDic = new RouteValueDictionary();
        rvDic.Add("productId", "a001");
        rvDic.Add("productName", "Iphone13");

        var htmlAttrDic = new Dictionary<string, object>();
        htmlAttrDic.Add("style", "font-size:16px;font-family:微軟正黑體;");
    }

    @Ajax.ActionLink("取得商品資訊(第1種寫法)",
                    "GetProductInfo",
                    "Product",
                    rvDic,
                    new AjaxOptions()
                    {
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "Get",
                        UpdateTargetId = "list"
                    },
                    htmlAttrDic)
</div>
<div>
    @Ajax.ActionLink("取得商品資訊(第2種寫法)",
                    "GetProductInfo",
                    "Product",
                    new RouteValueDictionary() {
                        {"productId","a002" },
                        {"productName","Iphone12" },
                    },
                    new AjaxOptions()
                    {
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "Get",
                        UpdateTargetId = "list"
                    },
                    new Dictionary<string, object>() {
                        {"style", "font-size:16px;font-family:微軟正黑體;"},
                    })
</div>


<div id="date">顯示時間內容</div>
<div id="list">顯示產品資訊</div>
<div id="begin_date"></div>
<div id="complete_date"></div>
<div id="success_info"></div>
<div id="fail_info"></div>
<div id="load" style="display:none" >加載中...</div>

<script type="text/javascript">
    function GetCurrentDateTime() {
        var d = new Date(),
            str = '';
        str += d.getFullYear() + '年';
        str += d.getMonth() + 1 + '月'; //0~11
        str += d.getDate() + '日';
        str += d.getHours() + '時';
        str += d.getMinutes() + '分';
        str += d.getSeconds() + '秒';
        return str;
    }
    function begin() {
        $("#begin_date").text("OnBegin 最一開始執行" + GetCurrentDateTime());
    }
    function complete() {
        $("#complete_date").text("OnComplete 最後完成局部更新才開始執行" + GetCurrentDateTime());
    }
    function failure() {
        $("#success_info").text("局部刷新失敗" + GetCurrentDateTime());
    }
    function success() {
        $("#fail_info").text("局部刷新成功" + GetCurrentDateTime());
    }
</script>

HomeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAjaxTestApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public string GetCurrentDateTime(string format)
        {
            //System.Threading.Thread.Sleep(4000);
            if (format == "short")
                return DateTime.Now.ToShortDateString();
            else
                return DateTime.Now.ToLongDateString();
        }

        [HttpGet]
        public string GetTestUrl()
        {
            return "Test Url Message";
        }


        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

ProductController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAjaxTestApp.Controllers
{
    public class ProductController : Controller
    {

        [HttpGet]
        public string GetProductInfo(string productId, string productName)
        {
            return $"產品編號:{productId},產品名稱:{productName}";
        }

    }
}

搜尋此網誌

第25個冬天

ASP.NET MVC第021天_Ajax Helper_AjaxOptions,AjaxExtensions,ActionLink,InsertionMode使用筆記part1

留言

張貼留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題