ASP.NET 4.0新特性ClientID的改进

开发 后端
这里就介绍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); 
  • 1.
  • 2.
  • 3.
  • 4.

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

for (var i = 1; i <= 9; i++) {  
 
              var Element = document.getElementById("Repeater1_ctl0" + i + "_lblName");  
 
              alert(Element.innerText);  
          } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 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 值:

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

上面是和传统生成 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> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.


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

如果在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> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

结果为:

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

看来还比较灵活,

现在我们再在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> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

结果在页面上就会出现

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

但并没有报错。

如果在再外面加一个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> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

这个时候就会报错,有相同的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> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.


生成的结果为:

<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> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

你可以看见我们将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的转变:了解控件
责任编辑:彭凡 来源: 博客园
相关推荐

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-07-30 15:17:16

ASP.NET 2.0

2009-12-02 09:07:45

ASP.NET 4.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

2010-02-03 09:50:58

ASP.NET MVC

2010-12-07 09:38:15

ASP.NET MVC

2009-02-01 15:35:40

ASP.NETMVC实例

2009-07-28 17:17:19

ASP.NET概述
点赞
收藏

51CTO技术栈公众号