ASP.NET 4.0 新特性--ClientID的改进(原创)
.Net Framework 4.0(4) 系列文章
今天介绍ASP.NET 4.0 ClientID改进的介绍:
一 :简介
我们知道因为在原来的ASP.NET应用程序中使用服务端控件在生成ClientID的时,是很难控制的,特别是在嵌套的控件的时候,比如在多个嵌套Repeater中要控制某一个控件生成的html的ID属性,是很困难的,
在ASP.NET 4.0中提供ClientMode,来控制生成的Html的ID的情况。
二 :原来的问题和解决方法
原来要获得html的ID,就要使用这样的方式:
如果是在嵌套的控件中,就需要使用并接字符串来组合成一下客户端ID,
其实也可以通过重写控件的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 值:
上面是和传统生成 Client ID的情况的一样。
(2)Static 模式
ClientIDMode的值设置为Static,这里要注意就是在repeater等数据绑定控件中使用子控件时,他们生成的子控件ID都是一样的,所以控制不好控制。
所以可以看出它比较适合单个控件的使用。
如果在repeater设置为Static,而将后面的控件设为Predictable
结果为:
看来还比较灵活,
现在我们再在repeater外面方一个Label,ID为lblName_0的,ClientIDMode为Static或Predictable;
结果在页面上就会出现
但并没有报错。
如果在再外面加一个Label,ID为lblName_0的,ClientIDMode为Static或Predictable,就会出现报错。
这个时候就会报错,有相同的ClientID。
所以ClientIDMode使用是有层次范围的,在页面上相同层次级别上不能有相同ID,如果在Repeater中新的层次中就可以与上一层次有相同ID.
(3)Predictable Mode
在GridView数据绑定控件中还有一个新的属性ClientIDRowSuffix,它是在GridView中设置在使用Predictable模式,生成新的ID的后缀。
生成的结果为:
你可以看见我们将ProductName作为后缀名。
总结
现在有这个ClientMode就能很好的控制生成到客户端的ID,这样可以更好的动态控制页面上标签。
worksguo
www.cnblogs.com/worksguo
今天介绍ASP.NET 4.0 ClientID改进的介绍:
一 :简介
我们知道因为在原来的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);
var lblName = document.getElementById("<%=lblName.ClientID%>");
alert(lblName.innerText);
如果是在嵌套的控件中,就需要使用并接字符串来组合成一下客户端ID,
for (var i = 1; i <= 9; i++) {
var Element = document.getElementById("Repeater1_ctl0" + i + "_lblName");
alert(Element.innerText);
}
var Element = document.getElementById("Repeater1_ctl0" + i + "_lblName");
alert(Element.innerText);
}
其实也可以通过重写控件的ID来,控制在客户端ID的生成。
三:ASP.NET 4.0 的解决方案
现在你会发现在asp.net 4.0中会有一个ClientMode的新属性:
<asp:Label ID="Label1" runat="server" ClientIDMode="" />
他有四个值分别是: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" />
<input id="ctl00_txtName" style="width: 65%" name="ctl00$txtName" />
上面是和传统生成 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>
<td>
<span id="lblName">
</td>
<tr>
<tr>
<td>
<span id="lblName">
</td>
<tr>
<tr>
<td>
<span id="lblName">
</td>
<tr>
所以可以看出它比较适合单个控件的使用。
如果在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>sfsd</td>
</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>
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" ClientIDMode="Static">
<HeaderTemplate >
<table>
<tr>
<td>sfsd</td>
</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>
结果为:
<span id="lblName_0">
<span id="lblName_1">
<span id="lblName_2">
<span id="lblName_3">
<span id="lblName_1">
<span id="lblName_2">
<span id="lblName_3">
看来还比较灵活,
现在我们再在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>sfsd</td>
</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>
<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>sfsd</td>
</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>
结果在页面上就会出现
<span id="lblName_0">
<span id="lblName_0">
<span id="lblName_0">
但并没有报错。
如果在再外面加一个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>sfsd</td>
</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>
<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>sfsd</td>
</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>
这个时候就会报错,有相同的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>
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>
生成的结果为:
<tr>
<th scope="col">ProductName</th>
</tr><tr>
<td>
<span id="GridView1_lblID_Chai">Chai</span>
</td>
</tr><tr>
<td>
<span id="GridView1_lblID_Chang">Chang</span>
</td>
</tr><tr>
<td>
<span id="GridView1_lblID_Aniseed Syrup">Aniseed Syrup</span>
</td>
</tr><tr>
<td>
<span id="GridView1_lblID_Chef Anton's Cajun Seasoning">Chef Anton's Cajun Seasoning</span>
</td>
</tr><tr>
<th scope="col">ProductName</th>
</tr><tr>
<td>
<span id="GridView1_lblID_Chai">Chai</span>
</td>
</tr><tr>
<td>
<span id="GridView1_lblID_Chang">Chang</span>
</td>
</tr><tr>
<td>
<span id="GridView1_lblID_Aniseed Syrup">Aniseed Syrup</span>
</td>
</tr><tr>
<td>
<span id="GridView1_lblID_Chef Anton's Cajun Seasoning">Chef Anton's Cajun Seasoning</span>
</td>
</tr><tr>
你可以看见我们将ProductName作为后缀名。
总结
现在有这个ClientMode就能很好的控制生成到客户端的ID,这样可以更好的动态控制页面上标签。
worksguo
www.cnblogs.com/worksguo