How to render a partial view asynchronously

问题:

Can a partial view be rendered asynchronously?

I have a partial view that needs to render blog posts. The blog posts are returned asynchronously.

In my _Layout file I render my partial footer _Footer. In _Footer I have the following markup:

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

So in my Common controller I have the following action method:

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

     return PartialView(articleDTOs);
}

In my FooterLatestBlogPosts partial view I have the following:

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

I'm getting an error:

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

Should I rather just create a synchronous mthod to bring back my data?

回答1:

First of all you need to use Html.Partial as suggested by @buffjape. If your partial view is not in Shared folder you need to specify the path to the view

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

However in this case your view is still loaded synchronously. To load it in async way you need to load it via jQuery. Article Improve perceived performance of ASP.NET MVC websites with asynchronous partial views gives a very good description on how to achieve it.

Also replace your Html.Render with

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

回答2:

I went with the answer in the post that @buffjape suggested:

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

I changed my methods all to synchronous.