Cool MVC: 結合jQuery 打造超級簡單的Ajax 擴充

我不知道這個標題能否吸引你，但我先給出這個jQuery擴充的最簡單的ajax應用例子語句：

把簡單的 <input type="I am submit" value ="Submit"/> 換成

<% = Ajax.Get("I will not submit")%>

這樣簡單的語句就實現ajax的get操作了，超cool！以後可以不再submit了（註：submit在英文裡有屈服的意思）

當然以上例子沒有指定Action，預設是提交資料到當前的Action。如果我們要提交到其他Action，例如提交到“SaveData”的Action，可以這樣寫：

<% = Ajax.Get("I will not submit",”SaveData”)%>

如果提交到其他controller， 就是：

<% = Ajax.Get("I will not submit",”SaveData”, “OtherControllerName”)%>

當然我們還可以指定get提交的參數：

<% =Ajax.Get("Delete","AjaxDelete",new {id=model.ID })%>

以及confirm和callback：

<% = Ajax.Get("Delete","AjaxDelete",new {id=model.ID }, new AjaxOptions { Confirm ="Do u want to delete this comment? ", OnSuccess = "$('#divModelList').html(data);" })%>

這裡簡單解釋一下：以上代碼實現這樣的效果，當點“Delete”的超連結時，會彈出一個確認框問你是否要Delete，如果點確定就會調用AjaxDelete的服務端Action，成功後還會重新整理id為“divModelList”的div，簡單嗎？

我們先瞭解一下，如果是單純的js代碼是怎麼實現的。

function AjaxDelete(idToDelete) {    var result = confirm('Do u want to delete this comment? ');    if (!result) return false;    $.get('/JQuerySample/AjaxDelete/'+idToDelete, '', function(data) {        $('#divModelList').html(data);    });}

 

嗯，也不算麻煩，但是傳遞url方面就有點小問題，上面是對url寫入程式碼了'/JQuerySample/AjaxDelete/',如果Rount改了這裡就會出錯。因此我們可能需要這樣寫

function AjaxDelete(url) {    var result = confirm('Do u want to delete this comment? ');    if (!result) return false;    $.get(url, '', function(data) {        $('#divModelList').html(data);    });}

調用：

AjaxDelete('<%=Url.Action("AjaxDelete","JQuerySample",new {id=1})%>');

啊，這樣就顯得很麻煩了。

迴歸到剛才的話題，MVC Ajax的擴充方法：

                public static string Get(this AjaxHelper helper, string linkText, string actionName, string controllerName,            object routeValues, string jsonParam, object htmlAttributes, AjaxOptions ajaxOptions)        {            return GetPostHelper(helper, linkText, actionName, controllerName, routeValues, jsonParam, htmlAttributes,                ajaxOptions, true );         }        public static string Post(this AjaxHelper helper, string linkText, string actionName, string controllerName,            object routeValues, string jsonParam, object htmlAttributes, AjaxOptions ajaxOptions)        {            return GetPostHelper(helper, linkText, actionName, controllerName, routeValues, jsonParam, htmlAttributes,                ajaxOptions, false);         }        private static string GetPostHelper( AjaxHelper helper, string linkText, string actionName, string controllerName,            object routeValues, string jsonParam, object htmlAttributes, AjaxOptions ajaxOptions, bool isGet)        {            string linkFormat = "<a href=\"{0}\" {1} {3}>{2}</a>";            string atts = string.Empty;            string ajaxs = string.Empty;            string opt = isGet ? "get" : "post";            if (htmlAttributes != null)                atts = Html.ConvertObjectToAttributeList(htmlAttributes);            UrlHelper url = new UrlHelper(helper.ViewContext.RequestContext);            string action = routeValues == null ? url.Action(actionName, controllerName) : url.Action(actionName, controllerName, routeValues, "");            if (string.IsNullOrEmpty(jsonParam))                jsonParam = "$('form').serialize()";            if (ajaxOptions != null)            {                string confirmScript = string.Empty;                if (!string.IsNullOrEmpty(ajaxOptions.Confirm))                {                    confirmScript = string.Format("var result = confirm('{0}'); if(!result)return false;", ajaxOptions.Confirm);                }                ajaxs = string.Format("onclick=\"{0}$.{1}('{2}',{3},{4});return false;\" ",                   confirmScript + ajaxOptions.OnBegin,                   opt,                    action,                    jsonParam,                  "function(data){" + ajaxOptions.OnSuccess + "}"                 );            }            string result = string.Format(CultureInfo.InvariantCulture, linkFormat, "#", atts, linkText, ajaxs);            return result;        }

 

Get和Post這兩個方法，我分別重構了10個版本，並放到http://mvcj.codeplex.com/，

完整的代碼下載頁：http://mvcj.codeplex.com/SourceControl/ListDownloadableCommits.aspx

我很喜歡jQuery這個js架構，這裡拋磚引玉，希望能有人對這個架構進行更多的MVC擴充。