zoukankan      html  css  js  c++  java
  • C#asp.netAdding Bundling and Minification to Web Forms

    Adding Bundling and Minification to Web Forms

    My   B/M tutorial provides a good introduction to benefits of Bundling and Minification. You should read it to become familiar with the bundling and minification. This blog will focus on using B/M with Web Forms, my B/M tutorial focused on ASP.NET MVC.

    Create a new ASP.NET Web Forms application which targets the .Net 4.5 framework.

     

    Run the application launch the IE F-12 developer tools. Select the Script tab, then use the assets button to view the JavaScript files.

     

    You can select one of the JavaScript files and view it in the left pane. Note the full (non-minimized version) of the files are used.

     

    Creating the jQuery Bundles

    Add jQuery, jQuery.UI and jQuery validation to the  BundleConfig class in the App_Start folder. The following code shows the complete class:

    <span style="color:#333333"><span style="color:#333333"><span style="color:blue">using </span><span style="color:black">System.Web.Optimization;
    
    </span><span style="color:blue">public class </span><span style="color:#2b91af">BundleConfig
    </span><span style="color:black">{
        </span><span style="color:blue">public static void </span><span style="color:black">RegisterBundles(</span><span style="color:#2b91af">BundleCollection </span><span style="color:black">bundles)
        {
            bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/jquery"</span><span style="color:black">).Include(
                        </span><span style="color:#a31515">"~/Scripts/jquery-{version}.js"</span><span style="color:black">));
    
            bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/jqueryui"</span><span style="color:black">).Include(
                        </span><span style="color:#a31515">"~/Scripts/jquery-ui-{version}.js"</span><span style="color:black">));
    
            bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/jqueryval"</span><span style="color:black">).Include(
                        </span><span style="color:#a31515">"~/Scripts/jquery.unobtrusive*"</span><span style="color:black">,
                        </span><span style="color:#a31515">"~/Scripts/jquery.validate*"</span><span style="color:black">));
    
            bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/WebFormsJs"</span><span style="color:black">).Include(
                  </span><span style="color:#a31515">"~/Scripts/WebForms/WebForms.js"</span><span style="color:black">,
                  </span><span style="color:#a31515">"~/Scripts/WebForms/WebUIValidation.js"</span><span style="color:black">,
                  </span><span style="color:#a31515">"~/Scripts/WebForms/MenuStandards.js"</span><span style="color:black">,
                  </span><span style="color:#a31515">"~/Scripts/WebForms/Focus.js"</span><span style="color:black">,
                  </span><span style="color:#a31515">"~/Scripts/WebForms/GridView.js"</span><span style="color:black">,
                  </span><span style="color:#a31515">"~/Scripts/WebForms/DetailsView.js"</span><span style="color:black">,
                  </span><span style="color:#a31515">"~/Scripts/WebForms/TreeView.js"</span><span style="color:black">,
                  </span><span style="color:#a31515">"~/Scripts/WebForms/WebParts.js"</span><span style="color:black">));
    
            bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/MsAjaxJs"</span><span style="color:black">).Include(
                </span><span style="color:#a31515">"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js"</span><span style="color:black">,
                </span><span style="color:#a31515">"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js"</span><span style="color:black">,
                </span><span style="color:#a31515">"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js"</span><span style="color:black">,
                </span><span style="color:#a31515">"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"</span><span style="color:black">));
    
            bundles.Add(</span><span style="color:blue">new </span><span style="color:#2b91af">ScriptBundle</span><span style="color:black">(</span><span style="color:#a31515">"~/bundles/modernizr"</span><span style="color:black">).Include(
                </span><span style="color:#a31515">"~/Scripts/modernizr-*"</span><span style="color:black">));
        }
    }
    </span></span></span>

    Register the Bundles

    The templates create the code hook up the bundle registration in the Application_Start method in the Global.asax file.

    <span style="color:#333333"><span style="color:#333333"><span style="color:blue">void </span><span style="color:black">Application_Start(</span><span style="color:blue">object </span><span style="color:black">sender, </span><span style="color:#2b91af">EventArgs </span><span style="color:black">e)
    {
        </span><span style="color:#2b91af">BundleConfig</span><span style="color:black">.RegisterBundles(</span><span style="color:#2b91af">BundleTable</span><span style="color:black">.Bundles);
        </span><span style="color:#2b91af">AuthConfig</span><span style="color:black">.RegisterOpenAuth();
    }</span></span></span>

    Reference the Bundles

     

    <span style="color:#333333"><span style="color:#333333">Add the jQuery bundles to the <span style="color:blue"><</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">PlaceHolder > </span>markup as shown in the following code:</span></span>
    <span style="color:#333333"><span style="color:#333333">    <span style="color:blue"><</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">PlaceHolder </span><span style="color:red">runat</span><span style="color:blue">="server">        
             </span><span style="color:black"><%</span><span style="color:blue">: </span><span style="color:black">Scripts.Render(</span><span style="color:#a31515">"~/bundles/modernizr"</span><span style="color:black">) </span><span style="color:black">%>
    </span>         <span style="color:black"><%</span><span style="color:blue">: </span><span style="color:black">Scripts.Render(</span><span style="color:#a31515">"~/bundles/jquery"</span><span style="color:black">) </span><span style="color:black">%>
    </span>         <span style="color:black"><%</span><span style="color:blue">: </span><span style="color:black">Scripts.Render(</span><span style="color:#a31515">"~/bundles/jqueryui"</span><span style="color:black">) </span><span style="color:black">%>
    </span>    <span style="color:blue"></</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">PlaceHolder</span><span style="color:blue">></span></span></span>
    <span style="color:#333333"><span style="color:#333333">Comment out the jQuery script references in the ScriptManager tag as shown below:</span></span>
    <span style="color:#333333"><span style="color:#333333"><span style="color:blue"><</span><span style="color:maroon">body</span><span style="color:blue">>
        <</span><span style="color:maroon">form </span><span style="color:red">runat</span><span style="color:blue">="server">
        <</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">ScriptManager </span><span style="color:red">runat</span><span style="color:blue">="server">
            <</span><span style="color:maroon">Scripts</span><span style="color:blue">>
                </span><span style="color:black"><%</span><span style="color:#006400">--        
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="jquery.ui.combined" />
                --</span><span style="color:black">%>
    </span>        <span style="color:blue"></</span><span style="color:maroon">Scripts</span><span style="color:blue">>
        </</span><span style="color:maroon">asp</span><span style="color:blue">:</span><span style="color:maroon">ScriptManager</span><span style="color:blue">>
        <</span><span style="color:maroon">header</span><span style="color:blue">></span></span></span>

     

     

     

    CSS Bundles

    Examine the Bundle.config file, which contains the markup to create CSS style bundles.

    <span style="color:#333333"><span style="color:#333333"><span style="color:blue"><?</span><span style="color:#a31515">xml </span><span style="color:red">version</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">1.0</span><span style="color:black">" </span><span style="color:red">encoding</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">utf-8</span><span style="color:black">" </span><span style="color:blue">?>
    <</span><span style="color:#a31515">bundles </span><span style="color:red">version</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">1.0</span><span style="color:black">"</span><span style="color:blue">>
      <</span><span style="color:#a31515">styleBundle </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/css</span><span style="color:black">"</span><span style="color:blue">>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/Site.css</span><span style="color:black">" </span><span style="color:blue">/>
      </</span><span style="color:#a31515">styleBundle</span><span style="color:blue">>
      <</span><span style="color:#a31515">styleBundle </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/css</span><span style="color:black">"</span><span style="color:blue">>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.core.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.resizable.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.selectable.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.accordion.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.autocomplete.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.button.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.dialog.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.slider.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.tabs.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.datepicker.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.progressbar.css</span><span style="color:black">" </span><span style="color:blue">/>
        <</span><span style="color:#a31515">include </span><span style="color:red">path</span><span style="color:blue">=</span><span style="color:black">"</span><span style="color:blue">~/Content/themes/base/jquery.ui.theme.css</span><span style="color:black">" </span><span style="color:blue">/>
      </</span><span style="color:#a31515">styleBundle</span><span style="color:blue">>
    </</span><span style="color:#a31515">bundles</span><span style="color:blue">>
    </span></span></span>

     

    You can add your own style bundles to the Bundle.config file.

    The following markup shows the CSS bundles and JavaScript bundles referenced. Note that you can multiple bundles in one call to the Render method.

    <span style="color:#333333"><span style="color:#333333"><span style="color:black"><%</span><span style="color:blue">: </span><span style="color:#2b91af">Styles</span><span style="color:black">.Render(</span><span style="color:#a31515">"~/Content/themes/base/css"</span><span style="color:black">, 
                        </span><span style="color:#a31515">"~/Content/css"</span><span style="color:black">) </span><span style="color:black">%>
    <%</span><span style="color:blue">: </span><span style="color:#2b91af">Scripts</span><span style="color:black">.Render(</span><span style="color:#a31515">"~/bundles/modernizr"</span><span style="color:black">) </span><span style="color:black">%>
    <%</span><span style="color:blue">: </span><span style="color:#2b91af">Scripts</span><span style="color:black">.Render(</span><span style="color:#a31515">"~/bundles/jquery"</span><span style="color:black">,
                        </span><span style="color:#a31515">"~/bundles/jqueryui"</span><span style="color:black">) </span><span style="color:black">%></span></span></span>
  • 相关阅读:
    ComponentOne Studio Enterprise ———C1控件barchat 的统计图格式 设置
    OpenStack开发学习笔记04————
    短信推送API接口实现---------阿里大于
    OpenStack开发学习笔记03————创建一个openstack
    OpenStack开发学习笔记02————环境的安装和部署
    OpenStack开发学习笔记01
    MVC模式在Java Web应用程序中的实例分析
    javascript的setTimeout以及setInterval休眠问题。
    BFC 神奇背后的原理
    jquery checkBox的问题
  • 原文地址:https://www.cnblogs.com/grj001/p/12223907.html
Copyright © 2011-2022 走看看