在MVC5的视图中使用@Scritps.Render(),@Styles.Render() 分别可以加载样式和脚本。捆绑的和实际的路径都可以。
并且可以利用 编程的方式灵活引用css文件和脚本文件。
一、Layout页面头部会使用
@Styles.Render("~/Content/css") 来加载css文件，非实际文件路径。 相当于 <link href="css.css" rel="stylesheet" type="text/css" />
@Scripts.Render("~/bundles/modernizr") 来加载modernizr脚本，非实际文件路径。<script src="modernizr.js" type="text/javascript"> </script>
二、Layout布局页面底部会使用。把一些脚本 文件放在页面底部 提高页面加载速度 。
@Scripts.Render("~/bundles/jquery") 来加载捆绑的脚本，非实际文件路径。 先引入jquery 脚本，再引入bootstrap脚本。因为boostrap要依赖于jquery.
@Scripts.Render("~/bundles/bootstrap") 来加载捆绑的脚本。非实际文件路径。
@RenderSection("scripts", required: false)来加载捆绑的脚本。非实际文件路径。
如果是新建和编辑页面，页面的底部会使用：
@Scripts.Render("~/bundles/jqueryval",）非实际文件路径。 提供客户端的jquery验证。
如果使用百度UEditor，在新建页面和编辑页面
@section Scripts {
@Scripts.Render("~/bundles/jqueryval","~/Content/ueditor/ueditor.config.js","~/Content/ueditor/ueditor.all.js") 加载实际的脚本文件路径。并且可以一个@Scripts.Render可以加载多个脚本。
<script type="text/javascript">
var editor = new baidu.editor.ui.Editor({
UEDITOR_HOME_URL:'/Content/ueditor/',//配置编辑器路径
iframeCssUrl:'/Content/ueditor/themes/iframe.css',//样式路径
// initialContent:'欢迎使用ueditor',//初始化编辑器内容
autoHeightEnabled:true,//高度自动增长
initialFrameHeight:400
});
editor.render('Content');
</script>
APP_Start中有一个配置捆绑的文件BundleConfig.cs,
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( //new ScriptBundle().include() 将实际的文件路径转换为虚拟的绑定路径。
"~/Scripts/jquery-{version}.js")); //引入占位符， 可以隔离jqeury版本的变更。
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*")); 可在使用通配符 *，可以隔离jqeury版本的变更
bundles.Add(new StyleBundle("~/Content/css").Include( //如果在同一个捆绑中有多个CSS文件，最后面的一项优先级最高。
"~/Content/bootstrap.css",
"~/Content/bootstrap.custom.css", //定制的bootstap文件，可以覆盖掉原生bootstrap定义的一些class的样式。这种是非侵入式的方式。
"~/Content/site.css")); //网站自定义的css，优先级最高。
比如：在新建一个样式表文件bootstrap.custom.css，新建一些class属性，
.badge-danger {
background-color:#d43f3a;
}
.badge-warning{
background-color:#d58512;
}
.badge-success{
background-color:#398439;
}
.badge-info{
background-color:#269abc;
}
.badge-inverse{
background-color:#333333;
}
<a href="@Url.Action("List", new { categoryID = category.CategoryID})" class="list-group-item @categoryCss">@category.CategoryName <span class="badge badge-info">@category.ArticleCount</span></a>
原来徽章badge的背景色为灰色，如果引用了badge-info,徽章的背景色就变成了蓝色了。
如果需要多个绑定，还可使用遍历的方式：