Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下:
nuget包管理--程序包管理控制台--Install-Package Microsoft.AspNet.Web.Optimization
1.App_Start添加BundleConfig.cs文件,当然你可以把如下直接写在Globle.aspx的Application_Start中
public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { //1.添加js bundles.Add(new ScriptBundle("~/jsLayout") .Include("~/...js") .Include("~/...js")); //2.添加css bundles.Add(new StyleBundle("~/cssLayout") .Include("~/...css") .Include("~/...css")); //3.启动css,js压缩 BundleTable.EnableOptimizations = true; } }
2.Globle.aspx的Application_Start引用
BundleConfig.RegisterBundles(BundleTable.Bundles);
3.修改View下的web.config中razor引擎配置,添加项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="System.Web.Optimization" /> <add namespace="FMMV.Web" /> </namespaces> </pages> </system.web.webPages.razor>
4.前台引用,我是在_Layout.chtml中引用,如下:
<!DOCTYPE html> <html> <head> <meta content="width=device-width" name="viewport"> <title>@ViewBag.Title</title> @* 样式 *@ @Styles.Render("~/cssLayout"); @RenderSection("headResources", required: false) </head> <body> @RenderBody() @* 脚本*@ @Scripts.Render("~/jsLayout"); @RenderSection("footerResources", required: false) </body> </html>
5.个人页面调用Layout,比如Index.cshtml
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <!--本页面dom--> <div> </div> <!--个人脚本放置位置--> @section footerResources { //只有本页面用到的js文件 <script src="~/xxx.js"></script> //自定义js <script> $(function () { }); </script> }