在ASP.NET MVC项目中,可以在视图中利用Scripts.Render、Styles.Render统一加载js、css文件,需要利用BundleConfig类来Add 各种Bundle,例如:bundles.Add(new StyleBundle("~/Content1").Include("~/Content/common。css", "~/Content/content。css"))

一、配置BundleConfig.cs文件

1、首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件

2、BundleConfig就是一个微软新加的 一个打包的配置类

3、BundleConfig用来Add 各种Bundle

4、BundleConfig配置信息如图:

public class BundleConfig {
public static void RegisterBundles(BundleCollection bundles) {
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new StyleBundle("~/Content1/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content1/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
 5、配置信息说明

(1)、上面的"~/Content1" 是虚拟路径,可以随便起名,用于标记打包哪个文件夹下面的.css 文件,后面的Include方法接受的是一个string[] 根据传入的路径去对css文件进行打包。

(2)、使用Bundle来引用css有个好处 就是可以把多个css文件在一起请求,浏览器只发一次请求 不过必须在Global.asax里面 加一段代码 BundleTable.EnableOptimizations = true 来启用优化。

(3)、在启用优化后,当页面下次再次发送请求的时候 BundleConfig里面没有更改的话 浏览器会从缓存中去取


二、使用Scripts.Render、Styles.Render引用BundleConfig中的配置

1、在视图文件中使用Scripts.Render()输出脚本包,Styles.Render()输出样式包

2、Script文件引用:@Scripts.Render(virtualPath[,virtualPath1][,virtualPath2][,...])

3、CSS文件引用:  @Styles.Render(virtualPath[,virtualPath1][,virtualPath2][,...])

4、实例



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content1/css")
</head>
<body>
@RenderBody() @Scripts.Render("~/bundles/jqueryui")
</body>
</html>

 
												

MVC 中Scripts.Render、Styles.Render的更多相关文章

  1. ASP.NET MVC 4 (十一) Bundles和显示模式--asp.net mvc中 @Scripts.Render("~/bundles/jquery")是什么意思? 在布局文件中使用Scripts.Render()输出脚本包,Styles.Render()输出风格包:

    ASP.NET MVC 4 (十一) Bundles和显示模式 ASP.NET MVC 4 引入的js打包压缩功能.打包压缩jquery目录下的文件,在布局文件中使用Scripts.Render()输 ...

  2. mvc中Scripts.Render、Styles.Render

    一.配置BundleConfig.cs文件 1.首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件 2.BundleConfig就是一个微软新加的 一个打 ...

  3. mvc中Scripts.Render的用法

    第一次接触新的东西,都会很陌生,但是时间久了就熟悉了变简单了. 视图文件中使用Scripts.Render()输出脚本包,Styles.Render()输出样式包 上面两张图是我所做项目里的,放上面会 ...

  4. 在_Layout模版中使用@Styles.Render()没有效果

    刚才有测试一个功能,就是在_Layout母版中使用了@Styles.Render()时行Render样式文件,所有在此母版下的视图均没有应用到样式,没有效果.是什么原因? 经查证资料,原来Insus. ...

  5. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  6. [ASP.NET MVC]@Scripts.Render、@Styles.Render的使用

    一.配置BundleConfig.cs文件 1.首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件 2.BundleConfig就是一个微软新加的 一个打 ...

  7. c# MVC中 @Styles.Render索引超出下标

    @Styles.Render( "~/Content/bootstrap/css", "~/Content/mycss") 提示索引超出下标 后来发现市boot ...

  8. 关于MVC4.0中@Styles.Render用法与详解

    本文分享于http://keleyi.com/a/bjac/q74dybjc.htm文章,感觉写的蛮好所以就拿过来做笔记了,希望对大家有帮助 最近公司的新项目用了MVC 4.0,接下来一步步把 工作中 ...

  9. 【MVC】Scripts.Render的用法

    一.配置BundleConfig.cs文件 1.首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件2.BundleConfig就是一个微软新加的 一个打包 ...

随机推荐

  1. Lab 6-4

    In this lab, we'll analyze the malware found in the file Lab06-04.exe. Questions and Short Answers W ...

  2. 虚拟环境之virtualenvwrapper

    原来的virtualenv工具使用特别麻烦,主要体现在以下几点 1 创建虚拟环境的命令太长,太难记 2 管理特别麻烦 3 进入虚拟环境需要找到这个虚拟环境的存放目录才行,如果没有统一的存放目录,很难找 ...

  3. Android 回调函数的理解,实用简单(回调函数其实是为传递数据)

    作者: 夏至,欢饮转载,也请保留这段申明 http://blog.csdn.net/u011418943/article/details/60139910 一般我们在不同的应用传递数据,比较方便的是用 ...

  4. 『Python CoolBook』C扩展库_其一_用法讲解

    不依靠其他工具,直接使用Python的扩展API来编写一些简单的C扩展模块. 本篇参考PythonCookbook第15节和Python核心编程完成,值得注意的是,Python2.X和Python3. ...

  5. Android测试(三)——APK文件反编译

    APK文件反编译: 在进行反编译操作前,先简单介绍下smali文件: smali是一种文件格式,语法和Jasmine的语言类似,这些smali文件包含开发应用程序时编写的java类的代码. 工具:ja ...

  6. event对象的clientX,offsetX,screenX,pageX

    chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...

  7. Java线程池ThreadPoolExecutor&&Executors

    一.先看看传统的开启线程. new Thread(new Runnable() { @Override public void run() { } }).start(); 缺点: 1.每次new Th ...

  8. python非技术性问题整理

    针对软件安装包,安装时出现下类问题, 解决方法时, 以管理员身份运行命令行, 可以看到,包 正常安装. 在使用bs4,分析html或者xml文档时, 代码无法识别lxml 指令, 可能是python ...

  9. guava-retrying 源码解析(导入项目)

    1.从github上下载guava-retry源码 git clone git://github.com/rholder/guava-retrying.git 2.导入idea,使用gradle记得勾 ...

  10. java和js中JSONObject,JSONArray,Map,String之间转换

    --------------------------------------------------Java中--------------------------------------------- ...