@Ajax.RenderAction 把局部页改为ajax加载

页面上局部页多了很拖速度。

尤其是第一次加载，debug=false也没好到哪儿去

 

考虑把Html.RenderAction调用的局部页，替换为ajax加载，但是要替换的地方实在是太多了。

如果都手写ajax代码，很烦人，所以参考ms提供的jquery.unobtrusive-ajax.js写一个扩展方法

核心思想是，先生成一个div，在div上给一些参数，页面加载完成后，根据这些参数发起ajax请求

比如已经有一个div

<div id="container" class="ajaxload index_perBorder" data-ajax-update="#container" data-ajax-mode="replace" data-ajax-loading="" data-ajax="true" ajax-url="/xxxxx/yyyy">

这个div需要一个id，当ajax请求返回时，内容会放置到此div内

  1: $(function () {

  2:         $("div[data-ajax=true]").each(function () {

  3:             var url = $(this).attr("ajax-url");

  4:             if ($(this).attr("data-ajax-loading") != null && $(this).attr("data-ajax-loading") !="") {

  5:                 var loadingid = $(this).attr("data-ajax-loading");

  6:                 var loadEle = $(loadingid);

  7:                 $(this).empty().html(loadEle.clone().show());

  8:                 $(this).attr("data-ajax-loading", "");

  9:             }

 10:             asyncRequest(this, {

 11:                 url: url,

 12:                 type: "GET",

 13:                 data: []

 14:             });

 15: 

 16:         });

 17:     });

在jquery.unobtrusive-ajax.js中加入以上代码，注意应该加载} (jQuery));之前，因为用到他内部的一些方法

剩下就是如何生成这个div了

  1:         public static MvcHtmlString RenderAction(this AjaxHelper ajaxHelper, string containerID, string actionName, string controllerName, RouteValueDictionary routeValues)

  2:         {

  3:             return RenderAction(ajaxHelper, containerID, actionName, controllerName, routeValues, new AjaxOptions { },null);

  4:         }

  5: 

  6:         public static MvcHtmlString RenderAction(this AjaxHelper ajaxHelper, string actionName, string controllerName, RouteValueDictionary routeValues)

  7:         {

  8:             return RenderAction(ajaxHelper, controllerName + "-" + actionName, actionName, controllerName, routeValues, new AjaxOptions { },null);

  9:         }

 10:         public static MvcHtmlString RenderAction(this AjaxHelper ajaxHelper, string actionName, string controllerName, object routeValues)

 11:         {

 12:             return RenderAction(ajaxHelper, controllerName + "-" + actionName, actionName, controllerName, routeValues, new AjaxOptions { },null);

 13:         }

 14: 

 15:         public static MvcHtmlString RenderAction(this AjaxHelper ajaxHelper, string containerID, string actionName, string controllerName, object routeValues)

 16:         {

 17:             return RenderAction(ajaxHelper, containerID, actionName, controllerName, routeValues);

 18:         }

 19: 

 20:         public static MvcHtmlString RenderAction(this AjaxHelper ajaxHelper, string containerID, string actionName, string controllerName, RouteValueDictionary routeValues, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes)

 21:         {

 22:             if (String.IsNullOrEmpty(containerID))

 23:             {

 24:                 throw new ArgumentException("必须指定容器ID","containerID");

 25:             }

 26: 

 27:             string targetUrl = UrlHelper.GenerateUrl(null /* routeName */, actionName, controllerName, routeValues, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true /* includeImplicitMvcValues */);

 28: 

 29:             return MvcHtmlString.Create(GenerateLink(ajaxHelper, containerID, targetUrl, ajaxOptions, htmlAttributes));

 30:         }

 31: 

 32:         private static string GenerateLink(AjaxHelper ajaxHelper,string containerid,  string targetUrl, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes)

 33:         {

 34:             if (string.IsNullOrEmpty(ajaxOptions.UpdateTargetId))

 35:             {

 36:                 ajaxOptions.UpdateTargetId = containerid;

 37:             }

 38:             var tag = new TagBuilder("div");

 39:             tag.MergeAttributes(htmlAttributes);

 40:             tag.MergeAttribute("id", containerid);

 41:             tag.MergeAttribute("ajax-url", targetUrl);

 42:             tag.MergeAttributes(ajaxOptions.ToUnobtrusiveHtmlAttributes());

 43:             return tag.ToString();

 44:         }

 45: 

 46:         public static MvcHtmlString RenderAction(this AjaxHelper ajaxHelper, string containerID, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes)

 47:         {

 48:             RouteValueDictionary newValues = new RouteValueDictionary(routeValues);

 49:             RouteValueDictionary newAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);

 50:             return RenderAction(ajaxHelper, containerID, actionName, controllerName, newValues, ajaxOptions, newAttributes);

 51:         }

若干种重载

调用：

@Ajax.RenderAction("container", "action", "controller", new { 参数 }, new AjaxOptions { LoadingElementId="ajaxloading" }, new { });

如果没有 指定UpdateTargetID,只更新到 “container” （生成的div），如果给了则更新到给定的容器中。同样可以通过onbegin onsuccess等参数来调用一些额外的js。

loadingelementid会把指定的元素复制一个到container中，update时被update掉了，如果不是更新到container，则由jquery.unobtrusive-ajax.js hide掉