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

posted on 2009-07-03 10:07  CoolCode  阅读(862)  评论(4编辑  收藏  举报