ASP.NET 4.0配置文件中的ClientIDMode属性详解

时光流逝,我们心爱的ASP.NET也步入了4.0的时代,微软在ASP.NET 4.0中对很多特性做了修改。比如我将要讨论的控件ID机制就是其中之一。

在ASP.NET 4.0之前我们总是要为控件的ClientID头疼,比如明明一个叫lblName的Label放在一个叫做grd的GridView里面后,在页面上改Label的ID就变成了诸如grd_clt02_lblName的一长串字符串,如果我们在前台想在使用JS的时候找到该Label,我们不得不用到C#脚本来获得该Label在前台的确切ID,诸如:

< type="text/ "> var lblName = document.getElementById("<%=lblName.ClientID %>"); </ >

在ASP.NET 4.0中的每个控件上都多了一个叫做ClientIDMode的属性,这就是解决上面获取控件ID难的解决方案。这个属性有四个可选值,根据所选值的不同它可以控制页面上生成控件的ID格式。

下面就让我们来了解下ClientIDMode属性的四个值:

1,AutoID:

当控件的ClientIDMode选中为AutoID时,该控件的ClientID 值是通过串联每个祖先容器控件(诸如GridView、ListView、LoginView等就是容器性控件)的ID和父容器控件的ID和其本身的ID 值生成的,当然如果该控件没有在任何容器控件中其ClientID 值就是其本身的ID值,不会做任何更改。 另外如果该控件所在的父容器控件或祖先容器控件有些是显示多个数据行的容器控件(例如GridView、ListView就是显示多数据行的容器控件),那么还将在这些容器控件的ID值的后面会插入一个递增的行号格式。 各部分之间以下划线字符 (_) 分隔。 可见在 ASP.NET 4 之前的版本中使用的就是AutoID方案来生成控件的ClientID 值。

比如下面这个GridView里面就有一个名叫Label1的ID,我们将Label1的ClientIDMode设置为了AutoID:

<asp:GridView runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="Account Number" DataSourceID="sds_account" PageSize="5" ClientIDMode="AutoID" > <Columns> <asp:TemplateField HeaderText="Account Number" Sort ="Account Number"> <ItemTemplate> <asp:Label runat="server" Text='<%# Bind("[Account Number]") %>' ClientIDMode="AutoID"></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

该GridView生成的客户端HTML代码就是:

<table cellspacing="0" rules="all"> <tr> <th scope="col">Account Number</th> </tr> <tr> <td> <span>1060</span> </td> </tr> <tr> <td> <span>1200</span> </td> </tr> <tr> <td> <span>1510</span> </td> </tr> </table>

可以看到GirdView里面的Label形成了诸如grd_Account_ctl02_Label1格式的ClientID,而这正是:父容器ID(grd_Account)+"_"+行号格式(ctl02)+"_"+控件自身ID(ClientID)这种格式生成的。

2,Static:

当控件的ClientIDMode选中为Static时,该控件的ClientID 值就是其本身设置的 ID 属性值,其ClientID值不会受到父容器控件的影响。 

比如我们把上面的代码稍作修改,将Label1的ClientIDMode属性改为Static:

<asp:GridView runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="Account Number" DataSourceID="sds_account" PageSize="5" > <Columns> <asp:TemplateField HeaderText="Account Number" Sort ="Account Number"> <ItemTemplate> <asp:Label runat="server" Text='<%# Bind("[Account Number]") %>' ClientIDMode="Static"></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

运行后查看得到的HTML代码:

<table cellspacing="0" rules="all"> <tr> <th scope="col">Account Number</th> </tr><tr> <td> <span>1060</span> </td> </tr><tr> <td> <span>1200</span> </td> </tr><tr> <td> <span>1510</span> </td> </tr> </table>

看到了吗,GridView里每行的Label1的ClientID都以自身ID的值出现了,不会受到父级容器控件的ID影响,这样在前台使用JS时我们就能通控件本身的ID值找到我们想要的控件了。

此外使用Static后势必页面中会出现很多同名的控件ID,只要这些同名ID的控件处于页面的不同层次(比如某一容器控件的内部和外部就是不同层次)上那么就不会出现问题,但是如果页面同一层次上有多个同ID的控件,那么页面就会报错。

3,Inherit:

这个属性其实没什么好说的,如果控件的ClientIDMode选中为Inherit,那么表示该控件的ClientIDMode会使用父级容器控件的ClientIDMode值,如果父级容器控件的ClientIDMode也为Inherit,那么会使用更上层容器控件的ClientIDMode值,直到回溯到页面的ClientIDMode值为止,页面的ClientIDMode值默认为Predictable ,你可以在页面上的<%@ Page%>指令中对该值做更改。此外Inherit也是ASP.NET 4.0中所有控件的ClientIDMode属性的默认值。

4,Predictable:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdsfyy.html