一个MVC HTML Helper，用于异步加载部分视图

• 下载演示解决方案 - 6.4 MB

引言

有时，索引页面可能需要很长时间才能加载，通常是因为所需数据来自长时间运行的进程或缓慢的资源（缓慢的数据库、惰性的 Web 服务、特定的数据计算等）。

当然，首先要做的是尝试通过数据库优化、代码审查、数据分页等方式来消除这些问题。但作为最后的手段，为了改善用户在浏览器前等待的体验，我们可以做的是尽快提供他们一些东西，并在数据可用后尽快完成页面。

Partial Views 和 HtmlHelper 扩展方法

每个人都知道并在 MVC 中使用 partial views，以及它们如何包含在主 View 中，通常是索引页面。

这个扩展是一个新的 HtmlHelper，它执行显示“预览”partial view的繁琐工作，在后台调用真正的partial view，并最终在准备好后显示完整版本，并且可以用一行代码调用它。

Using the Code

@Html.AsyncPartial("MyController","MyAction")

这是扩展最简单的用法，它将代替 Html.Partial，提供给：

• 直接在父视图中加载一个名为 "MyAction_Preview" 的 partial view，通常是一个没有 Model 的 partial view。它应该看起来类似于最终视图，但只是呈现一个等待微调器或者你喜欢的其他内容。
• 将预览 partial view 的 HTML 包装到一个容器中，并注入 JavaScript 代码，无论是以内联代码的形式还是我们决定的任何位置，该代码将调用 MyController/Myaction
• 用 JavaScript 获取的异步响应替换容器内容

结果是预览 Partial view ...

...一旦数据可用，就被完整的 Partial view 替换。

完整的扩展签名如下

 public static MvcHtmlString AsyncPartial(this HtmlHelper helper, 
      string controller, 
      string action,
      string previewPartialName=null, 
      AjaxMethods method = AjaxMethods.GET, 
      TempDataDictionary TempData=null)

previewPartialName：如果提供，它将是等待异步调用完成时显示的“预览” partial view 的名称。默认为 "{action}_preview"

method：用于在控制器中调用 Action 的 POST 或 GET。默认为 GET。

TempData：如果提供，Dictionary 将包含要添加到页面中的 JS 脚本，该脚本调用 partial view。 否则，该脚本将作为内联代码包含在 partial view HTML 之后，以便在 HTML 页面呈现期间执行。

在主 View 中，这是你需要的：

@using Helper.Extensions
......

@Html.AsyncPartial("home", "getdata")

@using 指令导入 helper 类（可下载）中使用的 namespace。

当然，在这种情况下，你需要一个包含 getdata Action 的 home 控制器。

 public ActionResult GetData()
 {
    PopulationModel model = new PopulationModel();
    return View(model);
 }

应该存在视图 getdata.cshtml 和 getdata_preview.cshtml 。 在这种情况下，第一个视图需要一个模型，第二个不需要。

脚本位置

如果你选择将 TempData 字典传递给 helper，则 JS 脚本将添加到你键入的主视图中：

<script>@Html.Raw(TempData["script"])</script>

默认情况下，JS 脚本作为内联代码注入到 partial view HTML 之后。

点击刷新

partial view 右上角的白色刷新图标实际上会发送 Ajax 请求来刷新内容。 如果需要，只需在视图中包含一个具有 data-partial-refresh 属性的 anchor 标签。 helper 将添加一个 onclick 事件，调用所需的 JS 函数。

<a data-partial-refresh href="#">
<span class="glyphicon glyphicon-refresh"></span></a>

作者

Max Aronica 是一名高级 .NET 全栈开发人员，在意大利罗马担任企业客户的外部顾问。

历史

• 2017年9月18日：附加缺失的演示解决方案