时间戳

首页 > 解决方案 > 如何使用 Fetch API 在局部视图 MVC 中包含 CSS 文件和脚本文件

javascript - 如何使用 Fetch API 在局部视图 MVC 中包含 CSS 文件和脚本文件

问题描述

我正在努力在我的 Asp.net MVC Web 应用程序中添加服务工作者。CSS 文件和 JS 文件使用 @Style.Render 和 @Scripts.Render 包含在 _Layout.cshtml 中。如何使用 fetch API 包含这些文件。我想在过滤获取请求的帮助下缓存我的 js 文件和 CSS 文件。我试试下面的代码。它返回该成功消息。但该文件不包括在内。有什么建议吗？

<script type="text/javascript">
    fetch('/Content/Site.css')
        .then(function (response) {
            console.log('script loaded successfully');
        })
        .catch(function (ex) {
            console.log('failed', ex);
        });
</script>

标签： javascriptc#asp.net-mvcprogressive-web-appsfetch-api

解决方案

我没有确切的答案，但更多的是建议。

MVC 局部视图在概念上类似于拥有一个应用程序外壳（想想母版页），可能是一个布局，然后是页面内容，然后可以有子组件（如局部视图）。

现在，MVC 在客户端呈现，所以呈现的页面被发送到网络上，应该不需要在 service worker 中编写页面......

但是，对于某些应用程序，我会在 service worker 中呈现页面。我在去年春天为我制作的 Philly Code Camp 计划 PWA 发布了一个示例，https://love2dev.com/blog/phillycc-service-worker/。

基本上我预先缓存了 appshell、布局和其他核心标记组件。在此示例中，我通过拦截 HTML 请求来获取 JSON。如果我缓存了 HTML 响应，我会返回它，如果没有，我会获取 JSON。当 JSON 响应时，我使用它来渲染（我使用 mustache）带有页面外壳、布局等的标记。最终我渲染标记并将其缓存为响应。

我还可以返回 appShell、appShell + Layout 等（根据需要），然后在客户端线程中呈现，这有点像 SPA，只是没有粗糙的 hashchange 处理。这样做也很容易，target.innerHTML = template.render(...)。

推荐阅读