自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

ASP.NET 4.0新特性ClientID的改進

作者：works guo
開發(fā) 后端
這里就介紹ASP.NET 4.0新特性，關(guān)于ClientID的改進以擺脫之前很難控制的情況，希望本文能給大家?guī)韼椭?/div>

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

一 ：簡介

我們知道因為在原來的ASP.NET應(yīng)用程序中使用服務(wù)端控件在生成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 的解決方案

現(xiàn)在你會發(fā)現(xiàn)在ASP.NET 4.0中會有一個ClientMode的新屬性：

他有四個值分別是：

Legacy：就是使用傳統(tǒng)的模式，設(shè)置ClientIDMode是無效的。

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

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

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

（1）使用Legacy 值：

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

上面是和傳統(tǒng)生成 Client ID的情況的一樣。

（2）Static 模式

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

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


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

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

  1. <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
  2.            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
  3.            SelectCommand="SELECT * FROM [Products]">asp:SqlDataSource> 
  4.        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
  5.         <HeaderTemplate > 
  6.         <table> 
  7.         <tr> 
  8.            <td>sfsdtd> 
  9.         tr> 
  10.         HeaderTemplate> 
  11.         <ItemTemplate > 
  12.           <tr><td> 
  13.            <asp:Label   ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
  14.            td>tr> 
  15.            <tr><td> 
  16.            <asp:Label   ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable">asp:Label> 
  17.            td>tr> 
  18.            <tr><td> 
  19.            <asp:Label   ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
  20.            td>tr> 
  21.         ItemTemplate> 
  22.         <FooterTemplate> 
  23.         FooterTemplate>     
  24.        asp:Repeater> 

結(jié)果為：

  1. <span id="lblName_0"> 
  2. <span id="lblName_1"> 
  3. <span id="lblName_2"> 
  4. <span id="lblName_3"> 

看來還比較靈活，

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

  1. <asp:Label   ID="lblName_0"  Text="worksguo" runat="server" ClientIDMode=“Static或Predictable”>asp:Label> 
  2.         <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
  3.             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
  4.             SelectCommand="SELECT * FROM [Products]">asp:SqlDataSource> 
  5.         <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
  6.          <HeaderTemplate > 
  7.          <table> 
  8.          <tr> 
  9.             <td>sfsdtd> 
  10.          tr> 
  11.          HeaderTemplate> 
  12.          <ItemTemplate > 
  13.            <tr><td> 
  14.             <asp:Label   ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
  15.             td>tr> 
  16.             <tr><td> 
  17.             <asp:Label   ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable">asp:Label> 
  18.             td>tr> 
  19.             <tr><td> 
  20.             <asp:Label   ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
  21.             td>tr> 
  22.          ItemTemplate> 
  23.          <FooterTemplate> 
  24.          FooterTemplate>     
  25.         asp:Repeater> 

結(jié)果在頁面上就會出現(xiàn)

  1. <span id="lblName_0"> 
  2. <span id="lblName_0"> 

但并沒有報錯。

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

  1. <asp:Label   ID="lblName_0"  Text="worksguo" runat="server">asp:Label> 
  2.    <asp:Label   ID="lblName_0"  Text="worksguo" runat="server">asp:Label> 
  3.         <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
  4.             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
  5.             SelectCommand="SELECT * FROM [Products]">asp:SqlDataSource> 
  6.         <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static"> 
  7.          <HeaderTemplate > 
  8.          <table> 
  9.          <tr> 
  10.             <td>sfsdtd> 
  11.          tr> 
  12.          HeaderTemplate> 
  13.          <ItemTemplate > 
  14.            <tr><td> 
  15.             <asp:Label   ID="lblID"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
  16.             td>tr> 
  17.             <tr><td> 
  18.             <asp:Label   ID="lblName"  Text='<%# Eval("ProductName") %>' runat="server" ClientIDMode="Predictable">asp:Label> 
  19.             td>tr> 
  20.             <tr><td> 
  21.             <asp:Label   ID="lblReorderLevel"  Text='<%# Eval("ReorderLevel")%>' runat="server" ClientIDMode="Predictable">asp:Label> 
  22.             td>tr> 
  23.          ItemTemplate> 
  24.          <FooterTemplate> 
  25.          FooterTemplate>     
  26.         asp:Repeater> 

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

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

(3)Predictable Mode

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

  1. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  2.             DataKeyNames="ProductName" DataSourceID="SqlDataSource1" ClientIDMode="Predictable" ClientIDRowSuffix="ProductName" > 
  3.             <Columns> 
  4.                 <asp:TemplateField HeaderText="ProductName" > 
  5.                     <ItemTemplate> 
  6.                         <asp:Label   ID="lblID"  Text='<%# Eval("ProductName")%>' runat="server" >asp:Label> 
  7.                          
  8.                     ItemTemplate> 
  9.                 asp:TemplateField>      
  10.             Columns> 
  11.         asp:GridView> 


生成的結(jié)果為：

  1. <tr> 
  2.             <th scope="col">ProductNameth> 
  3.         tr><tr> 
  4.             <td> 
  5.                         <span id="GridView1_lblID_Chai">Chaispan> 
  6.                          
  7.                     td> 
  8.         tr><tr> 
  9.             <td> 
  10.                         <span id="GridView1_lblID_Chang">Changspan> 
  11.                          
  12.                     td> 
  13.         tr><tr> 
  14.             <td> 
  15.                         <span id="GridView1_lblID_Aniseed Syrup">Aniseed Syrupspan> 
  16.                          
  17.                     td> 
  18.         tr><tr> 
  19.             <td> 
  20.                         <span id="GridView1_lblID_Chef Anton's Cajun Seasoning">Chef Anton's Cajun Seasoningspan> 
  21.                          
  22.                     td> 
  23.         tr><tr> 

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

新特性總結(jié)

現(xiàn)在有這個ClientMode就能很好的控制生成到客戶端的ID,這樣可以更好的動態(tài)控制頁面上標(biāo)簽。

原文標(biāo)題：ASP.NET 4.0 新特性--ClientID的改進（原創(chuàng)）

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

【編輯推薦】

  1. 深入研究Repeater控件：***的靈活性
  2. DataList控件入門介紹
  3. DataGrid Web控件運作機制探秘
  4. 小議ASP.NET數(shù)據(jù)Web控件之間的相似性
  5. 從傳統(tǒng)ASP到ASP.NET的轉(zhuǎn)變：了解控件
責(zé)任編輯：彭凡 來源： 博客園
ASP.NET 4.0新特性
相關(guān)推薦

2009-08-18 09:37:42

ASP.NET 4.0

2009-07-30 14:55:43

ASP.NET 2.0

2009-08-10 18:16:33

ICustomQuer.NET 4.0

2010-10-12 09:52:02

ASP.NET MVC

2011-01-15 23:07:59

2009-07-20 16:44:56

ASP.NET MVCIValueProvi

2010-01-08 11:04:06

ASP.NET 4SEO

2009-12-02 09:07:45

ASP.NET 4.0

2009-07-30 15:17:16

ASP.NET 2.0

2010-10-08 14:32:32

ASP.NET MVCNuPack

2024-07-02 08:45:08

2010-05-20 08:50:45

UrlRoutingASP.NET 4.0

2009-09-18 09:23:21

ASP.NET 4自動啟動

2009-12-30 10:21:36

.NET 4.0

2009-07-30 15:39:55

ASP.NET 2.0

2010-03-25 08:46:16

ASP.NET 4 B

2009-02-01 15:35:40

ASP.NETMVC實例

2010-02-03 09:50:58

ASP.NET MVC

2010-12-07 09:38:15

ASP.NET MVC

2009-08-03 14:22:33

什么是ASP.NET
點贊
收藏

51CTO技術(shù)棧公眾號