ASP.NET4.0新特性ClientID的改进

ASP.NET 4.0新特性中，关于ClientID的改进可以在执行嵌套空间时，控制生成的Html的ID的情况。以往进行这样的操作时，很容易出现错误，很难控制。

创新互联建站始终坚持【策划先行，效果至上】的经营理念，通过多达10年累计超上千家客户的网站建设总结了一套系统有效的全网营销推广解决方案，现已广泛运用于各行各业的客户，其中包括：OPP胶袋等企业，备受客户夸奖。

一 ：简介

我们知道因为在原来的ASP.NET应用程序中使用服务端控件在生成ClientID的时，是很难控制的，特别是在嵌套的控件的时候，比如在多个嵌套Repeater中要控制某一个控件生成的html的ID属性，是很困难的，

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

二 ：原来的问题和解决方法

原来要获得html的ID,就要使用这样的方式：

 
 
 
    
  
  
  
  1. <%=lblName.ClientID%> 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  var lblName = document.getElementById("<%=lblName.ClientID%>");  
    4. 
  
  
  
  4.            alert(lblName.innerText); 
    5.

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

 
 
 
    
  
  
  
  1. for (var i = 1; i <= 9; i++) {  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.               var Element = document.getElementById("Repeater1_ctl0" + i + "_lblName");  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.               alert(Element.innerText);  
    6. 
  
  
  
  6.           } 
    7.

其实也可以通过重写控件的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 值：

 
 
 
    
  
  
  
  1.  :TextBox ID ="txtName" runat ="server" Width ="70%" ClientIDMode ="Legacy" /> 
    2. 
  
  
  
  2.  id="ctl00_txtName" style="width: 65%" name="ctl00$txtName" /> 
    3.

上面是和传统生成 Client ID的情况的一样。

（2）Static 模式

ClientIDMode的值设置为Static,这里要注意就是在repeater等数据绑定控件中使用子控件时，他们生成的子控件ID都是一样的，所以控制不好控制。

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  id="lblName"> 
    4. 
  
  
  
  4.  td> 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  id="lblName"> 
    9. 
  
  
  
  9.  td> 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  id="lblName"> 
    14. 
  
  
  
  14.  td> 
    15. 
  
  
  
  15.  
    16.

所以可以看出它比较适合单个控件的使用。

如果在repeater设置为Static,而将后面的控件设为Predictable

 
 
 
    
  
  
  
  1.  ID="SqlDataSource1" runat="server"   
    2. 
  
  
  
  2.            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
    3. 
  
  
  
  3.            SelectCommand="SELECT * FROM [Products]"> asp:SqlDataSource> 
    4. 
  
  
  
  4.         ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
    5. 
  
  
  
  5.          > 
    6. 
  
  
  
  6.          
  7.         
    8.  
  8.            
    9. 
  
  
  
    
  
  
  sfsd td> 
  
  
  
  9.          tr> 
    10. 
  
  
  
  10.          HeaderTemplate> 
    11. 
  
  
  
  11.          > 
    12. 
  
  
  
  12.           
    13.  
  
  
  
  13.               ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> asp:Label> 
    14. 
  
  
  
  14.             td> tr> 
    15. 
  
  
  
  15.            
    16.  
  
  
  
  16.               ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable"> asp:Label> 
    17. 
  
  
  
  17.             td> tr> 
    18. 
  
  
  
  18.            
    19.  
  
  
  
  19.               ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> asp:Label> 
    20. 
  
  
  
  20.             td> tr> 
    21. 
  
  
  
  21.          ItemTemplate> 
    22. 
  
  
  
  22.          
    23. 
  
  
  
  23.          FooterTemplate>     
    24. 
  
  
  
  24.         asp:Repeater> 
    25. 
 
 
 
    结果为：
     
 
 
      
  
  
  
    1.  id="lblName_0"> 
      2. 
  
  
  
    2.  id="lblName_1"> 
      3. 
  
  
  
    3.  id="lblName_2"> 
      4. 
  
  
  
    4.  id="lblName_3"> 
      5. 
 
 
 
    看来还比较灵活，
    现在我们再在repeater外面方一个Label,ID为lblName_0的，ClientIDMode为Static或Predictable；
     
 
 
      
  
  
  
    1.    ID="lblName_0"  Text="worksguo" runat="server" ClientIDMode=“Static或Predictable”> asp:Label> 
      2. 
  
  
  
    2.          ID="SqlDataSource1" runat="server"   
      3. 
  
  
  
    3.             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
      4. 
  
  
  
    4.             SelectCommand="SELECT * FROM [Products]"> asp:SqlDataSource> 
      5. 
  
  
  
    5.          ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
      6. 
  
  
  
    6.           > 
      7. 
  
  
  
    7.           
    8.          
      9.  
    9.             
      10. 
  
  
  
      
  
  
  sfsd td> 
  
  
  
    10.           tr> 
      11. 
  
  
  
    11.           HeaderTemplate> 
      12. 
  
  
  
    12.           > 
      13. 
  
  
  
    13.            
      14.  
  
  
  
    14.                ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> asp:Label> 
      15. 
  
  
  
    15.              td> tr> 
      16. 
  
  
  
    16.             
      17.  
  
  
  
    17.                ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable"> asp:Label> 
      18. 
  
  
  
    18.              td> tr> 
      19. 
  
  
  
    19.             
      20.  
  
  
  
    20.                ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> asp:Label> 
      21. 
  
  
  
    21.              td> tr> 
      22. 
  
  
  
    22.           ItemTemplate> 
      23. 
  
  
  
    23.           
      24. 
  
  
  
    24.           FooterTemplate>     
      25. 
  
  
  
    25.          asp:Repeater> 
      26. 
 
 
 
      结果在页面上就会出现
       
 
 
        
  
  
  
      1.  id="lblName_0"> 
        2. 
  
  
  
      2.  id="lblName_0"> 
        3. 
 
 
 
      但并没有报错。
      如果在再外面加一个Label,ID为lblName_0的，ClientIDMode为Static或Predictable，就会出现报错。
       
 
 
        
  
  
  
      1.    ID="lblName_0"  Text="worksguo" runat="server"> asp:Label> 
        2. 
  
  
  
      2.       ID="lblName_0"  Text="worksguo" runat="server"> asp:Label> 
        3. 
  
  
  
      3.          ID="SqlDataSource1" runat="server"   
        4. 
  
  
  
      4.             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
        5. 
  
  
  
      5.             SelectCommand="SELECT * FROM [Products]"> asp:SqlDataSource> 
        6. 
  
  
  
      6.          ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
        7. 
  
  
  
      7.           > 
        8. 
  
  
  
      8.           
      9.          
        10.  
      10.             
        11.  
  
  
  
      11.             ProductName th> 
        12. 
  
  
  
      12.          tr>
        13.  
  
  
  
      13.             
        14.  
  
  
  
      14.             
        15.  
  
  
  
      15.             
        16.  
  
  
  
      16.             
        17.  
 
 
 
        你可以看见我们将ProductName作为后缀名。
        新特性总结
        现在有这个ClientMode就能很好的控制生成到客户端的ID,这样可以更好的动态控制页面上标签。
                    
        
                新闻标题：ASP.NET4.0新特性ClientID的改进
                
        
                网页路径：http://www.gawzjz.com/qtweb2/news35/16185.html
            
        
            
        
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
        
            
        
                广告
                
            
        
            
        
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            
        
        
        
        
            
        猜你还喜欢下面的内容
        
            
        
        
    
    
        
        
        
            
        外贸建站知识
        
            
        
        
        
        
            
        分类信息网
        
            
        
        
    
        


        
    
        
        无边发光字厂家　　 　广安网站制作公司　　 　成都响应式网站建设公司　　 　成都移动服务器托管　　 　绵阳服务器托管　　 　堡垒主机　　 　网站设计　　 　温江电信机房　　 　广告吸塑字　　 　成都小程序开发公司　　 　绵阳梓潼网站建设　　 　成都网站建设哪家好　　 　成都云主机　　 　成都网站推广营销　　 　资阳服务器托管　　 　企业网站制作　　 　手机APP开发　　 　商城网站建设公司　　 　精灵网　　 　雅安服务器托管　　 　    
        

        




        
  
  
  
        
  
  
  sfsd td> 
  
  
  
      17.           tr> 
        18. 
  
  
  
      18.           HeaderTemplate> 
        19. 
  
  
  
      19.           > 
        20. 
  
  
  
      20.            
        21.  
  
  
  
      21.                ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> asp:Label> 
        22. 
  
  
  
      22.              td> tr> 
        23. 
  
  
  
      23.             
        24.  
  
  
  
      24.                ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable"> asp:Label> 
        25. 
  
  
  
      25.              td> tr> 
        26. 
  
  
  
      26.             
        27.  
  
  
  
      27.                ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> asp:Label> 
        28. 
  
  
  
      28.              td> tr> 
        29. 
  
  
  
      29.           ItemTemplate> 
        30. 
  
  
  
      30.           
        31. 
  
  
  
      31.           FooterTemplate>     
        32. 
  
  
  
      32.          asp:Repeater> 
        33. 
 
 
 
        这个时候就会报错，有相同的ClientID。
        所以ClientIDMode使用是有层次范围的，在页面上相同层次级别上不能有相同ID,如果在Repeater中新的层次中就可以与上一层次有相同ID.
        (3)Predictable Mode
        在GridView数据绑定控件中还有一个新的属性ClientIDRowSuffix，它是在GridView中设置在使用Predictable模式，生成新的ID的后缀。
         
 
 
          
  
  
  
        1.  ID="GridView1" runat="server" AutoGenerateColumns="False"   
          2. 
  
  
  
        2.             DataKeyNames="ProductName" DataSourceID="SqlDataSource1" ClientIDMode="Predictable" ClientIDRowSuffix="ProductName" > 
          3. 
  
  
  
        3.              
          4. 
  
  
  
        4.                  HeaderText="ProductName" > 
          5. 
  
  
  
        5.                      
          6. 
  
  
  
        6.                            ID="lblID"  Text='<%# Eval("ProductName")%>' runat="server" > asp:Label> 
          7. 
  
  
  
        7.                          
          8. 
  
  
  
        8.                      ItemTemplate> 
          9. 
  
  
  
        9.                  asp:TemplateField>      
          10. 
  
  
  
        10.              Columns> 
          11. 
  
  
  
        11.          asp:GridView> 
          12. 
 
 
 
        生成的结果为：
         
 
 
          
  
  
  
         
  
  
  
      33.                         Chai span> 
        34. 
  
  
  
      34.                          
        35. 
  
  
  
      35.                      td> 
        36. 
  
  
  
      36.          tr>
        37.  
  
  
  
      37.                         Chang span> 
        38. 
  
  
  
      38.                          
        39. 
  
  
  
      39.                      td> 
        40. 
  
  
  
      40.          tr>
        41.  
  
  
  
      41.                         Aniseed Syrup span> 
        42. 
  
  
  
      42.                          
        43. 
  
  
  
      43.                      td> 
        44. 
  
  
  
      44.          tr>
        45.  
  
  
  
      45.                         Chef Anton's Cajun Seasoning span> 
        46. 
  
  
  
      46.                          
        47. 
  
  
  
      47.                      td> 
        48. 
  
  
  
      48.          tr>