鲨鱼网
ASP.NET 4.0新特性ClientID的改进
创始人
2024-06-06 06:30:53
0次

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

一 ：简介

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

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

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

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

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

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

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

其实也可以通过重写控件的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.  id="ctl00_txtName" style="width: 65%" name="ctl00$txtName" /> 

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

（2）Static 模式

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

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


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

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

  1.  ID="SqlDataSource1" runat="server"   
  2.            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
  3.            SelectCommand="SELECT * FROM [Products]"> 
  4.         ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
  5.          > 
  6.          
  7.         
    8.  
  8.            
    9.  
  9.         
    10.  
  10.          
  11.          > 
  12.           
    13.  
  13.            
    14.  
  14.            
    15.  
  15.          
  16.          
  17.              
  18.         
    19. 

    结果为：
    1.  id="lblName_0"> 
    2.  id="lblName_1"> 
    3.  id="lblName_2"> 
    4.  id="lblName_3"> 
    

    看来还比较灵活，
    

    现在我们再在repeater外面方一个Label,ID为lblName_0的，ClientIDMode为Static或Predictable；
    1.    ID="lblName_0"  Text="worksguo" runat="server" ClientIDMode=“Static或Predictable”> 
    2.          ID="SqlDataSource1" runat="server"   
    3.             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
    4.             SelectCommand="SELECT * FROM [Products]"> 
    5.          ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
    6.           > 
    7.          
    sfsd
     
  19.               ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> 
  20.            
    21.  
  21.               ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable"> 
  22.            
    23.  
  23.               ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> 
  24.            
    25.  
  25.          
    26.  
  26.             
    27.  
  27.          
    28.  
  28.           
  29.           > 
  30.            
    31.  
  31.             
    32.  
  32.             
    33.  
  33.           
  34.           
  35.               
  36.          
    37. 

    结果在页面上就会出现
    1.  id="lblName_0"> 
    2.  id="lblName_0"> 
    

    但并没有报错。
    

    如果在再外面加一个Label,ID为lblName_0的，ClientIDMode为Static或Predictable，就会出现报错。
    1.    ID="lblName_0"  Text="worksguo" runat="server"> 
    2.       ID="lblName_0"  Text="worksguo" runat="server"> 
    3.          ID="SqlDataSource1" runat="server"   
    4.             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
    5.             SelectCommand="SELECT * FROM [Products]"> 
    6.          ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
    7.           > 
    8.          
    sfsd
     
  37.                ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> 
  38.             
    39.  
  39.                ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable"> 
  40.             
    41.  
  41.                ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> 
  42.             
    43.  
  43.          
    44.  
  44.             
    45.  
  45.          
    46.  
  46.           
  47.           > 
  48.            
    49.  
  49.             
    50.  
  50.             
    51.  
  51.           
  52.           
  53.               
  54.          
    55. 

    这个时候就会报错，有相同的ClientID。
    

    所以ClientIDMode使用是有层次范围的，在页面上相同层次级别上不能有相同ID,如果在Repeater中新的层次中就可以与上一层次有相同ID.
    

    (3)Predictable Mode
    

    在GridView数据绑定控件中还有一个新的属性ClientIDRowSuffix，它是在GridView中设置在使用Predictable模式，生成新的ID的后缀。
    1.  ID="GridView1" runat="server" AutoGenerateColumns="False"   
    2.             DataKeyNames="ProductName" DataSourceID="SqlDataSource1" ClientIDMode="Predictable" ClientIDRowSuffix="ProductName" > 
    3.              
    4.                  HeaderText="ProductName" > 
    5.                      
    6.                            ID="lblID"  Text='<%# Eval("ProductName")%>' runat="server" > 
    7.                          
    8.                      
    9.                       
    10.              
    11.          
    


    生成的结果为：
     
  55.             ProductName 
  56.         
    57.  
  57.             
    58.  
  58.         
    59.  
  59.             
    60.  
  60.         
    61.  
  61.             
    62.  
  62.         
    63.  
  63.             
    64.  
  64.         
    65.  

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

    新特性总结
    

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

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

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

    【编辑推荐】
    

      

    1. 深入研究Repeater控件：***的灵活性 

    2. DataList控件入门介绍 

    3. DataGrid Web控件运作机制探秘 

    4. 小议ASP.NET数据Web控件之间的相似性 

    5. 从传统ASP到ASP.NET的转变：了解控件 
                      
            
            
            
    
                
                            
    
            
    
                
    
                    上一篇：CCNA模拟器入门学习
    
                
    
                
    
                    下一篇：CCNA学习方法汇总 总结前辈考试经验                
    
            
    
            
            
    
                
                
    相关内容
    
                
            
    
            
    
            
            
    
                
            
    


        
        
    
    

    
    
    
        
        
    
            
            
    
                
                
    
                    
                    
    
                        
                        热门资讯
                        
                    
    
                    
                
    
                
            
    
            
            
            
    

                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        如何允许远程连接到MySQL数...
                        [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        如何利用交换机和端口设置来管理...
                        在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        施耐德电气数据中心整体解决方案...
                        近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        20个非常棒的扁平设计免费资源
                        Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        2009 IBM动态架构新动力...
                        
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        通过 XML 进行内容发布
                        
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        德国电信门户网站可实时显示全球...
                        德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        为啥国人偏爱 Mybatis，...
                        关于 SQL 和 ORM  的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        《非诚勿扰》红人闫凤娇被曝厕所...
                        【51CTO.com 综合消息360安全专家提醒说，“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
                    
    
                    
                
    
                                
                
    
                    
                    
    
                        
    
                    
    
                    
                    
                    
    
                        2012年第四季度互联网状况报...
                        [[71653]]　　北京时间4月25日消息，据国外媒体报道，全球知名的云平台公司Akamai Te...
                    
    
                    
                
    
                
            
    
            
        
    
        
    
    
    






















    
    
    
        
            
            
        
    
    

    











    sfsd
     
  65.                ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> 
  66.             
    67.  
  67.                ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable"> 
  68.             
    69.  
  69.                ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable"> 
  70.             
    71.  
  71.                         Chai 
  72.                          
  73.                     
    74.  
  74.                         Chang 
  75.                          
  76.                     
    77.  
  77.                         Aniseed Syrup 
  78.                          
  79.                     
    80.  
  80.                         Chef Anton's Cajun Seasoning 
  81.                          
  82.