ASP.NET 4.0新特性ClientID的改進

作者：works guo 2009-09-04 16:28:05

開發后端

這里就介紹ASP.NET 4.0新特性，關于ClientID的改進以擺脫之前很難控制的情況，希望本文能給大家帶來幫助。

ASP.NET 4.0新特性中，關于ClientID的改進可以在執行嵌套空間時，控制生成的Html的ID的情況。以往進行這樣的操作時，很容易出現錯誤，很難控制。

一：簡介

我們知道因為在原來的ASP.NET應用程序中使用服務端控件在生成ClientID的時，是很難控制的，特別是在嵌套的控件的時候，比如在多個嵌套Repeater中要控制某一個控件生成的html的ID屬性，是很困難的，

在ASP.NET 4.0新特性中提供ClientMode，來控制生成的Html的ID的情況。

二：原來的問題和解決方法

原來要獲得html的ID,就要使用這樣的方式：

<%=lblName.ClientID%> 
 
 var lblName = document.getElementById("<%=lblName.ClientID%>");  
           alert(lblName.innerText);

如果是在嵌套的控件中，就需要使用并接字符串來組合成一下客戶端ID，

for (var i = 1; i <= 9; i++) {  
 
              var Element = document.getElementById("Repeater1_ctl0" + i + "_lblName");  
 
              alert(Element.innerText);  
          }

其實也可以通過重寫控件的ID來，控制在客戶端ID的生成。

三:ASP.NET 4.0 的解決方案

現在你會發現在ASP.NET 4.0中會有一個ClientMode的新屬性：

他有四個值分別是：

Legacy：就是使用傳統的模式，設置ClientIDMode是無效的。

Inherit:這是繼承在控件層次結構中，父級點控件的ClientIDMode設置。也就是說如果你父控件設置ClientIDMode=“Static”，那這里的子控件的ClientIDMode也是"Static"

Static :生成指定的ID,但你要注意頁面上的ClientID的唯一性。

Predictable:這個設置值的使用，需要確保ID的是唯一性，這里分整個頁面的唯一性和在控件中的唯一性兩種情況，第二中就是說你可以在頁面設置一個ID為Name,你還是可以在你的Repeater的Item項目模板中設置ID為Name的Label子控件，而不會報錯，因為他會自動生成新的控件ID。具體下面詳細解說：

（1）使用Legacy 值：

<asp :TextBox ID ="txtName" runat ="server" Width ="70%" ClientIDMode ="Legacy" /> 
<input id="ctl00_txtName" style="width: 65%" name="ctl00$txtName" />

上面是和傳統生成 Client ID的情況的一樣。

（2）Static 模式

ClientIDMode的值設置為Static,這里要注意就是在repeater等數據綁定控件中使用子控件時，他們生成的子控件ID都是一樣的，所以控制不好控制。

<tr> 
<td> 
<span id="lblName"> 
td> 
<tr> 
<tr> 
<td> 
<span id="lblName"> 
td> 
<tr> 
<tr> 
<td> 
<span id="lblName"> 
td> 
<tr>

所以可以看出它比較適合單個控件的使用。

如果在repeater設置為Static,而將后面的控件設為Predictable

<asp:SqlDataSource ID="SqlDataSource1" runat="server"   
           ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
           SelectCommand="SELECT * FROM [Products]">asp:SqlDataSource> 
       <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
        <HeaderTemplate > 
        <table> 
        <tr> 
           <td>sfsdtd> 
        tr> 
        HeaderTemplate> 
        <ItemTemplate > 
          <tr><td> 
           <asp:Label   ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
           td>tr> 
           <tr><td> 
           <asp:Label   ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable">asp:Label> 
           td>tr> 
           <tr><td> 
           <asp:Label   ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
           td>tr> 
        ItemTemplate> 
        <FooterTemplate> 
        FooterTemplate>     
       asp:Repeater>

結果為：

<span id="lblName_0"> 
<span id="lblName_1"> 
<span id="lblName_2"> 
<span id="lblName_3">

看來還比較靈活，

現在我們再在repeater外面方一個Label,ID為lblName_0的，ClientIDMode為Static或Predictable；

<asp:Label   ID="lblName_0"  Text="worksguo" runat="server" ClientIDMode=“Static或Predictable”>asp:Label> 
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
            SelectCommand="SELECT * FROM [Products]">asp:SqlDataSource> 
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
         <HeaderTemplate > 
         <table> 
         <tr> 
            <td>sfsdtd> 
         tr> 
         HeaderTemplate> 
         <ItemTemplate > 
           <tr><td> 
            <asp:Label   ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
            td>tr> 
            <tr><td> 
            <asp:Label   ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable">asp:Label> 
            td>tr> 
            <tr><td> 
            <asp:Label   ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
            td>tr> 
         ItemTemplate> 
         <FooterTemplate> 
         FooterTemplate>     
        asp:Repeater>

結果在頁面上就會出現

<span id="lblName_0"> 
<span id="lblName_0">

但并沒有報錯。

如果在再外面加一個Label,ID為lblName_0的，ClientIDMode為Static或Predictable，就會出現報錯。

<asp:Label   ID="lblName_0"  Text="worksguo" runat="server">asp:Label> 
   <asp:Label   ID="lblName_0"  Text="worksguo" runat="server">asp:Label> 
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
            SelectCommand="SELECT * FROM [Products]">asp:SqlDataSource> 
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
         <HeaderTemplate > 
         <table> 
         <tr> 
            <td>sfsdtd> 
         tr> 
         HeaderTemplate> 
         <ItemTemplate > 
           <tr><td> 
            <asp:Label   ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
            td>tr> 
            <tr><td> 
            <asp:Label   ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable">asp:Label> 
            td>tr> 
            <tr><td> 
            <asp:Label   ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
            td>tr> 
         ItemTemplate> 
         <FooterTemplate> 
         FooterTemplate>     
        asp:Repeater>

這個時候就會報錯，有相同的ClientID。

所以ClientIDMode使用是有層次范圍的，在頁面上相同層次級別上不能有相同ID,如果在Repeater中新的層次中就可以與上一層次有相同ID.

(3)Predictable Mode

在GridView數據綁定控件中還有一個新的屬性ClientIDRowSuffix，它是在GridView中設置在使用Predictable模式，生成新的ID的后綴。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
            DataKeyNames="ProductName" DataSourceID="SqlDataSource1" ClientIDMode="Predictable" ClientIDRowSuffix="ProductName" > 
            <Columns> 
                <asp:TemplateField HeaderText="ProductName" > 
                    <ItemTemplate> 
                        <asp:Label   ID="lblID"  Text='<%# Eval("ProductName")%>' runat="server" >asp:Label> 
                         
                    ItemTemplate> 
                asp:TemplateField>      
            Columns> 
        asp:GridView>

生成的結果為：

<tr> 
            <th scope="col">ProductNameth> 
        tr><tr> 
            <td> 
                        <span id="GridView1_lblID_Chai">Chaispan> 
                         
                    td> 
        tr><tr> 
            <td> 
                        <span id="GridView1_lblID_Chang">Changspan> 
                         
                    td> 
        tr><tr> 
            <td> 
                        <span id="GridView1_lblID_Aniseed Syrup">Aniseed Syrupspan> 
                         
                    td> 
        tr><tr> 
            <td> 
                        <span id="GridView1_lblID_Chef Anton's Cajun Seasoning">Chef Anton's Cajun Seasoningspan> 
                         
                    td> 
        tr><tr>

你可以看見我們將ProductName作為后綴名。

新特性總結

現在有這個ClientMode就能很好的控制生成到客戶端的ID,這樣可以更好的動態控制頁面上標簽。

原文標題：ASP.NET 4.0 新特性--ClientID的改進（原創）

鏈接：http://www.cnblogs.com/worksguo/archive/2009/09/04/1560222.html

【編輯推薦】

深入研究Repeater控件：***的靈活性
DataList控件入門介紹
DataGrid Web控件運作機制探秘
小議ASP.NET數據Web控件之間的相似性
從傳統ASP到ASP.NET的轉變：了解控件

責任編輯：彭凡來源：博客園

ASP.NET 4.0新特性