软件开发平台Styles和Scripts打包配置

软件开发平台中Styles和Scripts打包配置Render函数是什么,为什么有这个?

如下图我们的模板页中如下写法,根本就不像传统的style和script写法,没错这就是MVC4新引入的样式和脚本加载写法。

软件开发平台

在渲染后的网页源码如下:

软件开发平台

    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/jqueryui")
    @Scripts.Render("~/Scripts/modernizr")
    @Scripts.Render("~/Scripts/jquery")
    @Scripts.Render("~/Scripts/bootstrap")
    @Scripts.Render("~/Scripts/common.js")

在后台配置文件如下:

    public class BundleConfig
    {
        // 有关绑定的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            // scripts bundle
            bundles.Add(new ScriptBundle("~/Scripts/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/Scripts/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/Scripts/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            // 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
            // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
            bundles.Add(new ScriptBundle("~/Scripts/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/Scripts/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new ScriptBundle("~/Scripts/knockout").Include(
                        "~/Scripts/knockout-{version}.js"));

            bundles.Add(new ScriptBundle("~/Scripts/jquerymask").Include(
                        "~/Scripts/jquery.inputmask/jquery.inputmask-3.0.55.js",
                        "~/Scripts/jquery.inputmask/jquery.inputmask.numeric.extensions-3.0.55.js"));

            bundles.Add(new ScriptBundle("~/Scripts/jqueryform").Include(
                        "~/Scripts/jquery.form.min.js"));

            bundles.Add(new ScriptBundle("~/Scripts/editor").Include(
                "~/content/kindeditor/kindeditor-all-min.js",
                "~/content/kindeditor/lang/zh_CN.js",
                "~/Scripts/jquery.editor.js"));

            // styles bundle
            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/glyphicons.css",
                      "~/Content/site.css",
                      "~/Content/bsframework-app.css"));

            bundles.Add(new StyleBundle("~/Content/jqueryui").Include("~/Content/themes/base/jquery-ui.css"));
            // 将 EnableOptimizations 设为 false 以进行调试。有关详细信息,
            // 请访问 http://go.microsoft.com/fwlink/?LinkId=301862
#if DEBUG
            BundleTable.EnableOptimizations = false;
#else
            BundleTable.EnableOptimizations = true;
#endif
        }
    }
@Styles.Render
软件开发平台页面上可以用@Styles.Render("~/Content/css") 来加载css
首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件
BundleConfig就是一个微软新加的一个打包的配置类,用来Add 各种Bundle
bundles.Add(new StyleBundle("~/Content").Include("~/Content/common.css")); //这样是错误的  new StyleBundle("~/Content")  初始化的虚拟目录名称不能跟 真正的目录相同  也就是 后面的Include("~/Content/common.css")); 这里要把new StyleBundle("~/Content")的"~/Content"  改成别的名称。

Scripts.Render 方法
软件开发平台呈现以下路径的脚本标记,包含绑定的一个或多个脚本标记的 HTML 字符串。
1、在视图文件中使用Scripts.Render()输出脚本包,Styles.Render()输出样式包
2、Script文件引用:@Scripts.Render(virtualPath[,virtualPath1][,virtualPath2][,...])
3、CSS文件引用:  @Styles.Render(virtualPath[,virtualPath1][,virtualPath2][,...])

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » 软件开发平台Styles和Scripts打包配置
本文标题:软件开发平台Styles和Scripts打包配置
本文地址:http://www.hocode.com/OrgTec/UI/0024.html

相关文章: HtmlHelper扩展方法视图页加载问题

电话
电话 18718672256

扫一扫
二维码