时间戳

首页 > 解决方案 > 为新实现的主题编辑捆绑配置类

javascript - 为新实现的主题编辑捆绑配置类

问题描述

当我尝试捆绑我的 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"));
        }
  1. 如何捆绑我的 js 文件和 CSS 文件？
  2. 另外，我已经引用了 jquery validate js 文件，但验证在我的页面中仍然不起作用。问题是什么？

有关文件结构，请参阅附件图像。

我的项目文件结构

标签： javascriptcssasp.net-mvcbundling-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"));
    }
}

全球.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>
  1. 我相信您还需要将 jquery.validate.unobtrusive.js 放在 jquery.validate.js 之后。确保您在 web.config 中添加了正确的设置
    <appSettings>  
        <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
        <!--other settings-->
    </appSettings>

有关更多说明，请参阅此

推荐阅读