Come eseguire il rendering di una vista parziale in modo asincrono

Question

Una vista parziale può essere visualizzata in modo asincrono?

Ho una vista parziale che deve rendere i post del blog. I post del blog vengono restituiti in modo asincrono.

Nel file _Layout viene eseguito il rendering del mio footer parziale _Footer. In _Footer ho il seguente markup:

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

Così nel mio controller Common ho il seguente metodo di azione:

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

    return PartialView(articleDTOs); 
} 

A mio FooterLatestBlogPosts vista parziale Ho la seguente:

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

Viene visualizzato un messaggio di errore:

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

Dovrei piuttosto creare un file sincrono per ripristinare i miei dati?

Answer 1

sono andato con la risposta nel post che @buffjape suggerito:

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

ho cambiato tutti i metodi a sincrono.

Answer 2

Prima di tutto è necessario utilizzare Html.Partial come suggerito da @buffjape. Se la vostra visione parziale non è nella cartella Shared è necessario specificare il percorso alla vista

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

Tuttavia, in questo caso il vostro punto di vista è ancora caricato in modo sincrono. Per caricarlo in modo asincrono è necessario caricarlo tramite jQuery. L'articolo Improve perceived performance of ASP.NET MVC websites with asynchronous partial views fornisce un'ottima descrizione su come ottenerlo.

sostituire anche i tuoi Html.Render con

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