使用 @Styles.Render("~/Content/CSS") 和 @Scripts.Render("~/Content/JS") 加载样式

 

首先  在NuGet  程序中搜索  Optimization  引用 (这边我是使用zh-Hans)

 

在App_Start中创建  BundleConfig.css

using System.Web;
using System.Web.Optimization;

namespace ISU.App_Start
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            //JS,"~/Content/JS" 为  JS存放路径   
            bundles.Add(new ScriptBundle("~/Content/JS").Include(
                "~/Content/JS/jquery.min.js",
                "~/Content/JS/j1.js"));

            //CSS样式,"~/Content/CSS" 为  CSS存放路径   
            bundles.Add(new StyleBundle("~/Content/CSS").Include(
                "~/Content/CSS/c1.css",
                "~/Content/CSS/c2.css"));
        }
    }
}

 

在View文件夹中的 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="System.Web.Optimization" />
        <add namespace="ISU" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

在  Global.asax 中添加 BundleConfig.RegisterBundles(BundleTable.Bundles);

using System.Web.Optimization;
using ISU.App_Start;

namespace ISU
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

页面上就使用  @Styles.Render("~/Content/CSS")  和 @Scripts.Render("~/Content/JS") 调用,效果记得是 按照在BundleConfig.css中的 排列顺序(以防 CSS中  后面排列的样式会覆盖前面的, JS中 需要将 基础  JQ排到前面--否则 后续引用的JQ无效)

@using System.Web.Optimization;
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
        @Styles.Render("~/Content/CSS")
        @Scripts.Render("~/Content/JS")
</head>
<body>
    <div id="ds"> 
        666
    </div>
</body>
</html>

 

感谢:http://www.cnblogs.com/insus/p/3358703.html

以及  http://www.cnblogs.com/xcsn/p/4237803.html

 

转载于:https://www.cnblogs.com/dzw159/p/7258315.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值