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扩展。