How to render a partial view asynchronously

Question

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?

Solution 1

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.

Solution 2

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")')
});

Comments

[Brendan Vogt]

I went with @buffjape post that he suggested.