Question

我有一个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中也是如此。我只是觉得这是避免重复自己的有用方法。此外，如果我想进行任何调整，我只会在一个地方进行更改而不是多个视图。

我是否可以使用一种技术来实现这一目标？

Answer 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"));

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

另外，我认为在头标记的_Layout.cshtml中定义2个部分是件好事。

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

所以现在在你的视图（Cabinet.cshtml和AdminPanel.cshtml）中，你可以将你的lib放在他们认为是这样的地方：

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

通过这样做，它允许您为部分或页面构建完整的包以使用您希望的方式。

**

编辑：谢谢阿德里安

** 您可以使用通配符将bundle作为文件夹添加到将来的脚本中，这样您就不必重新编译，也可以在每个文件夹中放置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应用程序重新启动进行处理，我通常会向我的应用程序添加一个函数，以便能够执行应用程序重新启动。

希望这有帮助

Answer 2

尝试使用pool pro的想法，这是一个很好的答案。对我来说，我只是喜欢使用部分视图来引用它。

为什么？

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

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

2 个答案: