使用 fetch() API 返回部分视图

Question

fetch API 是旧 XMLHttpRequest API 的现代替代品。

jQuery、MooTools、Prototype 和 Zepto 等许多 JavaScript 库添加了非标准的 X-Requested-With 请求标头，该标头已成为事实上的标准，并且许多 JavaScript 库以及 Web 应用程序框架都支持，例如 Ruby on Rails、Laravel、Sinatra、Spring、Symfony、ASP.NET MVC 等。

随着 JavaScript 对 jQuery 的现代化改造，jQuery 已经失去了重要地​​位，AngularJS 曾经发送 XMLHttpRequest 标头，但现在不再这样做了。 ASP.NET Core MVC 不再包含 IsAjaxRequest 扩展方法。

许多 Web 应用程序框架都有“部分视图”的概念，因此它可以返回没有页眉和页脚的视图。

如何响应fetch() 请求返回部分视图？

我可以将 X-Requested-With 标头添加到 fetch 请求中，但似乎有 some people 反对声称这是一个非标准标头并且它破坏了某些 Web 代理中的缓存，它可能导致额外的飞行前 OPTIONS 请求等。

这些人说应该改用Accept 标头。但我该怎么做呢？我想为这两种类型的请求返回 HTML 内容，只是 fetch() 请求应该获取页面的子集（内容但没有页眉和页脚）。

Accept 标头的值是多少？

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

在我看来，Accept 标头似乎无法使用。我不明白它可以如何使用。正常请求页面和请求部分视图时，我需要 HTML 内容，即text/html。

• 我是否应该使用 Accept 标头并发明自己的非标准 MIME 类型，例如 text/partial+html ？
• 我是否应该将X-Requested-With 添加到我的 fetch() 请求的标头中？
• 我是否应该附加一个查询字符串，例如/page?type=partialview？
• 我应该有不同的 HTTP 端点，例如 /Account/Login 和 /Account/LoginPartial 吗？
• 我是否应该获取整个页面、解析 DOM 并提取 <main> 元素的内容？

Answer 1

您的问题：如何返回部分视图以响应 fetch() 请求？

我自己将它与 Razor Pages 一起使用。这是javascript代码

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

这是 cshtml.cs 文件中的代码。我想 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()
        })
    };
}