ASP.NET 4.0 新特性--ClientID的改进（原创）

. Net Framework 4.0(4)  系列文章

今天介绍ASP.NET 4.0 ClientID改进的介绍：

---

一 ：简介

---

我们知道因为在原来的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的新属性：

< asp:Label  ID ="Label1"  runat ="server"  ClientIDMode =""   />

他有四个值分别是：

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 > sfsd </ td >
          </ 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 > sfsd </ td >
          </ 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 > sfsd </ td >
          </ 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" > ProductName </ th >
         </ tr >< tr >
             < td >
                         < span  id ="GridView1_lblID_Chai" > Chai </ span >
                       
                     </ td >
         </ tr >< tr >
             < td >
                         < span  id ="GridView1_lblID_Chang" > Chang </ span >
                       
                     </ td >
         </ tr >< tr >
             < td >
                         < span  id ="GridView1_lblID_Aniseed Syrup" > Aniseed Syrup </ span >
                       
                     </ td >
         </ tr >< tr >
             < td >
                         < span  id ="GridView1_lblID_Chef Anton's Cajun Seasoning" > Chef Anton's Cajun Seasoning </ span >
                       
                     </ td >
         </ tr >< tr >

你可以看见我们将ProductName作为后缀名。

---

总结

---

现在有这个ClientMode就能很好的控制生成到客户端的ID,这样可以更好的动态控制页面上标签。

---

worksguo
www.cnblogs.com/worksguo