ASP.NET Web Forms 4.5的新特性(一):强类型数据控件和Bundling

[来源] 达内    [编辑] 达内   [时间]2012-09-18

在微软线上发布了Visual Studio 2012后,我们也能清晰地看到ASP.NET Web Forms 4.5中的一些新特性了

在微软线上发布了Visual Studio 2012后,我们也能清晰地看到ASP.NET Web Forms 4.5中的一些新特性了。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">今天先看两个新特性:强类型数据控件和Bundling。

< h2 style="margin-top: 10px; font-size: 16px; padding: 10px 5px 8px; background-color: gray; color: white; font-weight: bold; font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">强类型数据控件 < p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 在出现强类型数据控件前,我们绑定数据控件时,前台一般使用Eval或者DataBinder.Eval(Container.DataItem,"FieldName")的形式。

< div style="background-color: rgb(245, 245, 245); font-family: 'Courier New'; font-size: 12px; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0px; max-width: 900px; width: auto; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; " class="cnblogs_code">
1 <%# DataBinder.Eval(Container.DataItem," FieldName") %>
2 <%# Eval(" FieldName") %>
< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 而在ASP.NET Web Forms 4.5中出现了强类型数据控件,可以后台绑定数据的控件多了个属性:ItemType

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">当指定了控件的ItemType后就可以在前台使用强类型绑定数据了。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">指定ItemType。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">使用强类型绑定数据。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">届时园子里估计又要掀起一番争论ORM的风潮 :)

< h2 style="margin-top: 10px; font-size: 16px; padding: 10px 5px 8px; background-color: gray; color: white; font-weight: bold; font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">Bundling < p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">不怎么好翻译,类似于资源文件的压缩包,索性不翻译它了。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 我们知道Web性能优化的一个主要的方法就是减少HTTP请求,详细可见YSlow里面的 Minimize HTTP Requests

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 由此才出现了css sprite、压缩CSS/JS的工具,目的都是为了尽量减少HTTP的请求。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 之前.NET框架下会有很多的第三方框架,微软也出过一个Microsoft Ajax Minifier,我也曾经也过一篇文章介绍过。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 而这次在ASP.NET Web Forms 4.5中,索性直接添加了此功能,多了一个叫做Bundle的类。

< div style="background-color: rgb(245, 245, 245); font-family: 'Courier New'; font-size: 12px; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0px; max-width: 900px; width: auto; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; " class="cnblogs_code">
 1 public  class BundleConfig
 2     {
 3         //  For more information on Bundling, visit  http://go.microsoft.com/fwlink/?LinkId=254726
 4         public  static void RegisterBundles(BundleCollection bundles)
 5         {
 6              bundles.Add(new  ScriptBundle("~/bundles/WebFormsJs ").Include(
 7                    " ~/Scripts/WebForms/WebForms.js" ,
 8                    " ~/Scripts/WebForms/WebUIValidation.js ",
 9                    " ~/Scripts/WebForms/MenuStandards.js ",
10                    " ~/Scripts/WebForms/Focus.js",
11                    " ~/Scripts/WebForms/GridView.js",
12                    " ~/Scripts/WebForms/DetailsView.js" ,
13                    " ~/Scripts/WebForms/TreeView.js",
14                    " ~/Scripts/WebForms/WebParts.js" ));
15 
16              bundles.Add(new  ScriptBundle("~/bundles/jquery ").Include(
17                      " ~/Scripts/jquery-{version}.js "));
18 
19              bundles.Add(new  ScriptBundle("~/bundles/MsAjaxJs ").Include(
20                  " ~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
21                  " ~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js ",
22                  " ~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js" ,
23                  " ~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js" ));
24 
25              bundles.Add(new  StyleBundle("~/Content/themes/base/css ").Include(
26                    " ~/Content/themes/base/jquery.ui.core.css ",
27                    " ~/Content/themes/base/jquery.ui.resizable.css ",
28                    " ~/Content/themes/base/jquery.ui.selectable.css ",
29                    " ~/Content/themes/base/jquery.ui.accordion.css ",
30                    " ~/Content/themes/base/jquery.ui.autocomplete.css ",
31                    " ~/Content/themes/base/jquery.ui.button.css ",
32                    " ~/Content/themes/base/jquery.ui.dialog.css ",
33                    " ~/Content/themes/base/jquery.ui.slider.css ",
34                    " ~/Content/themes/base/jquery.ui.tabs.css ",
35                    " ~/Content/themes/base/jquery.ui.datepicker.css ",
36                    " ~/Content/themes/base/jquery.ui.progressbar.css ",
37                    " ~/Content/themes/base/jquery.ui.theme.css "));
38         }
39     }
< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> Bundle还支持将CSS压缩的文件配置写在config文件里,使得维护更加方便,同时也支持CDN和文件通配符等。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">可以通过在Application_Start里注册配置。

< div style="background-color: rgb(245, 245, 245); font-family: 'Courier New'; font-size: 12px; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0px; max-width: 900px; width: auto; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; " class="cnblogs_code">
1 void  Application_Start(object sender, EventArgs e)
2 {
3     BundleConfig.RegisterBundles(BundleTable.Bundles);
4 }
< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">使用。

< div style="background-color: rgb(245, 245, 245); font-family: 'Courier New'; font-size: 12px; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0px; max-width: 900px; width: auto; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; " class="cnblogs_code">
1 <% : Scripts.Render( " ~/bundles/modernizr " %>
2 <% : Scripts.Render( " ~/bundles/jquery " %>
3 <% : Scripts.Render( " ~/bundles/jqueryui " %>
< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 压缩前后请求数对比(图片来源)。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">压缩合并前。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">压缩后。

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">

< p style="margin: 5px auto; text-indent: 0px; font-family: Georgia, 'Times New Roman', Times, san-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 25px; color: rgb(0, 0, 0); letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); "> 这样,当此属性成为了ASP.NET自带的一个功能后,我们只需要很简单地配置就可以实现优化准则里面的“减少掉HTTP请求数”这一条了。

资源下载