本文將描述如何使CheckBoxList中的Item添加的Attribute在客戶端生效，CheckBoxList是一個(gè)非常好用的組件，它支持?jǐn)?shù)據(jù)綁定等特性。但是他和DropDownList有同樣的一個(gè)問(wèn)題，就是當(dāng)我們向它們的Items里面Add項(xiàng)目的時(shí)候，如果希望給這些Item添加客戶端行為，這些行為并不能體現(xiàn)在客戶端，我們通常使用的方法如下：

HTML頁(yè)面部分如下：

<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>

我們?cè)赑age_Load里面添加如下代碼：

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

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

}

這樣做的目的是：當(dāng)我們點(diǎn)擊CheckBox的時(shí)候希望alert出來(lái)我們選中的CheckBox的內(nèi)容，當(dāng)然還有其他的一些更有用的應(yīng)用。但是實(shí)際上這段代碼是不能正常工作的。我們?cè)诳蛻舳它c(diǎn)擊CheckBox的時(shí)候看不到提示信息，同樣不論你向Attributs中添加什么都不會(huì)有任何反應(yīng)的。同樣的問(wèn)題也存在于其他的List控件中，比如：DropDownList等。

下面是這個(gè)頁(yè)面呈現(xiàn)的客戶端腳本：

<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>

可以看出來(lái)這里并沒(méi)有我們期望的onclick事件。

       下面我將提供一種方法來(lái)完善這個(gè)控件，既然是完善，那么我會(huì)保持該控件原有的所有特性并修復(fù)上面這個(gè)bug（我認(rèn)為應(yīng)該是一個(gè)bug），可能已經(jīng)有人想到了使用什么方法，對(duì)，我將使用繼承的方式復(fù)用這個(gè)控件。并在我們的新控件上做些手腳，使它更好用，我命名這個(gè)控件名叫NewCheckBoxList。

       我們首先從分析客戶端代碼開(kāi)始，我們發(fā)現(xiàn)在服務(wù)器上寫(xiě)的代碼在客戶端沒(méi)有任何表現(xiàn)，那么怎么才能表現(xiàn)出來(lái)呢？這里我將重寫(xiě)該組件的Render方法，來(lái)完成最終的目的。下面就描述一下我的思路，首先我會(huì)從Render中將本來(lái)應(yīng)該輸出到頁(yè)面的流，輸出到一個(gè)StringBuilder里面，這樣我就有機(jī)會(huì)編輯這個(gè)StringBuilder來(lái)完成剩下的工作，獲得這個(gè)StringBuilder之后我們將按照我們希望的邏輯來(lái)為這個(gè)字符串添加內(nèi)容，當(dāng)內(nèi)容添加完之后將這個(gè)字符串寫(xiě)到控件的輸出流中即可。

       下面是控件的實(shí)現(xiàn)代碼：


 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);

              }


       }

}


代碼說(shuō)明如下：

我將構(gòu)造一個(gè)StringBuilder來(lái)保存該控件呈現(xiàn)的內(nèi)容（這個(gè)內(nèi)容并不完整需要修改），我們利用base.Render將原始流寫(xiě)到sb里面，接著會(huì)獲得其字符串，然后我們會(huì)在整個(gè)字符串中的指定位置查找對(duì)應(yīng)的input，這里的算法應(yīng)該還可以優(yōu)化，有興趣的網(wǎng)友可以試試。我會(huì)找到上一個(gè)input結(jié)尾的/>作為下一個(gè)查找的開(kāi)始。在找到字符串之后我將利用item.Attribute的Render方法將我們?cè)谌~面中添加的內(nèi)容輸出到一個(gè)新的StringBuilder中（過(guò)程類似前面），接著我們會(huì)將這個(gè)輸出寫(xiě)到原始流字符種合適的位置。到此控件算是修改完成了，下面是測(cè)試結(jié)果：

我們?cè)谑褂迷摽丶捻?yè)面中添加一個(gè)下面的指令：

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

指明一些必要的參數(shù)，這里的Test就是我的測(cè)試工程生成的Assembly。頁(yè)面的控件部分如下：

<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>

我們?cè)陧?yè)面的Load寫(xiě)上面同樣的代碼：

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

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

}

同樣的代碼只是更換了控件，讓我們看看運(yùn)行效果，下面是產(chǎn)生的客戶端腳本：

<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>


是不是和上一個(gè)不一樣？J 同樣的方法也適用于DropDownList等組件。

    下面是NewDropDownList實(shí)現(xiàn)的部分代碼，替換NewCheckBoxList的對(duì)應(yīng)部分即可：
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;
}

該文章靈感來(lái)源于CSDN的網(wǎng)友提問(wèn)。

最新評(píng)論