如何异步渲染局部视图

Posted 2023-03-31

【中文标题】如何异步渲染局部视图

【英文标题】：How to render a partial view asynchronously

【发布时间】：2016-02-28 02:02:51

【问题描述】：

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

我有一个需要渲染博客文章的局部视图。博文是异步返回的。

在我的_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'

我是否应该只创建一个同步方法来恢复我的数据？

【问题讨论】：

或许应该改用@Html.Partial("FooterLatestBlogPosts", "Common")。

@buffjape 我也试过了，得到以下错误。请记住，FooterLatestBlogPosts 不是共享下的，而是我的Common 控制器中的操作方法和视图：The partial view 'FooterLatestBlogPosts' was not found or no view engine supports the searched locations

好的，忽略我并查看其他问题，例如***.com/questions/24072720/…

使用@Html.Partial() 代替@Html.Action() 是不一样的。动作调用控制器/方法。如果您需要应用一些逻辑并重新收集一些数据，则不能调用 Partial()...

【参考方案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")')
);

【讨论】：

我选择了他建议的@buffjape 帖子。

【参考方案2】：

我在@buffjape 建议的帖子中给出了答案：

Async PartialView causes "HttpServerUtility.Execute blocked..." exception

我将方法全部更改为同步。