如何异步渲染局部视图

Question

部分视图可以异步渲染吗？

我有一个需要呈现博客文章的部分视图。博客文章是以异步方式返回的。

在我的_Layout文件中，我呈现了我的部分页脚_Footer。在_Footer中，我有以下标记：

@Html.Action("FooterLatestBlogPosts", "Common")

所以在我的Common控制器中，我有以下的操作方法：

public async Task<ActionResult> FooterLatestBlogPosts()
{
     List<ArticleDTO> articleDTOs = await articleTask.GetAllAsync();

     return PartialView(articleDTOs);
}

在我的 FooterLatestBlogPosts 部分视图中，我有以下内容：

@model List<MyProject.Application.DTO.ArticleDTO>
@if (Model.Count > 0)
{
     <ul class="list-unstyled">
          @foreach (var articleDTO in Model)
          {
               <li>@articleDTO.Title</li>
          }
     </ul>
}

我遇到了一个错误：

Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'

我是否应该创建一个同步方法来获取我的数据？

- Brendan Vogt

---

也许应该是@Html.Partial("FooterLatestBlogPosts", "Common")。 - user1023602

@buffjape 我也尝试过了，但是出现了以下错误。请记住，FooterLatestBlogPosts不在共享文件夹下，而是在我的Common控制器中的一个操作方法和视图：未找到部分视图'FooterLatestBlogPosts'或没有视图引擎支持搜索的位置。 - Brendan Vogt

好的，请忽略我，查看其他问题，例如https://dev59.com/fmAf5IYBdhLWcg3w_W5j。 - user1023602

使用@Html.Partial()而不是@Html.Action()是不同的。Action调用控制器/方法，如果您需要应用一些逻辑并收集一些数据，则无法调用Partial()。 - Diego

Answer 1

首先，你需要像@buffjape建议的那样使用 Html.Partial 。如果你的部分视图不在 Shared 文件夹中，你需要指定视图的路径。

@Html.Partial（“〜/Views/Common/FooterLatestBlogPosts”，yourModel）

但是在这种情况下，您的视图仍然是同步加载的。要以异步方式加载它，您需要通过jQuery加载它。文章Improve perceived performance of ASP.NET MVC websites with asynchronous partial views提供了非常好的描述，说明如何实现它。

此外，请将您的 Html.Render 替换为

$(document).ready(function(){
     $("#yourContainer").load('@Url.Action("FooterLatestBlogPosts", "Common")')
});

- Andrei Mihalciuc

---

我选择了@buffjape建议的帖子。 - Brendan Vogt

Answer 2

我采用了@buffjape在帖子中建议的答案：Async PartialView causes "HttpServerUtility.Execute blocked..." exception 我将所有方法都改为同步方法。

- Brendan Vogt

Answer 3

public ActionResult FooterLatestBlogPosts()
{
     List<ArticleDTO> articleDTOs = articleTask.GetAllAsync().Result;

     return PartialView(articleDTOs);
}

这将适用于您的情况。

- Osama Asghar