zoukankan      html  css  js  c++  java
  • 《学习笔记》.NET MVC中使用BundleConfig来配置公用JS和CSS文件,节省前端页面代码

    使用背景

      当我们引入前端框架是发现我们页面中每次都要重新引入一遍JS和CSS样式文件,若框架复杂我们会在我们的HTML(CSHTML)页面中引入很多JS和CSS文件,而且每次都是引用相同的文件,那么我们就需要使用BundleConfig来将公用JS和CSS文件提取出来,对相同的文件可以进行统一化管理和快速调用

    使用方法

    1. 右击项目点击  管理NuGet程序包 
    2. 搜索 Microsoft.AspNet.Web.Optimization 点击安装
    3. 在App_Start中创建 BundleConfig 文件
    4. 配置需要提取出来的公用JS和CSS文件代码如下
      /// <summary>
              /// 配置JS和CSS文件
              /// </summary>
              /// <param name="bundles"></param>
              public static void RegisterBundles(BundleCollection bundles)
              {
                  bundles.Add(new ScriptBundle("~/Bundles/js").Include(
                             "~/Scripts/jquery-3.4.1.min.js"));
      
                  bundles.Add(new StyleBundle("~/Bundles/css").Include(
                      "~/fontawesome-free-5.11.2-web/css/brands.min.css",
                      "~/fontawesome-free-5.11.2-web/css/fontawesome.min.css",
                        "~/fontawesome-free-5.11.2-web/css/solid.min.css"
                       ));
              }
    5. 在Global.asax文件中加一句话 BundleConfig.RegisterBundles(BundleTable.Bundles);并且导入using System.Web.Optimization;和using RomanticFlowerHouseUI(项目名称).App_Start;
    6. 在Views目录下面的web.config中加入配置信息加入 <add namespace="System.Web.Optimization" /> 
      <system.web.webPages.razor>
          <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
          <pages pageBaseType="System.Web.Mvc.WebViewPage">
            <namespaces>
              <add namespace="System.Web.Mvc" />
              <add namespace="System.Web.Mvc.Ajax" />
              <add namespace="System.Web.Mvc.Html" />
              <add namespace="System.Web.Routing" />
              <add namespace="RomanticFlowerHouseUI" />
              <add namespace="System.Web.Optimization" />
            </namespaces>
          </pages>
        </system.web.webPages.razor>
    7. 在CSHTML页面顶部或者加载JS/CSS文件地方中加入 @Styles.Render("~/Bundles/css"); @Scripts.Render("~/Bundles/js");
    8. 重新启动项目 发现项目完美运行,并且CSS和JS文件全部加载完成

    注意:页面中的@Styles.Render@Scripts.Render括号中的地址BundleConfig中的StyleBundleScriptBundle中的地址是一一对应的

  • 相关阅读:
    annotation:@Override出现The method of type must override asuperclass解决方案
    把Object对象转换成XML格式的数据
    把用SQL查询的分页对象转化为内容为Object的分页对象
    java实现webservice实例
    把Excel表中的数据导入sql service数据库的语句
    把汉字串转成对应的汉语拼音
    JDBC连接mySQL数据库流程及其原理
    oracle将多列进行合并
    源码分析 | ClickHouse和他的朋友们(13)ReplicatedMergeTree表引擎及同步机制
    源码分析 | ClickHouse和他的朋友们(1)编译、开发、测试
  • 原文地址:https://www.cnblogs.com/ShyFrog/p/12357722.html
Copyright © 2011-2022 走看看