@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掉