通过代码理解Asp.net4中的几种ClientIDMode设置.
以前我们可以通过ClientID在JavaScript脚本中服务器端控件.比如:
document.getElementById("<%=控件.ClientID %>");
这种方式不方便,而且如果在有数据绑定的控件中嵌套着子控件,则访问更不太方便了.
现在,在Asp.Net4中,对于控件增加了一种新的属性,名为ClientIDMode.通过设置ClientIDMode,我们可以指定各个服务器控件如何生成ClientID,以便我们在客户端脚本中方便使用.具体如下:
1. Inherit
控件继承其父控件的 ClientIDMode 设置。这个就没什么多说的了.
2. AutoID
ClientID 值是通过串联每个父命名容器的 ID 值生成的，这些父命名容器都具有控件的 ID 值。 在呈现控件的多个实例的数据绑定方案中，将在控件的 ID 值的前面插入递增的值。 各部分之间以下划线字符 (_) 分隔。 在 ASP.NET 4 之前的 ASP.NET 版本中使用此算法。
代码如下所示:
<asp:Content ID="content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:Button ID="Button1123" runat="server" Text="Button" OnClientClick="showClientId();"
ClientIDMode="AutoID" />
</div>
<script type="text/javascript">
function showClientId() {
var d = document.getElementById("<%=Button1123.ClientID %>");
alert(d.id);
return false;
}
</script>
</asp:Content>
运行结果如下图所示:
3. Static
ClientID 值设置为 ID 属性的值。 如果控件是命名容器，则该控件将用作其所包含的任何控件的命名容器的顶层。
代码如下所示:
<asp:Content ID="content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:Button ID="Button1123" runat="server" Text="Button" OnClientClick="showClientId();"
ClientIDMode="Static" />
</div>
<script type="text/javascript">
function showClientId() {
var d = document.getElementById("Button1123");
alert(d.id);
return false;
}
</script>
</asp:Content>
这里,我们就可以直接使用var d = document.getElementById("Button1123");这样的代码访问服务器端控件了. 运行结果如下图所示:
4. Predictable
对于数据绑定控件中的控件使用此算法。 ClientID 值是通过串联每个父命名容器的 ClientID 值生成的，这些父命名容器都具有控件的ID 值。 如果控件是生成多个行的数据绑定控件，则在末尾添加 ClientIDRowSuffix 属性中指定的数据字段的值。 如果 ClientIDRowSuffix 属性为空白，则在末尾添加顺序号，而非数据字段值。 这个顺序号是从0开始并以1递增的. 各部分之间以下划线字符 (_) 分隔。
页面代码如下:
<asp:ListView ID="ListView1" runat="server" ClientIDMode="Predictable" ClientIDRowSuffix="ID">
<ItemTemplate>
<tr>
<td>
<%# Eval("ID")%>
</td>
<td>
<%# Eval("Name") %>
</td>
<td align="right">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("RegisteTime") %>' />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
运行后,查看页面源文件如下:
如上示例, Predictable 主要是用在有数据绑定控件中的子控件中,这样可以按照自己的意愿生成相应的id,上例中,我们指定了使用数据源中的ID字段做为后缀来生成相应的id.还可以通过分号分割设置多个字段作为ID.
现在我们去掉ClientIDRowSuffix="ID"这段代码,再来看看执行之后的页面源代码.
我们可以发现,自动为添加了从0开始,以1递增的后缀序号.
使用此方式,我们可以预见子控件id规律,这样在某些需要顺序或循环通过客户端脚本(如JavaScript脚本)访问这些子控件时,就很方便了.
通过以上几种不同的设置,我们可以更自由的控制服务器端控件生成的id,以使得我们在客户端脚本(如JavaScript脚本)中方便的调用.尤其在现在Jquery等JS库普遍使用的情况下.