如何使CheckBoxList的Attributes属性生效（修改微软的一个bug）

本文将描述如何使 CheckBoxList 中的 Item 添加的 Attribute 在客户端生效， CheckBoxList 是一个非常好用的组件，它支持数据绑定等特性。但是他和 DropDownList 有同样的一个问题，就是当我们向它们的 Items 里面 Add 项目的时候，如果希望给这些 Item 添加客户端行为，这些行为并不能体现在客户端，我们通常使用的方法如下：

HTML 页面部分如下：

1<asp:checkboxlist id="CheckBoxList1" runat="server">
2<asp:listitem value="1">1</asp:listitem>
3<asp:listitem value="2">2</asp:listitem>
4<asp:listitem value="3">3</asp:listitem>
5</asp:checkboxlist>

我们在 Page_Load 里面添加如下代码：

foreach(ListItem item in this.CheckBoxList1.Items){

item.Attributes.Add("onclick","alert('"+item.Text+"')");

}

这样做的目的是：当我们点击 CheckBox 的时候希望 alert 出来我们选中的 CheckBox 的内容，当然还有其他的一些更有用的应用。但是实际上这段代码是不能正常工作的。我们在客户端点击 CheckBox 的时候看不到提示信息，同样不论你向 Attributs 中添加什么都不会有任何反应的。同样的问题也存在于其他的 List 控件中，比如： DropDownList 等。

下面是这个页面呈现的客户端脚本：

1<table border="0" id="CheckBoxList1">
2<tr><td><input id="CheckBoxList1_0" name="CheckBoxList1:0" type="checkbox"/><label for="CheckBoxList1_0">1</label></td>
3</tr>
4<tr><td><input id="CheckBoxList1_1" name="CheckBoxList1:1" type="checkbox"/><label for="CheckBoxList1_1">2</label></td>
5</tr>
6<tr><td><input id="CheckBoxList1_2" name="CheckBoxList1:2" type="checkbox"/><label for="CheckBoxList1_2">3</label></td>
7</tr>
8</table>

可以看出来这里并没有我们期望的 onclick 事件。

下面我将提供一种方法来完善这个控件，既然是完善，那么我会保持该控件原有的所有特性并修复上面这个 bug （我认为应该是一个 bug ），可能已经有人想到了使用什么方法，对，我将使用继承的方式复用这个控件。并在我们的新控件上做些手脚，使它更好用，我命名这个控件名叫 NewCheckBoxList 。

我们首先从分析客户端代码开始，我们发现在服务器上写的代码在客户端没有任何表现，那么怎么才能表现出来呢？这里我将重写该组件的 Render 方法，来完成最终的目的。下面就描述一下我的思路，首先我会从 Render 中将本来应该输出到页面的流，输出到一个 StringBuilder 里面，这样我就有机会编辑这个 StringBuilder 来完成剩下的工作，获得这个 StringBuilder 之后我们将按照我们希望的逻辑来为这个字符串添加内容，当内容添加完之后将这个字符串写到控件的输出流中即可。

下面是控件的实现代码：

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

using System.Text;

namespace Cuike519.Web.UI.WebControls {

///

1<summary>
2
3/// Summary description for NewCheckBoxList. 
4
5/// </summary>

[DefaultProperty("Text"),

ToolboxData("<{0}:NewCheckBoxList runat=server>

")]

public class NewCheckBoxList : System.Web.UI.WebControls.CheckBoxList {

protected override void Render(HtmlTextWriter writer) {

StringBuilder sb = new StringBuilder();

System.IO.TextWriter tw = new System.IO.StringWriter(sb);

HtmlTextWriter OriginalStream = new HtmlTextWriter(tw);

base.Render(OriginalStream);

string s = sb.ToString();

int start = 0;

int end = s.Length;

for(int i = 0;i< this.Items.Count;i++){

start = s.IndexOf("

 1<input",start,end-start); ");="" htmltextwriter(new="" s='s.Insert(start+7,sbItemAttribute.ToString()+"' sbitemattribute="new" start='s.IndexOf("/' stringbuilder="" stringbuilder();="" system.io.stringwriter(sbitemattribute)));="" this.items[i].attributes.render(new="">",start,s.Length-start); 
 2
 3} 
 4
 5writer.Write(s); 
 6
 7} 
 8
 9} 
10
11} 
12
13代码说明如下： 
14
15我将构造一个  StringBuilder  来保存该控件呈现的内容（这个内容并不完整需要修改），我们利用  base.Render  将原始流写到  sb  里面，接着会获得其字符串，然后我们会在整个字符串中的指定位置查找对应的  input  ，这里的算法应该还可以优化，有兴趣的网友可以试试。我会找到上一个  input  结尾的  /&gt; 作为下一个查找的开始。在找到字符串之后我将利用  item.Attribute  的  Render  方法将我们在叶面中添加的内容输出到一个新的  StringBuilder  中（过程类似前面），接着我们会将这个输出写到原始流字符种合适的位置。到此控件算是修改完成了，下面是测试结果： 
16
17我们在使用该控件的页面中添加一个下面的指令：

@ Register TagPrefix="ck" Namespace="Cuike519.Web.UI.WebControls" Assembly="Test"

 1
 2指明一些必要的参数，这里的  Test  就是我的测试工程生成的  Assembly  。页面的控件部分如下： 
 3
 4<ck:newcheckboxlist id="NewCheckBoxList1" runat="server">
 5<asp:listitem value="a">a</asp:listitem>
 6<asp:listitem value="b">b</asp:listitem>
 7<asp:listitem value="c">c</asp:listitem>
 8</ck:newcheckboxlist>
 9
10我们在页面的  Load  写上面同样的代码： 
11
12foreach(ListItem item in this.NewCheckBoxList1.Items){ 
13
14item.Attributes.Add("onclick","alert('"+item.Text+"')"); 
15
16} 
17
18同样的代码只是更换了控件，让我们看看运行效果，下面是产生的客户端脚本： 
19
20<table border="0" id="NewCheckBoxList1">
21<tr><td><input id="NewCheckBoxList1_0" name="NewCheckBoxList1:0" onclick="alert('a')" type="checkbox"/><label for="NewCheckBoxList1_0">a</label></td>
22</tr>
23<tr><td><input id="NewCheckBoxList1_1" name="NewCheckBoxList1:1" onclick="alert('b')" type="checkbox"/><label for="NewCheckBoxList1_1">b</label></td>
24</tr>
25<tr><td><input id="NewCheckBoxList1_2" name="NewCheckBoxList1:2" onclick="alert('c')" type="checkbox"/><label for="NewCheckBoxList1_2">c</label></td>
26</tr>
27</table>
28
29是不是和上一个不一样？  J  同样的方法也适用于  DropDownList  等组件。 
30
31该文章灵感来源于  CSDN  的网友提问。希望对大家有所帮助，  如有疑问或者建议请发邮件到  [email protected]  。谢谢阅读。</input",start,end-start);>