精进不休 .NET 4.0 (1) - asp.net 4.0 新特性之web.config的改进

[索引页]
[源码下载]

精进不休 .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
        {
void Page_Load() 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">

() () {
                        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
        {
void Page_Load() void Page_Load(object sender, EventArgs e)
                {
                        BindData();
                }

                // 绑定数据到 ListView
void BindData() 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
        {
void Page_Load() void Page_Load(object sender, EventArgs e)
                {
                        
                }

                // 为 GridView 提供数据
List<Product> GetData() 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
        {    
void Page_Load() void Page_Load(object sender, EventArgs e)
                {
                        BindData();
                }

                // 绑定数据到 ListView
void BindData() 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
[源码下载]