如何让 ASP.NET Core MVC 视图引用另一个文件中的脚本部分？答案

【问题标题】：How to get an ASP.NET Core MVC view to refer to a script section in another file?如何让 ASP.NET Core MVC 视图引用另一个文件中的脚本部分？
【发布时间】：2022-10-01 00:46:53
【问题描述】：

当我尝试在 ASP.NET Core 6 MVC 中链接我的 .cshtml 文件和我的 JavaScript 引用时，我遇到了一个问题。

到目前为止，我已经进行了一个 webpack 设置，以便它在一个名为 home.sources.cshtml 的单独文件中生成我的 JavaScript 标签：

@section Scripts
{
    <script src=\"/js/npm.popperjs.bundle.js\"></script>
    <script src=\"/js/npm.jquery.bundle.js\"></script>
    <script src=\"/js/npm.bootstrap.bundle.js\"></script>
    <script src=\"/js/home.bundle.js\"></script>
}

如您所见，我的标签被封装在Scripts 部分。所有这些依赖项都适用于我的View/Home/Index.cshtml 页面：

@{
    ViewData[\"Title\"] = \"Home Page\";
}

<div class=\"text-center\">
    <h1 class=\"display-4\">Welcome</h1>
    <p class=\"test\">Learn about <a href=\"https://docs.microsoft.com/aspnet/core\">building Web apps with ASP.NET Core</a>.</p>
</div>

// Insert Script Section here

我想让home.sources.cshtml 的内容在运行时附加到此页面。我不想自己手动添加脚本部分，也不想在以后添加更多 JavaScript 依赖项时修改页面。我添加或删除的任何额外 JavaScript 依赖项的更改将仅反映在 home.sources.cshtml 中。

我该怎么做呢？

我正在研究@Html.Partial()，试图将Script 部分作为部分视图添加到页面中，但这似乎不起作用。

您可以创建一个呈现这些脚本的布局，然后指定 Index 使用该布局。或者将布局全局应用到所有页面，这是最常见的。
这实际上是一个好主意。我设法创建了一个布局模板，该模板引用了我的原始布局，并注入了 JS 标签。然后这个文件用于为每个页面生成一个布局，这样用户只需要下载必要的 JS 包！它有效！谢谢！我会尽快发布我得到的解决方案。
太好了-很高兴听到。这是 MVC 中非常常见的范例

标签： c# webpack asp.net-core-mvc asp.net-core-6.0

【解决方案1】：

如果我了解您在这里所做的事情，那是添加脚本引用的一种非常奇怪的方式。

通常在 MVC 中，您会在布局页面中看到如下所示的几行：

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

这些是指 App_Start -> BundleConfig.cs 中的一组捆绑包

这是将 .js 文件添加到运行时页面的标准方式。

【讨论】：

我还应该补充一点，您可以使用 @Html.Raw(string) 将任何文本从字符串呈现到页面中
实际上我从来不知道这一点，因为我是使用 .NET MVC 的新手。问题是我正在使用 npm 获取我的包，所以我可以使用 ES6 导入语法来引用它们。我不确定这是否可以使用这个系统完成，而且 BundleConfig.cs 要求我插入语句来为每个依赖项生成一个包，这是我只想自动化的东西。因此我选择了 Webpack。如果我将来需要这样做，它还允许我编译 TypeScript 代码。

【解决方案2】：

谢谢Jonespopolis 给了我这种方法。

本质上，我需要做的是制作一个 Layout 模板文件，指定我正在使用我已经在使用的预先存在的 Layout 文件，并声明所有 JS 标记的去向。例如，这是我的模板文件：

@{
    Layout = "_Layout";
}

@RenderBody()

@section Scripts
{
    <% for (index in htmlWebpackPlugin.files.js) { %>
    <script src="<%= htmlWebpackPlugin.files.js[index] %>"></script>
    <% } %>
}

这个模板文件引用了我原来的_Layout.cshtml 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head content here -->
</head>
<body>
    <!-- Header content here -->

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

    <!-- Footer content here -->
</footer>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>

@await RenderSectionAsync("Scripts", required: false) 行将呈现我在模板文件中创建的脚本部分。

从那里，我使用了带有以下配置的 Webpack 的 Htmlwebpackplugin：

plugins: [
        new HtmlWebpackPlugin({
            inject: false,
            template: 'Views/Shared/PageTemplate.cshtml',
            filename: '../../Views/Shared/home.sources.cshtml',
            minify: false
        }),
    ],

运行webpack 命令将为我们提供一个home.source.cshtml 文件，其中包含模板文件中的所有内容，但它显示了home.cshtml 所需的实际JS 引用。剩下的就是让这个文件成为页面的布局，方法是在开头插入：

@{
    Layout = "home.sources";
}

运行该应用程序会给我一个主页，其中下载了所有正确的 JS 标签！现在，如果我更改了我的 JS 依赖项，我不必担心生成标签或将它们插入页面，因为所有这些现在都已自动化，这正是我想要的！

【讨论】：

【解决方案3】：

我真的会做一个局部的，因为它使它看起来更干净。所以我有一个名为 _ScriptsPartial 的部分，我有我需要的所有 js。

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.tiny.cloud/1/srxbhbztd7jetvbg65d7si3gxatiku0ym7l8if3mda35vxxe/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

然后我像这样在我的布局中使用它我做了很多部分

<!DOCTYPE html>
<html lang="en">
<head>
<partial name="_HeadPartial" />
</head>
<body>
    <header>
        <partial name="_NavPartial" />
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            <partial name="_Notification" />
            @RenderBody()
        </main>
    </div>
    <footer >
        <partial name="_FooterPartial" />
    </footer>

   <partial name="_ScriptsPartial" />

    @await RenderSectionAsync("Styles", required: false)
    @await RenderSectionAsync("Scripts", required: false)
   
</body>
</html>

这似乎工作正常:)

【讨论】：