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

时间:2017-09-05 20:57:47

标签: xmlhttprequest partial-views fetch-api ajax-request

fetch API在此处是旧XMLHttpRequest API的现代替代品。

许多JavaScript库,例如jQueryMooToolsPrototypeZepto等添加了非标准X-Requested-With请求标头,该标头已成为< em>事实上的标准,并受到许多JavaScript库以及Web应用程序框架的支持,例如Ruby on RailsLaravel,Sinatra,Spring,Symfony,ASP.NET MVC等等。

随着JavaScript的现代化,jQuery已经失去了突出地位,AngularJS过去常常发送XMLHttpRequest标题但不再这样做了。 ASP.NET Core MVC不再包含IsAjaxRequest扩展方法。

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

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

我可以将X-Requested-With标头添加到获取请求中,但似乎有some people反对声称这是非标准标头并且它在某些网络代理中破坏了缓存,它可以导致额外的飞行前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>元素的内容?

1 个答案:

答案 0 :(得分:0)

您的问题:如何响应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()
        })
    };
}