精进不休 .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
[源码下载]