如何避免在 MVC 视图中重复相同的脚本和样式部分答案

【问题标题】：How to avoid repeating same scripts and styles sections in MVC views如何避免在 MVC 视图中重复相同的脚本和样式部分
【发布时间】：2018-05-15 04:56:02
【问题描述】：

我有一个 MVC 5 项目 (.NET Framework)，其中一组视图具有相同的一组 @section styles 和 @section scripts 块。

@section styles {
    <link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/buttons.dataTables.css" rel="stylesheet" />
}
@section scripts {
    <script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
    <script src="~/Scripts/DataTables/dataTables.buttons.js"></script>
    <script src="~/Scripts/DataTables/buttons.print.js"></script>
    <script src="~/Scripts/DataTables/buttons.html5.js"></script>
    <script src="~/Scripts/jszip.js"></script>
    <script>
        $(() => {
            // source js file defined in BundleConfig.cs
            TableController.init();
        });
    </script>
}

正如TableController.init() jQuery 函数位于单个位置并且可以在我选择的任何视图中调用一样，有没有一种方法可以让这组<link> 和<script> 元素只有一个定义可以在我选择的任何视图中调用它吗？我没有把它放在_Layout 文件中的原因是我可能不希望它出现在所有视图中——只是大多数视图。

我不知道这种技术叫什么，甚至不知道它在 MVC 中是否可行。我只是认为这将是避免重复自己的有用方法。此外，如果我想进行任何调整，我只会在一个地方进行更改，而不是在多个视图中进行更改。

有没有我可以使用的技术来实现这个目标？

【问题讨论】：

您可以在不同的 _Layout 中定义它们，并且您可以指定视图将使用哪种布局。你也可以nest layouts。
创建捆绑包。
@StephenMuecke -- 这是我需要的名词。有很多答案需要处理，但这可能是诀窍。 stackoverflow.com/questions/13660868/…

标签： razor asp.net-mvc-5

【解决方案1】：

您可以为您想要的任何东西创建捆绑包，您可以为一个区域或单个页面创建一个捆绑包。

//scripts
    bundles.Add(new ScriptBundle("~/bundles/Custom").Include(
                    "~/Scripts/Custom.js"));
    bundles.Add(new ScriptBundle("~/bundles/Custom2").Include(
                    "~/Scripts/Custom2.js"));
//styles
    bundles.Add(new StyleBundle("~/Content/Custom").Include(
                           "~/Content/Custom.css"));
    bundles.Add(new StyleBundle("~/Content/Custom2").Include(
                           "~/Content/Custom2.css"));

现在您可以分离这些脚本和样式，并仅将它们添加到您需要的页面上。

另外我认为最好在你的 _Layout.cshtml 的 head 标签中定义 2 个部分。

<head>
    //other scripts and styles here
    @RenderSection("scriptslib", required: false)
    @RenderSection("csslib", required: false)
</head>

所以现在在您的视图（Cabinet.cshtml 和 AdminPanel.cshtml）中，您可以将您的库放置在他们认为是这样的位置：

@section scriptslib{
    @Scripts.Render("~/bundles/Custom")
    @Scripts.Render("~/bundles/Custom2")
    }

通过这样做，您可以为部分或页面构建完整的捆绑包，以按照您的意愿使用。

编辑：谢谢阿德里安

** 您可以使用通配符将捆绑包添加为未来脚本的文件夹，这样您就不必重新编译，也可以在每个文件夹中放置一个 custom.js 和 custom.css 以供将来可能要添加的编辑或覆盖。

添加自定义文件夹：

脚本
- 自定义
  - YourFiles.js
  - YourFiles.min.js
内容
- 自定义
  - YourFiles.css
  - YourFiles.min.css

自定义捆绑包：

    bundles.Add(new ScriptBundle("~/bundles/Custom").Include(
                    "~/Scripts/Custom/*.js"));
    bundles.Add(new ScriptBundle("~/bundles/Custom2").Include(
                    "~/Scripts/Custom/*.*.js"));

    bundles.Add(new StyleBundle("~/Content/Custom").Include(
               "~/Content/Custom/*.css"));
    bundles.Add(new StyleBundle("~/Content/Custom2").Include(
               "~/Content/Custom/*.*.css"));

现在，您放置在这些文件夹中的任何内容都将通过 IIS 应用重新启动进行处理，我通常会在我的应用程序中添加一个功能，以便能够执行应用重新启动。

希望对你有帮助

【讨论】：

IIS App Restart 在这里完成了什么？
除非 IIS 被重置，否则应用程序不会加载您添加的文件。为了让文件被注意到，应用程序必须重新启动以加载文件夹中的所有文件，
谢谢你，这澄清了！ @pool 亲

【解决方案2】：

试试泳池专业人士的想法，这是一个很好的答案。对我来说，我只是更喜欢使用部分视图来引用它。

为什么？

修改 c# 文件并添加另一个 CSS 或 JS 文件后，您需要再次编译代码。如果您使用部分视图，则无需再次编译项目，只需更改视图并上传即可。

【讨论】：

非常好，我之前就想到了这一点，并没有把它放在我的答案中，你可以为你的部分使用文件夹和通配符，所以如果你需要添加你只需将它放在文件夹，通常我总是添加一个空白的 custom.js 或 custom.css 文件，以便以后添加东西。唯一的问题是重新启动应用程序以添加文件。我通常将此添加到我的应用程序中以重新启动 IIS 池。

【解决方案3】：

不漂亮：您可以使用部分视图并在您想要链接的视图中使用它。
将您的局部视图放在您的共享文件夹中。
然后在你的视图中调用它@await Html.PartialAsync("_SomeNamePartial")

更漂亮：将所有css放在一个文件中，将所有javascript放在一个文件中。

最好的方式，它应该是：你这样做的方式，@section 是有原因的。

【讨论】：