综合开发

.NET MVC中使用BundleConfig来配置公用JS和CSS文件,节省前端页面代码

微信扫一扫,分享到朋友圈

.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”); 即可

注意
:页面中的
@Styles.Render

@Scripts.Render
括号

中的地址
BundleConfig
中的 StyleBundle
ScriptBundle
中的地址是一一对应的

JS制造的垃圾桶

上一篇

苏庆灿:华厦眼科全体员工要以贺常恺医生为榜样践行责任与关怀

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

.NET MVC中使用BundleConfig来配置公用JS和CSS文件,节省前端页面代码

长按储存图像,分享给朋友