Question

我对ASP MVC还是很陌生，所以也许我在这里犯了一个新手错误。

对于我的网站，我希望所有页面都具有标准化的标题和侧边栏，因此我将其放在_Layout.cshtml中，效果很好。我的应用程序的主要索引页面（我将在以后对其进行调整，但正如我刚刚开始的那样，如果相关，https://www.wrappixel.com/demos/free-admin-templates/matrix-admin/几乎是相同的），其中包含许多我d可能最终希望使用，因此我正在尝试确保它在设置时保持功能。

现在，如果我要调用一组JS文件，然后从_Layout.cshtml调用初始化JS文件，则所有图表加载都不会出现问题。但是，我认为这是一种不好的做法，因为我不会在每个页面上都包含所有这些图表。因此，我将这些JS文件的导入复制并粘贴到了内容页面中，但这很奇怪，导致图表无法加载。尽管我可以通过控制台和调试器确保在控制台中确实加载了上述每个JS文件。网络标签中，由于在上述文件之一中找不到功能，我的初始化脚本将失败。

我仅有的两个想法是，我加载页面内容的方式存在问题，或者在被发现之前资源404出现了问题。我相信这是用于调用内容页面的所有代码：

<div>
    <partial name="_CookieConsentPartial" />
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

我提到的另一种可能性是奇怪的404。每当我刷新页面时，控制台始终会为我提供一些信息：

Source map error: request failed with status 404
Resource URL: https://localhost:5001/vendors/bootstrap/dist/js/bootstrap.min.js
Source Map URL: bootstrap.min.js.map[Learn More]

这些总是可以解决的，因为我肯定可以找到引导程序作为已加载的资源，但是我想知道_Layout文件中的脚本是否给了他们更多的解决时间，并将它们放入实际的内容文件中，只是超时才可以做出任何解决方案？

我似乎无法弄清楚这一点，我们将不胜感激，或者向正确的方向推进。除了似乎没有将专用资源放入_Layout文件的想法外，我似乎找不到任何提及您放置JS的区别的资料。谢谢！

编辑：我开始注意到其他一些项目也不起作用，因此我感到沮丧，并从_Layout.cshmtl文件中删除了所有JS导入，这似乎解决了所有问题。我想不可能像这样拆分JS文件的导入？

Answer 1

假设我理解您使用sections-@RenderSection(...处理“特定于页面”的资源（JS，CSS）。

尽管this doc代表Core，而不是MVC，但这没关系，因为概念相同。

它们是您可以在Layout中设置的“占位符”
您可以从“内容页面”向其中“注入”某些东西
您可以适当地将这些“占位符”放置在<head>，<body>或通常放置脚本的位置-在结束<body>标签之前。

取自上面的链接文档，示例Layout：

<html>
   <head>
     <link rel="stylesheet" type="text/css" href="link_to_bootstrap">
     @RenderSection("PageStyles", required: false)
     ....
   </head>
   <body class="theme">
        <div id="main-body">
            @RenderBody()
        </div>

        <script src="path_to_jquery_or_cdn"></script>

        @RenderSection("Scripts", required: false)

    </body>

在此示例中，您可以根据需要“注入”特定于页面的PageStyles和/或Scripts。

请注意“占位符”的位置-在此示例中，Scripts占位符位于对jQuery库的调用后。这样可以确保将加载其他依赖jQuery的js库。与PageStyles“占位符”相同-位于CSS库（例如Bootstrap）之后。

我怀疑这可能是为什么您的“图表无法加载” -re：相互依赖的脚本的加载顺序的原因。

“内容”页面中的示例：

// because this page has a <form> that needs client side validation
// jquery validation is dependent on jquery library which we've already loaded
@section Scripts {
    <script src="path_to_jquery_validation"></script>
}

// because I want this page to be dark theme
@section PageStyles{
    <style>
       .theme {background-color: #000;}
    </style>

}

以上是一个起点。您可以执行更高级的实现-例如BundleConfig（css / js的分组/捆绑/最小化/版本控制）和sections的嵌套。

高度。

ASP.Net Core JS可以在_Layout中工作，但不能在主体页中工作

1 个答案: