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>
  • 相关阅读:
    app接口测试
    鼠标右键添加"在此处打开命令窗口"
    解决Maven的Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart
    Linux机器之间复制文件和目录方式&Linux的scp命令详解
    Java动态代理总结
    解决当FORM的ENCTYPE="multipart/form-data" 时request.getParameter()获取不到值的方法
    Elasticsearch使用filter进行匹配关系and,or,not,range查询
    阿里Java开发规范&谷歌Java开发规范&华为Java开发规范&Tab键和空格比较&Eclipse的Tab键设置 总结
    Kafka连接SparkStreaming的两种方式
    IntelliJ IDEA导入多个eclipse项目到同一个workspace下
  • 原文地址:https://www.cnblogs.com/grj001/p/12223907.html
Copyright © 2011-2022 走看看