ASP.NET 4.0中的控件ID新选择
本文介绍有关ASP.NET 4.0中的控件ID的相关内容。
在.NET 4.0中，当将控件添加到页面或者用户控件,有一个新的选择项：ClientIDMode。此属性为您提供四种选择：Legacy, Static, Predictable, Inherit。在此之前，几乎不可能找到在一个正确的控件的ID。现在在ASP.NET4.0中，选择Legacy将与以前的asp.net版本产生的方式相同，连接每个控件的ID和父容器的名字。设置为Static将生成服务器控件ID属性设置的值。Predictable用于控件的数据绑定，如 repeater控件，而且还要使用ClientIDRowSuffix属性。
在下面的例子，两个列表在一个页面的ContentPlaceHolder内创建，使用相同的数据源。第一个使用默认的，第二个使用 Static 。
1 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
2 <asp:XmlDataSource ID="LinkData" runat="server" XPath="Colors/Color">
3 <Data>
4 <Colors>
5 <Color Name="Red"/>
6 <Color Name="Blue"/>
7 <Color Name="Yellow"/>
8 <Color Name="Green" />
9 </Colors>
10 </Data>
11 </asp:XmlDataSource>
12 <asp:BulletedList ID="uxList" DataSourceID="LinkData"
13 runat="server" DataTextField="Name" />
14 <asp:BulletedList ID="uxListStatic" ClientIDMode="Static"
15 DataSourceID="LinkData" runat="server" DataTextField="Name" />
16
17 <script type="text/javascript">
18 $(function() {
19 $("#uxList").append("<li>Red</li>");
20 $("#uxListStatic").append("<li>Brown</li>");
21 });
22 </script>
23 </asp:Content>
HTML输出如下：
1 <div>
2 <ul id="ctl00_ContentPlaceHolder1_uxList">
3 <li>Red</li><li>Blue</li><li>Yellow</li><li>Green</li>
4 </ul>
5 <ul id="uxListStatic">
6 <li>Red</li><li>Blue</li><li>Yellow</li><li>Green</li>
7 </ul>
8
9 <script type="text/javascript">
10 $(function() {
11 $("#uxListStatic").append("<li>Brown</li>");
12 });
13 </script>
14 </div>
浏览器中输出：
* Red
* Blue
* Yellow
* Green
* Red
* Blue
* Yellow
* Green
* Brown
PS:早上看见一篇文章：[JavaScript]只需一行代码，轻松搞定快捷留言功能
故在我的页面中加入下面代码：
1 <script language="javascript" type="text/javascript">
2 window.onload=function()
3 {
4 var el = [],
5 _el = document.getElementsByTagName('*');
6
7 for (var i = 0; i < _el.length; i++) {
8
9 if (_el[i].className == 'diggit') {
10
11 el[el.length] = _el[i];
12
13 }
14
15 }
16 var diggit = el;
17 var txt = document.getElementById('tbCommentBody');
18 if(txt!=null)
19 {
20 if ((diggit) && (diggit[0])) {
21
22 diggit[0].onclick();
23
24 }
25 }
26 }
27 </script>
