Как визуализировать частичное представление асинхронно

Может ли частичный просмотр быть асинхронным?

У меня есть частичный вид, который должен отображать сообщения в блоге. Сообщения в блоге возвращаются асинхронно.

В моем файле _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'

Должен ли я просто создать синхронный mthod для возврата моих данных?

Ответ 1

Я пошел с ответом в сообщении, что @buffjape предложил:

Async PartialView вызывает" HttpServerUtility.Execute заблокирован... " Исключение

Я изменил свои методы на синхронные.

Ответ 2

Прежде всего, вам нужно использовать Html.Partial, как было предложено @buffjape. Если частичное представление не находится в папке Shared, вам необходимо указать путь к представлению

@Html.Partial("~/Views/Common/FooterLatestBlogPosts", yourModel)

Однако в этом случае ваше представление все еще загружается синхронно. Чтобы загрузить его асинхронным способом, вам нужно загрузить его через jQuery. Статья Улучшение воспринимаемой производительности веб-сайтов ASP.NET MVC с асинхронными частичными представлениями дает очень хорошее описание того, как ее достичь.

Также замените Html.Render на

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