mvc中Scripts.Render、Styles.Render

一、配置BundleConfig.cs文件

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

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

3、BundleConfig用来Add 各种Bundle

4、BundleConfig配置信息如图：

C# 代码复制

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>

时间： 2024-12-28 09:02:42

mvc中Scripts.Render、Styles.Render的相关文章

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

刚才有测试一个功能,就是在_Layout母版中使用了@Styles.Render()时行Render样式文件,所有在此母版下的视图均没有应用到样式,没有效果.是什么原因? 经查证资料,原来Insus.NET在Global.asax文档中,配置了BundleTable.EnableOptimizations = true; 当设为true之后,脚本/风格渲染方法优化为关闭. 我们需要设置为:BundleTable.EnableOptimizations = false; 一切正常!

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

打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS文件案中空白.批注及修改JavaScript内部函数.变量名称的压缩手法,能有效缩小文件案体积,提高传输效率,提供使用者更流畅的浏览体验. 在ASP.NET MVC 4中可以使用BundleTable捆绑多个css文件和js文件,以提高网络加载速度和页面解析速度.更为重要的是通过捆绑可以解决IE浏览

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

@Styles.Render( "~/Content/bootstrap/css", "~/Content/mycss") 提示索引超出下标后来发现市bootstrap.css文件的问题,当升级bootstrap3.3版本后,就出现了这个问题. 如果将bootstrap文件单独出来,使用html中link方式引用就可以. 后来在网上找到解决方案: WebGrease引起的,需要nuget更新一下WebGrease. 我将WebGrease更新到1.6版本就解决了

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

本文分享于http://keleyi.com/a/bjac/q74dybjc.htm文章,感觉写的蛮好所以就拿过来做笔记了,希望对大家有帮助最近公司的新项目用了MVC 4.0,接下来一步步把工作中遇到的问题总结起来.. [email protected] 在页面上可以用@Styles.Render("~/Content/css") 来加载css 首先要在App_Start 里面BundleConfig.cs 文件里面添加要包含的css文件 BundleConfig就是一个微软新

【MVC】Scripts.Render的用法

一.配置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) { bund

ASP.NET MVC中使用Session来保持表单的状态

本篇实践在ASP.NET MVC 4下使用Session来保持表单的状态. 本篇的源码在这里: https://github.com/darrenji/KeepFormStateUsingSession 如上,输入俱乐部名称,点击"添加球员",输入球员名称.我们希望,点击"到别的地方转转"跳转到另外一个视图页,当再次返回的时候能保持表单的状态. 点击"到别的地方转转"跳转到另外一个视图页如下: 再次返回,表单的状态被保持了: 点击"提交

解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题

ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径.这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量

.net MVC中Jquery实现AJAX详解

声明这是我一边学,一边写的: 好处是:我从新手的角度出发,谈自己的理解,每一步的操作也都是按照新手入门来做,有截图. 坏处是:部分地方可能说的不到位或错误.不过作为新手,我觉得能先帮你理解着实现功能貌似更重要. 开始: 0 前言: Ajax本质是一个web数据请求的手段,既然是请求,也就是有请,有求.也就是客户端(html页面)向服务器发送请求获得数据的手段. 世间万物万变不离其宗,抓住事物本质就能让我们拨云见日: 一.在服务器端写好方法二.在客户端写好请求当然在这之前我们还需要有个web

在ASP.NET MVC中使用Boostrap实现产品的展示、查询、排序、分页

在产品展示中,通常涉及产品的展示方式.查询.排序.分页,本篇就在ASP.NET MVC下,使用Boostrap来实现. 源码放在了GitHub: https://github.com/darrenji/ProductsSearchSortPage 先上效果图: 最上面是搜索和排序,每次点击搜索条件.排序,或者删除搜索条件都会触发异步加载. 中间部分为产品展示,提供了列表和格子这2种显示方式. 最下方为分页. 能实现的功能包括: ○ 点击某一个搜索条件,该搜索条件被选中,选中项以标签的形式显示到"