INamingContainer接口解决多个自定义控件ID冲突
生活随笔
收集整理的這篇文章主要介紹了
INamingContainer接口解决多个自定义控件ID冲突
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CreateChildControls方法一般用于創建組合控件,在此方法中可以創建多個自己需要的控件,進行實例化,賦值等等.
我們創建個復合控件,如下:
public?class?CompositeCtl:?WebControl
????{
????????protected?override?void?CreateChildControls()
????????{
????????????TextBox?textbox?=?new?TextBox();
????????????textbox.ID?=?"txt";
????????????this.Controls.Add(textbox);
????????????Button?button?=?new?Button();
????????????button.ID?=?"btnOk";
????????????button.Text?=?"Ok";
????????????this.Controls.Add(button);
????????}
????}
在客戶端,我們引用2遍我們的這個自定義控件:
<myCtl:INamingConatinerControl?ID="namingCtl1"?runat="server"?/>
????????<br?/>
????????<myCtl:INamingConatinerControl?ID="namingCtl2"?runat="server"?/>
生成的HTML代碼如下:
<span?id="namingCtl1"><input?name="txt"?type="text"?id="txt"?/><input?type="submit"?name="btnOk"?value="Ok"?id="btnOk"?/></span>
????????<br?/>
????????<span?id="namingCtl2"><input?name="txt"?type="text"?id="txt"?/><input?type="submit"?name="btnOk"?value="Ok"?id="btnOk"?/></span>
上面我們可以看到比較嚴重的問題是:
2個文本框和按鈕的客戶端id居然是一樣的,這樣我們無法利用客戶端的JS語句getElementById來得到某個具體的
文本框或者按鈕.
解決辦法:
讓自定義控件實現INamingContainer(命名容器)接口,其他什么都不用做,代碼會自動為以控件的ID作為前綴進行拼接.
控件正式代碼如下:
using?System;
using?System.Collections.Generic;
using?System.ComponentModel;
using?System.Linq;
using?System.Text;
using?System.Web;
using?System.Web.UI;
using?System.Web.UI.WebControls;
namespace?BlogControl.Basic
{
????public?class?INamingConatinerControl?:?WebControl,INamingContainer
????{
????????protected?override?void?CreateChildControls()
????????{
????????????TextBox?textbox?=?new?TextBox();
????????????textbox.ID?=?"txt";
????????????this.Controls.Add(textbox);
????????????Button?button?=?new?Button();
????????????button.ID?=?"btnOk";
????????????button.Text?=?"Ok";
????????????this.Controls.Add(button);
????????}
????}
}
這樣生成的HTML代碼如下:
<span?id="namingCtl1"><input?name="namingCtl1$txt"?type="text"?id="namingCtl1_txt"?/><input?type="submit"?name="namingCtl1$btnOk"?value="Ok"?id="namingCtl1_btnOk"?/></span>
????????<br?/>
????????<span?id="namingCtl2"><input?name="namingCtl2$txt"?type="text"?id="namingCtl2_txt"?/><input?type="submit"?name="namingCtl2$btnOk"?value="Ok"?id="namingCtl2_btnOk"?/></span>
我們可以看到:
服務器端的name: 控件名 + $ + ID
客戶端ID:?????????? 控件名 + _? + ID
區別在于連接的符號不同.
這里我們提一下控件的3種ID:
1) ID - 就是我們給它命名的 ID
2) UniqueID - 控件的服務器端ID (生成HTML后的name)
3) ClientID?? - 控件的客戶端ID? (生成HTML后的id)
最后我們要提一下的是:
如果控件繼承了 CompositeControl,就不需要再實現INamingContainer接口了,因為
CompositeControl本身就實現了該接口.
我們創建個復合控件,如下:
public?class?CompositeCtl:?WebControl
????{
????????protected?override?void?CreateChildControls()
????????{
????????????TextBox?textbox?=?new?TextBox();
????????????textbox.ID?=?"txt";
????????????this.Controls.Add(textbox);
????????????Button?button?=?new?Button();
????????????button.ID?=?"btnOk";
????????????button.Text?=?"Ok";
????????????this.Controls.Add(button);
????????}
????}
在客戶端,我們引用2遍我們的這個自定義控件:
<myCtl:INamingConatinerControl?ID="namingCtl1"?runat="server"?/>
????????<br?/>
????????<myCtl:INamingConatinerControl?ID="namingCtl2"?runat="server"?/>
生成的HTML代碼如下:
<span?id="namingCtl1"><input?name="txt"?type="text"?id="txt"?/><input?type="submit"?name="btnOk"?value="Ok"?id="btnOk"?/></span>
????????<br?/>
????????<span?id="namingCtl2"><input?name="txt"?type="text"?id="txt"?/><input?type="submit"?name="btnOk"?value="Ok"?id="btnOk"?/></span>
上面我們可以看到比較嚴重的問題是:
2個文本框和按鈕的客戶端id居然是一樣的,這樣我們無法利用客戶端的JS語句getElementById來得到某個具體的
文本框或者按鈕.
解決辦法:
讓自定義控件實現INamingContainer(命名容器)接口,其他什么都不用做,代碼會自動為以控件的ID作為前綴進行拼接.
控件正式代碼如下:
using?System;
using?System.Collections.Generic;
using?System.ComponentModel;
using?System.Linq;
using?System.Text;
using?System.Web;
using?System.Web.UI;
using?System.Web.UI.WebControls;
namespace?BlogControl.Basic
{
????public?class?INamingConatinerControl?:?WebControl,INamingContainer
????{
????????protected?override?void?CreateChildControls()
????????{
????????????TextBox?textbox?=?new?TextBox();
????????????textbox.ID?=?"txt";
????????????this.Controls.Add(textbox);
????????????Button?button?=?new?Button();
????????????button.ID?=?"btnOk";
????????????button.Text?=?"Ok";
????????????this.Controls.Add(button);
????????}
????}
}
這樣生成的HTML代碼如下:
<span?id="namingCtl1"><input?name="namingCtl1$txt"?type="text"?id="namingCtl1_txt"?/><input?type="submit"?name="namingCtl1$btnOk"?value="Ok"?id="namingCtl1_btnOk"?/></span>
????????<br?/>
????????<span?id="namingCtl2"><input?name="namingCtl2$txt"?type="text"?id="namingCtl2_txt"?/><input?type="submit"?name="namingCtl2$btnOk"?value="Ok"?id="namingCtl2_btnOk"?/></span>
我們可以看到:
服務器端的name: 控件名 + $ + ID
客戶端ID:?????????? 控件名 + _? + ID
區別在于連接的符號不同.
這里我們提一下控件的3種ID:
1) ID - 就是我們給它命名的 ID
2) UniqueID - 控件的服務器端ID (生成HTML后的name)
3) ClientID?? - 控件的客戶端ID? (生成HTML后的id)
最后我們要提一下的是:
如果控件繼承了 CompositeControl,就不需要再實現INamingContainer接口了,因為
CompositeControl本身就實現了該接口.
總結
以上是生活随笔為你收集整理的INamingContainer接口解决多个自定义控件ID冲突的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux 文件和目录的属性
- 下一篇: [Hadoop in China 201