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

Question

I have a partial view that tries to retrieve a IEnumerable<Post> from the database using async...

Method

public static class PostService
{
    public static int PostsPerPage = 50;

    public static async Task<IEnumerable<Post>> GetRecentAsync(int page = 0)
    {
        return await entityFrameworkDbContext.Posts
            .ToListAsync();
    }
}

PartialView

public async Task<ActionResult> Recent(int page = 0)
{
    return PartialView(await PostService.GetRecentAsync(page));
}

And then if I try to call it

@Html.Action("Recent", "Post")

I get the following exception

HttpServerUtility.Execute blocked while waiting for an asynchronous operation to complete.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: HttpServerUtility.Execute blocked while waiting for an asynchronous operation to complete.

Why do I get this error? Shouldn't it work?

Answer 1

Child actions must be invoked synchronously. Issue 601 I am also not aware of any recent updates to the current MVC libraries allowing this functionality.

A comment on Issue 601, hints at this functionality being added in MVC vNext, aka. MVC6. Child actions look to be replaced with ViewComponent which can be invoked asynchronously from a view as below. Full examples here and here

<div>
@await Component.InvokeAsync("YourComponent")
</div>

For more on MVC6 check out, http://www.asp.net/vnext/overview/aspnet-vnext/overview

Note: This answer is just a formality, so the question can be marked as answered

Answer 2

A workaround for this issue is to make the method synchronious as required by MVC, clear the SynchronizationContext, call the async method and wait for the result, then restore the context.

see my full aswer here

Answer 3

I had similar issue calling API for some social media website and fetching our last few posts and displaying them at the home page of one of our websites.

the work around this was to use JavaScript to fetch the data I want to display at the home page from the View (Or partial view you wish to display) and then use ID.innerHTML + = to hook the fetched data inside the home page as shown at the following code

 <div id="ID"></div>

<script>
    var ID = document.getElementById('twitter');

    var sendHttpRequest = (method, url) => {
        var promise = new Promise((resolve, reject) => {
            var xhr = new XMLHttpRequest();

            xhr.open(method, url);

            xhr.onload = () => {
                resolve(xhr.response);
            };

            xhr.send();
        });

        return promise;
    };

    window.addEventListener('load', function () {
        sendHttpRequest('GET', '////////////// the URL for the View (Or Partial View) /////////').then((responseData) => {ID.innerHTML += responseData})

    })
</script>

Hope this will help someone who's looking for a faster solution for this issue.

Thanks