为新实现的主题编辑捆绑配置类答案

【问题标题】：Edit bundle config class for newly implemented theme为新实现的主题编辑捆绑配置类
【发布时间】：2023-03-10 19:54:01
【问题描述】：

当我尝试捆绑我的 CSS 和 javascript 时，我的 javascript 和 CSS 效果似乎不起作用。我通常像在 ASP.NET Web 窗体中一样使用 js 文件和 CSS 文件。

我只在下面的代码中保留了我的 CSS 和 js 文件

<link rel="stylesheet" href="~/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="~/dist/css/adminlte.min.css">

<!-- REQUIRED SCRIPTS -->
<script src="~/plugins/jquery/jquery.min.js"></script>
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/dist/js/adminlte.js"></script>
<script src="~/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="~/dist/js/pages/dashboard3.js"></script>
@RenderSection("scripts", required: false)

这是捆绑配置类

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }

如何捆绑我的 js 文件和 CSS 文件？
另外，我已经引用了 jquery validate js 文件，但验证在我的页面中仍然不起作用。有什么问题？

文件结构见附图。

【问题讨论】：

你记得在 global.asax 的 Application_Start 中注册吗？并从您的布局文件中调用Scripts.Render()？
@DaveBarnett 不，我没有这样做。但我认为我也不必在 Application_Start 文件中注册。
啊，因为你大概在启动时就完成了。
@DaveBarnett 你能告诉我如何解决我的问题吗？
我现在没有时间。但是，如果在我稍后回到我的电脑前没有其他人有的话，我会这样做。

标签： javascript css asp.net-mvc bundling-and-minification

【解决方案1】：

这就是我为您设置的方式。

确保您已安装 nuget 包 Microsoft.AspNet.Web.Optimization。

这是编辑后的 BundleConfig

public static class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/allcss")
            .Include("~/plugins/fontawesome-free/css/all.min.css")
            .Include("~/dist/css/adminlte.min.css"));

        bundles.Add(new ScriptBundle("~/bundles/alljs")
            .Include("~/plugins/jquery/jquery.min.js")
            .Include("~/plugins/bootstrap/js/bootstrap.bundle.min.js")
            .Include("~/dist/js/adminlte.js")
            .Include("~/plugins/jquery-validation/jquery.validate.min.js")
            .Include("~/dist/js/pages/dashboard3.js"));
    }
}

global.asax

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {           
        BundleConfig.RegisterBundles(BundleTable.Bundles);
       //other unrelated code            
    }      
}

_Layout.cshtml 的相关部分

请注意，您不必将渲染调用放在 _layout.cshtml 中，但这是大多数应用程序的标准位置。

@using System.Web.Optimization

<!DOCTYPE html>    
<html>
<head>
       @Styles.Render("~/bundles/allcss")
</head>
<body>

   @Scripts.Render("~/bundles/alljs")      
   @RenderSection("scripts", required: false)
</body>

我相信您还需要将 jquery.validate.unobtrusive.js 放在 jquery.validate.js 之后。确保您在 web.config 中添加了正确的设置

    <appSettings>  
        <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
        <!--other settings-->
    </appSettings>

查看more explanation@

【讨论】：

感谢您的回复。您的解决方案帮助我理解了有关捆绑的概念。非常感谢！！！