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

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

html页面部分如下：

<asp:checkboxlist id="checkboxlist1" runat="server">

       <asp:listitem value="1">1</asp:listitem>

       <asp:listitem value="2">2</asp:listitem>

       <asp:listitem value="3">3</asp:listitem>

</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等。

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

<table id="checkboxlist1" border="0">

       <tr><td><input id="checkboxlist1_0" type="checkbox" name="checkboxlist1:0" /><label for="checkboxlist1_0">1</label></td>

       </tr>

<tr><td><input id="checkboxlist1_1" type="checkbox" name="checkboxlist1:1" /><label for="checkboxlist1_1">2</label></td>

       </tr>

<tr><td><input id="checkboxlist1_2" type="checkbox" name="checkboxlist1:2" /><label for="checkboxlist1_2">3</label></td>

       </tr>

</table>

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

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

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

       下面是控件的实现代码：


 using system;


 using system;

using system.web.ui;

using system.web.ui.webcontrols;

using system.componentmodel;

using system.text;


 namespace cuike519.web.ui.webcontrols {


 namespace cuike519.web.ui.webcontrols {

       /// <summary>

       /// summary description for newcheckboxlist.

       /// </summary>

       [defaultproperty("text"), 

       toolboxdata("<{0}:newcheckboxlist runat=server></{0}:newcheckboxlist>")]

       public class newcheckboxlist : system.web.ui.webcontrols.checkboxlist {


               protected override void render(htmltextwriter writer) {


               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("<input",start,end-start);

                            stringbuilder sbitemattribute = new stringbuilder();

                            this.items[i].attributes.render(new htmltextwriter(new system.io.stringwriter(sbitemattribute)));

                            s = s.insert(start+7,sbitemattribute.tostring()+" ");

                            start = s.indexof("/>",start,s.length-start);

                                     end += sbitemattribute.length+1;

                     }

                     writer.write(s);

              }


       }

}


代码说明如下：

我将构造一个stringbuilder来保存该控件呈现的内容（这个内容并不完整需要修改），我们利用base.render将原始流写到sb里面，接着会获得其字符串，然后我们会在整个字符串中的指定位置查找对应的input，这里的算法应该还可以优化，有兴趣的网友可以试试。我会找到上一个input结尾的/>作为下一个查找的开始。在找到字符串之后我将利用item.attribute的render方法将我们在叶面中添加的内容输出到一个新的stringbuilder中（过程类似前面），接着我们会将这个输出写到原始流字符种合适的位置。到此控件算是修改完成了，下面是测试结果：

我们在使用该控件的页面中添加一个下面的指令：

<%@ register tagprefix="ck" namespace="cuike519.web.ui.webcontrols" assembly="test" %>

指明一些必要的参数，这里的test就是我的测试工程生成的assembly。页面的控件部分如下：

<ck:newcheckboxlist id="newcheckboxlist1" runat="server">

       <asp:listitem value="a">a</asp:listitem>

       <asp:listitem value="b">b</asp:listitem>

       <asp:listitem value="c">c</asp:listitem>

</ck:newcheckboxlist>

我们在页面的load写上面同样的代码：

foreach(listitem item in this.newcheckboxlist1.items){

       item.attributes.add("onclick","alert('"+item.text+"')");

}

同样的代码只是更换了控件，让我们看看运行效果，下面是产生的客户端脚本：

<table id="newcheckboxlist1" border="0">

       <tr><td><input  onclick="alert('a')" id="newcheckboxlist1_0" type="checkbox" name="newcheckboxlist1:0" /><label for="newcheckboxlist1_0">a</label></td>

       </tr>

<tr><td><input  onclick="alert('b')" id="newcheckboxlist1_1" type="checkbox" name="newcheckboxlist1:1" /><label for="newcheckboxlist1_1">b</label></td>

       </tr>

<tr><td><input  onclick="alert('c')" id="newcheckboxlist1_2" type="checkbox" name="newcheckboxlist1:2" /><label for="newcheckboxlist1_2">c</label></td>

       </tr>

</table>


是不是和上一个不一样？j 同样的方法也适用于dropdownlist等组件。

    下面是newdropdownlist实现的部分代码，替换newcheckboxlist的对应部分即可：
for(int i = 0;i< this.items.count;i++){
 start = s.indexof("<option",start,end-start);
 stringbuilder sbitemattribute = new stringbuilder();
 this.items[i].attributes.render(new htmltextwriter(new system.io.stringwriter(sbitemattribute)));
 s = s.insert(start+7,sbitemattribute.tostring()+" ");
 start = s.indexof("</option>",start,s.length-start);
 end += sbitemattribute.length+1;
}

该文章灵感来源于csdn的网友提问。