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?

Perhaps that should be @Html.Partial("FooterLatestBlogPosts", "Common") instead. — , Nov 25 '15 at 10:23
@buffjape I've tried that as well and get the following error. Just remember that `FooterLatestBlogPosts` is not under shared, but is an action method and view in my `Common` controller: `The partial view 'FooterLatestBlogPosts' was not found or no view engine supports the searched locations` — Brendan Vogt, Nov 25 '15 at 10:26
OK, ignore me and check out other questions e.g. http://stackoverflow.com/questions/24072720/async-partialview-causes-httpserverutility-execute-blocked-exception — , Nov 25 '15 at 10:37
It is not the same using @Html.Partial() instead of @Html.Action(). Action call a Controller/Method.. can not call a Partial() if you need to apply some logic and recolect some data... — Diego, Aug 11 '17 at 15:18

score 44 · Answer 1 · edited Nov 04 '16 at 05:51

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

I went with @buffjape post that he suggested. – Brendan Vogt Nov 25 '15 at 11:58 — Brendan Vogt, Nov 25 '15 at 11:58

score 9 · Accepted Answer · edited May 23 '17 at 11:46

9

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.

edited May 23 '17 at 11:46

Community

1
1

answered Nov 25 '15 at 11:58

Brendan Vogt

25,678
37
146
234

score 1 · Answer 3 · answered Oct 25 '22 at 07:37

1

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

     return PartialView(articleDTOs);
}

this will work in your case

answered Oct 25 '22 at 07:37

Osama Asghar

11
2

How to render a partial view asynchronously

3 Answers3

Linked