精进不休 .NET 4.0 (1) - asp.net 4.0 新特性之web.config的改进, ViewStateMode, ClientIDMode, EnablePersistedSelection, 控件的其它一些改进

[索引页]
[源码下载]

精进不休 .NET 4.0 (1) - asp.net 4.0 新特性之web.config的改进, ViewStateMode, ClientIDMode, EnablePersistedSelection, 控件的其它一些改进

作者： webabcd


介绍
asp.net 4.0 的新增功能

• 简洁的 web.config 文件
• 控件的新属性 ViewStateMode - 控件的视图状态模式
• 控件的新属性 ClientIDMode - 生成客户端 ID 的方式
• 列表控件的新属性 EnablePersistedSelection - 保存选中项的方式
• 控件的其他一些增强点
  • RenderOuterTable - 指定控件在客户端呈现的时候，是否在外层加 table 标签
  • Menu 控件，在 asp.net 4.0 中将会以 ul li 的方式呈现在客户端
  • RepeatLayout - 布局模式，控件在客户端的 HTML 呈现方式
  • Wizard 和 CreateUserWizard 新增了 LayoutTemplate 模板
  • 原来使用 ListView 必须要有 LayoutTemplate ，在 asp.net 4.0 中可以不再用它了

示例
1、简洁的 web.config，配置信息被移到了 machine.config
Web.config

代码

<? xml version="1.0" ?>

<!--
    清爽的 web.config 
    配置信息一律都放到 machine.config 里了
-->

< configuration >
    
     < system.web >
         < compilation  debug ="true"  targetFramework ="4.0"   />
     </ system.web >
    
</ configuration >

2、ViewStateMode 属性的用法
ViewStateDemo.aspx

代码

<% @ Page Title = ""  Language = " C# "  MasterPageFile = " ~/Site.Master "  AutoEventWireup = " true "
    CodeBehind = " ViewStateDemo.aspx.cs "  Inherits = " AspDotNet.ViewStateDemo "   %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="head"  runat ="server" >
</ asp:Content >
< asp:Content  ID ="Content2"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="server" >
     <!--
        ViewStateMode - 控件的视图状态模式
            ViewStateMode.Enabled - 此控件启用 ViewState，并且其子控件中所有 ViewStateMode 为 Inherit 的控件也全部启用 ViewState
            ViewStateMode.Disabled - 此控件禁用 ViewState，并且其子控件中所有 ViewStateMode 为 Inherit 的控件也全部奇偶能用 ViewState
            ViewStateMode.Inherit - 此控件是否启用 ViewState，由其父控件的 ViewStateMode 的值决定
     -->

     < asp:PlaceHolder  ID ="PlaceHolder1"  runat ="server"  ViewStateMode ="Disabled" >

         <!-- 无 ViewState -->
         < asp:Label  ID ="Label1"  runat ="server"  ViewStateMode ="Disabled"   />

         < br  />

         <!-- 有 ViewState -->
         < asp:Label  ID ="Label2"  runat ="server"  ViewStateMode ="Enabled"   />

         < br  />

         <!-- 无 ViewState -->
         < asp:Label  ID ="Label3"  runat ="server"  ViewStateMode ="Inherit"   />

     </ asp:PlaceHolder >

     < br  />
     <!-- 点击“回发”按钮后观察各个 Label 控件是否启用了 ViewState -->
     < asp:Button  ID ="Button1"  runat ="server"  Text ="回发"   />
</ asp:Content >

ViewStateDemo.aspx.cs

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

namespace  AspDotNet
{
     public   partial   class  ViewStateDemo : System.Web.UI.Page
    {
         protected   void  Page_Load( object  sender, EventArgs e)
        {
             //  页面第一次加载时，分别给三个 Label 赋值，用于演示是否启用了 ViewState
             if  ( ! Page.IsPostBack)
            {
                Label1.Text  =   " Label1 " ;
                Label2.Text  =   " Label2 " ;
                Label3.Text  =   " Label3 " ;
            }
        }
    }
}

3、ClientIDMode 属性的用法
ClientID.aspx

代码

<% @ Page Title = " ClientID "  Language = " C# "  MasterPageFile = " ~/Site.Master "  AutoEventWireup = " true "
    CodeBehind = " ClientID.aspx.cs "  Inherits = " AspDotNet.ClientID "  ClientIDMode = " Static "   %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="head"  runat ="server" >
</ asp:Content >
< asp:Content  ID ="Content2"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="server" >
    
     <!--
        ClientIDMode - 生成客户端 ID 的方式
            ClientIDMode.AutoID - 生成方式和以前一样，为保证唯一，会把其以上各层级的控件ID拿过来拼成一个页面中的唯一ID
            ClientIDMode.Inherit - 继承父控件的客户端ID生成方式
            ClientIDMode.Static - 静态方式。在服务端设置的ID是什么，客户端所呈现的ID就是什么
            ClientIDMode.Predictable - 生成ID的方式为：[Prefix]_[ID]_[Suffix]
        注意：
            在某控件层级中如果没有设置 ClientIDMode，则其默认值为 AutoID
            如果在控件层级中的父级控件设置了 ClientIDMode，则其子控件的默认值为 Inherit
     -->

     <!--  ClientIDMode.AutoID 的 Demo  -->
     < fieldset >
         < legend > Legacy </ legend >
         < asp:TextBox  ID ="txtLegacy"  ClientIDMode ="AutoID"  runat ="server"  Text ="ID: txtLegacy"   />
     </ fieldset >

     <!--  ClientIDMode.Static 的 Demo  -->
     < fieldset >
         < legend > Static </ legend >
         < asp:TextBox  ID ="txtStatic"  ClientIDMode ="Static"  runat ="server"  Text ="ID: txtStatic"   />
     </ fieldset >

     <!--  ClientIDMode.Inherit 的 Demo （注意：Page 上的 ClientIDMode 的值为 Static，所以此控件的客户端ID生成方式也是 Static） -->
     < fieldset >
         < legend > Inherit </ legend >
         < asp:TextBox  ID ="txtInherit"  ClientIDMode ="Inherit"  runat ="server"  Text ="ID: txtInherit"   />
     </ fieldset >

     <!--  Predictable 模式中自动分配 Suffix 的方式  -->
     < fieldset >
         < legend > Predictable Repeater  </ legend >
         < div  id ="repeaterContainer" >
             < asp:Repeater  ID ="repeater"  runat ="server"  ClientIDMode ="Static" >
                 < ItemTemplate >
                     < div >
                         < asp:Label  ID ="productPrice"  ClientIDMode ="Predictable"  runat ="server" >
                         <% #  string .Format(System.Globalization.CultureInfo.CurrentUICulture,  " {0:c} " ,  Eval ( " ProductPrice " )) %>
                         </ asp:Label >
                     </ div >
                 </ ItemTemplate >
             </ asp:Repeater >
         </ div >
         < asp:TextBox  ID ="txtPredictableRepeater"  runat ="server"  TextMode ="MultiLine"  Rows ="10"
            ClientIDMode ="Static"  Style ="width: 99%;"   />
     </ fieldset >

     <!--  Predictable 模式中分配指定 Suffix 的方式（ClientIDRowSuffix 指定 Suffix 的数据来源）  -->
     < fieldset >
         < legend > Predictable ListView  </ legend >
         < asp:ListView  ID ="listView"  runat ="server"  ClientIDMode ="Static"  ClientIDRowSuffix ="ProductId" >
             < ItemTemplate >
                 < div >
                     < asp:Label  ID ="productPrice"  ClientIDMode ="Predictable"  runat ="server" >
                         <% #  string .Format(System.Globalization.CultureInfo.CurrentUICulture,  " {0:c} " ,  Eval ( " ProductPrice " )) %>
                     </ asp:Label >
                 </ div >
             </ ItemTemplate >
             < LayoutTemplate >
                 < div  id ="listViewContainer" >
                     < div  id ="itemPlaceholder"  runat ="server"   />
                 </ div >
             </ LayoutTemplate >
         </ asp:ListView >
         < asp:TextBox  ID ="txtPredictableListView"  runat ="server"  TextMode ="MultiLine"  Rows ="10"
            ClientIDMode ="Static"  Style ="width: 99%;"   />
     </ fieldset >

     < script  type ="text/javascript" >

        window.onload  =   function  () {
            document.getElementById( ' <%= txtLegacy.ClientID %> ' ).value  +=   "    ClientID:  "   +   ' <%= txtLegacy.ClientID %> ' ;

            document.getElementById( ' <%= txtStatic.ClientID %> ' ).value  +=   "    ClientID:  "   +   ' <%= txtStatic.ClientID %> ' ;

            document.getElementById( ' <%= txtInherit.ClientID %> ' ).value  +=   "    ClientID:  "   +   ' <%= txtInherit.ClientID %> ' ;

            document.getElementById( ' txtPredictableRepeater ' ).value  =  document.getElementById( ' repeaterContainer ' ).innerHTML;

            document.getElementById( ' txtPredictableListView ' ).value  =  document.getElementById( ' listViewContainer ' ).innerHTML;
        }

     </ script >
</ asp:Content >

ClientID.aspx.cs

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

namespace  AspDotNet
{
     public   partial   class  ClientID : System.Web.UI.Page
    {
         protected   void  Page_Load( object  sender, EventArgs e)
        {
            BindData();
        }

         //  绑定数据到 ListView
         private   void  BindData()
        {
            Random random  =   new  Random();

            List < Product >  products  =   new  List < Product > ();
             for  ( int  i  =   0 ; i  <   5 ; i ++ )
            {
                products.Add( new  Product { ProductId  =  i  +   100 , ProductName  =   " 名称 " , ProductPrice  =  random.NextDouble() });
            }

            listView.DataSource  =  products;
            listView.DataBind();

            repeater.DataSource  =  products;
            repeater.DataBind();
        }

         class  Product
        {
             public   int  ProductId {  get ;  set ; }
             public   string  ProductName {  get ;  set ; }
             public   double  ProductPrice {  get ;  set ; }
        }
    }
}

4、EnablePersistedSelection 属性的用法
EnablePersistedSelection.aspx

代码

<% @ Page Title = ""  Language = " C# "  MasterPageFile = " ~/Site.Master "  AutoEventWireup = " true "
    CodeBehind = " EnablePersistedSelection.aspx.cs "  Inherits = " AspDotNet.EnablePersistedSelection "   %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="head"  runat ="server" >
</ asp:Content >
< asp:Content  ID ="Content2"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="server" >
     <!--
        EnablePersistedSelection - 保存选中项的方式
            true - 根据 DataKeyNames 指定的字段做为关键字保存选中项（分页操作不会改变选中项）
            false - 根据行在当前页的表中的索引做为关键字保存选中项（分页后，选中项会发生改变。比如，在第一页选中了第一行，那么分页到第二页的时候选此页的第一行就会被当成选中项，也就是选中项发生了改变）
     -->

     < asp:GridView  ID ="gridView"  runat ="server"  AllowPaging ="True"  DataSourceID ="ObjectDataSource1"
        CellPadding ="4"  ForeColor ="#333333"  GridLines ="None"  EnablePersistedSelection ="true"
        DataKeyNames ="productId" >
         < AlternatingRowStyle  BackColor ="White"   />
         < Columns >
             < asp:CommandField  ShowSelectButton ="True"   />
             < asp:BoundField  DataField ="productId"  HeaderText ="productId"  SortExpression ="productId"   />
             < asp:BoundField  DataField ="productName"  HeaderText ="productName"  SortExpression ="productName"   />
             < asp:BoundField  DataField ="productPrice"  HeaderText ="productPrice"  SortExpression ="productPrice"   />
         </ Columns >
         < FooterStyle  BackColor ="#990000"  Font-Bold ="True"  ForeColor ="White"   />
         < HeaderStyle  BackColor ="#990000"  Font-Bold ="True"  ForeColor ="White"   />
         < PagerStyle  BackColor ="#FFCC66"  ForeColor ="#333333"  HorizontalAlign ="Center"   />
         < RowStyle  BackColor ="#FFFBD6"  ForeColor ="#333333"   />
         < SelectedRowStyle  BackColor ="#FFCC66"  Font-Bold ="True"  ForeColor ="Navy"   />
         < SortedAscendingCellStyle  BackColor ="#FDF5AC"   />
         < SortedAscendingHeaderStyle  BackColor ="#4D0000"   />
         < SortedDescendingCellStyle  BackColor ="#FCF6C0"   />
         < SortedDescendingHeaderStyle  BackColor ="#820000"   />
     </ asp:GridView >
     < asp:ObjectDataSource  ID ="ObjectDataSource1"  runat ="server"  SelectMethod ="GetData"
        TypeName ="AspDotNet.EnablePersistedSelection" ></ asp:ObjectDataSource >

</ asp:Content >

EnablePersistedSelection.aspx.cs

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

namespace  AspDotNet
{
     public   partial   class  EnablePersistedSelection : System.Web.UI.Page
    {
         protected   void  Page_Load( object  sender, EventArgs e)
        {
            
        }

         //  为 GridView 提供数据
         public  List < Product >  GetData()
        {
            Random random  =   new  Random();

            List < Product >  products  =   new  List < Product > ();
             for  ( int  i  =   0 ; i  <   100 ; i ++ )
            {
                products.Add( new  Product { ProductId  =  i  +   1 , ProductName  =   " 名称 " , ProductPrice  =  random.NextDouble() });
            }

             return  products;
        }
    }

     //  为 GridView 提供数据的实体类
     public   class  Product
    {
         public   int  ProductId {  get ;  set ; }
         public   string  ProductName {  get ;  set ; }
         public   double  ProductPrice {  get ;  set ; }
    }
}

5、控件的其他一些增强点
ControlsEnhancement.aspx

代码

<% @ Page Title = ""  Language = " C# "  MasterPageFile = " ~/Site.Master "  AutoEventWireup = " true "
    CodeBehind = " ControlsEnhancement.aspx.cs "  Inherits = " AspDotNet.ControlsEnhancement "   %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="head"  runat ="server" >
</ asp:Content >
< asp:Content  ID ="Content2"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="server" >

     <!--
        RenderOuterTable - 指定控件在客户端呈现的时候，是否在外层加 table 标签
            FormView，Login，PasswordRecovery，ChangePassword 控件均有此属性 
     -->
     < asp:FormView  ID ="FormView1"  runat ="server"  DefaultMode ="Insert"  RenderOuterTable ="false" >
         < InsertItemTemplate >
            FormView 的插入模板
         </ InsertItemTemplate >
     </ asp:FormView >

     < br  />< br  />

     <!--
        Menu 控件，在 asp.net 4.0 中将会以 ul li 的方式呈现在客户端
     -->
     < asp:Menu  ID ="Menu1"  runat ="server" >
         < Items >
             < asp:MenuItem  Text ="Level 1 - Item 1"  Value ="1" >
                 < asp:MenuItem  Text ="New Item"  Value ="3" ></ asp:MenuItem >
             </ asp:MenuItem >
             < asp:MenuItem  Text ="Level 1 - Item 2"  Value ="2" >
                 < asp:MenuItem  Text ="Level 2 - Item 1"  Value ="4" ></ asp:MenuItem >
                 < asp:MenuItem  Text ="Level 2 - Item 2"  Value ="5" ></ asp:MenuItem >
             </ asp:MenuItem >
         </ Items >
     </ asp:Menu >

     < br  />< br  />

     <!--
        RepeatLayout - 布局模式，控件在客户端的 HTML 呈现方式
            RepeatLayout.Flow - 流式布局，一行一个选项
            RepeatLayout.OrderedList - ol li 布局
            RepeatLayout.UnorderedList - ul li 布局
            RepeatLayout.Table - Table 布局
            CheckBoxList，RadioButton 控件均有此属性
     -->
     < asp:CheckBoxList  ID ="CheckBoxList1"  runat ="server"  RepeatLayout ="UnorderedList" >
         < asp:ListItem  Text ="Item1"   />
         < asp:ListItem  Text ="Item2"   />
         < asp:ListItem  Text ="Item3"   />
         < asp:ListItem  Text ="Item4"   />
         < asp:ListItem  Text ="Item5"   />
         < asp:ListItem  Text ="Item6"   />
     </ asp:CheckBoxList >

     < br  />< br  />

     <!--
        Wizard 和 CreateUserWizard 新增了 LayoutTemplate 模板 ，如下
            headerPlaceholder - runtime时，其内容会被 HeaderTemplate 中的内容替换掉
            sideBarPlaceholder - runtime时，其内容会被 SideBarTemplate 中的内容替换掉
            wizardStepPlaceholder - runtime时，其内容会被 WizardStepTemplate 中的内容替换掉
            navigationPlaceholder - runtime时，其内容会被导航模板中的内容替换掉
     -->
     < asp:Wizard  ID ="Wizard1"  runat ="server" >
         < LayoutTemplate >
             < div  style ="background-color: Yellow" >
                 < asp:PlaceHolder  ID ="headerPlaceholder"  runat ="server"   />
             </ div >
             < asp:PlaceHolder  ID ="sideBarPlaceholder"  runat ="server"   />
             < asp:PlaceHolder  ID ="wizardStepPlaceholder"  runat ="server"   />
             < div  style ="background-color: Red" >
                 < asp:PlaceHolder  ID ="navigationPlaceholder"  runat ="server"   />
             </ div >
         </ LayoutTemplate >
         < HeaderTemplate >
            Header
         </ HeaderTemplate >
         < WizardSteps >
             < asp:WizardStep  runat ="server"  Title ="Step 1" >
             </ asp:WizardStep >
             < asp:WizardStep  runat ="server"  Title ="Step 2" >
             </ asp:WizardStep >
         </ WizardSteps >
     </ asp:Wizard >

     < br  />< br  />

     <!--
        原来使用 ListView 必须要有 LayoutTemplate ，在 asp.net 4.0 中可以不再用它了
     -->
     < asp:ListView  ID ="listView"  runat ="server"  ClientIDRowSuffix ="ProductId" >
         < ItemTemplate >
             < div  style ="background-color: Fuchsia" >
                 <% #  string .Format(System.Globalization.CultureInfo.CurrentUICulture,  " {0:c} " ,  Eval ( " ProductPrice " )) %>
             </ div >
         </ ItemTemplate >
         <% --
         < LayoutTemplate >
             < div style = " background-color: Fuchsia " >
                 < div id = " itemPlaceholder "  runat = " server "   />
             </ div >
         </ LayoutTemplate >
         -- %>
     </ asp:ListView >

</ asp:Content >

ControlsEnhancement.aspx.cs

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

namespace  AspDotNet
{
     public   partial   class  ControlsEnhancement : System.Web.UI.Page
    { 
         protected   void  Page_Load( object  sender, EventArgs e)
        {
            BindData();
        }

         //  绑定数据到 ListView
         private   void  BindData()
        {
            Random random  =   new  Random();

            List < Product >  products  =   new  List < Product > ();
             for  ( int  i  =   0 ; i  <   5 ; i ++ )
            {
                products.Add( new  Product { ProductId  =  i  +   1 , ProductName  =   " 名称 " , ProductPrice  =  random.NextDouble() });
            }

            listView.DataSource  =  products;
            listView.DataBind();
        }

         class  Product
        {
             public   int  ProductId {  get ;  set ; }
             public   string  ProductName {  get ;  set ; }
             public   double  ProductPrice {  get ;  set ; }
        }
    }
}

OK
[源码下载]