Returning partial views with the fetch() API

Question

The fetch API is here as the modern replacement for the old XMLHttpRequest API.

Many JavaScript libraries such as jQuery, MooTools, Prototype and Zepto, etc add the non-standard X-Requested-With request header which has become a de facto standard and supported by many JavaScript libraries as well as web application frameworks such as Ruby on Rails, Laravel, Sinatra, Spring, Symfony, ASP.NET MVC, etc.

As JavaScript have modernized jQuery have been losing prominence, and AngularJS used to send the XMLHttpRequest header but no longer does so. ASP.NET Core MVC no longer contains the IsAjaxRequest extension method.

Many web application frameworks have the concept of "partial views" so it can return a view without the header and the footer.

How do I return a partial view in response to a fetch() request?

I could add the X-Requested-With header to the fetch request but there seems to be some people who argue against that claiming that is a non-standard header and that it breaks caching in some web proxies, that it can cause an additional pre-flight OPTIONS request, etc.

These people say that the Accept header should be used instead. But how would I do that? I want to return HTML content for both types of request, just that the fetch() request should get a subset of the page (the content but without the header and the footer).

What would the value for the Accept header be?

if page_is_requested_by_fetch_api:
    return content
else:
    return header + content + footer

To me it seems that the Accept header cannot be used. I don't see how it can be used. When requesting the page normally and when requesting a partial view I would want HTML content, i.e. text/html.

• Am I supposed to use the Accept header and invent my own non-standard MIME type such as text/partial+html ?
• Am I supposed to add the X-Requested-With to the headers for my fetch() request?
• Am I supposed to append a query string such as /page?type=partialview?
• Am I supposed to have different HTTP endpoints, such as /Account/Login and /Account/LoginPartial ?
• Am I supposed to fetch the full page, parse the DOM and extract the contents of the <main> element?

Answer 1

Your question: How do I return a partial view in response to a fetch() request?

I'm using it myself with Razor Pages. Here is the javascript code

fetch(url)
        .then((response) => { return response.text(); })
        .then((result) => {
                $('#container').html(result);
        });

And this is the code in the cshtml.cs file. I suppose it will be the same for controllers in MVC:

public async Task<PartialViewResult> OnGetSomeObjectList()
{
    return new PartialViewResult()
    {
        ViewName = "NAME_OF_PARTIAL_VIEW",
        ViewData = new ViewDataDictionary<IEnumerable<object>>(ViewData, new List<object>()
        {
            new object(),
            new object()
        })
    };
}