编辑新配置的主题的捆绑包配置类

2024-05-07 • 问答

当我尝试捆绑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文件，但验证仍无法在我的页面中进行。有什么问题吗？

请参见附件中的文件结构图像。

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

确保已安装了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的相关部分

请注意，您不必将Render调用放在_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

编辑新配置的主题的捆绑包配置类

sh_luoqiang 回答：编辑新配置的主题的捆绑包配置类

大家都在问