控件的顯示自然會離不開輸出HTMLCSSJavascript等前台的顯示內容所以開發一個控件的時候第一件事就是要知道如何輸出客戶端要顯示的內容
一選擇基類
中所有的標准控件都可以拿過來作為基類如果我們要開發的控件只是對原有的標准控件做一些功能上的加強的話（如你對TreeView的CheckBox添加一些隨動的功能）就可以直接拿標准控件過來作為基類
一般的如果開發的控件從標准裡面找不到合適的可以從三個類中來繼承
SystemWebUIControl
SystemWebUIWebControlsWebControl
SystemWebUIWebControlsCompositeControl
下面介紹下這三個類的關系跟區別
Control只提供簡單的呈現沒有對css的支持如Literal控件
WebControl建立了對控件外觀的支持適合可視化的控件來繼承 如Button
CompositeControl是派生多個控件復合的適合開發應用中的標准控件
三者的關系Control是所有控件的基類 WebControl是從Control中繼承而來CompositeControl是從WebControl中繼承而來
二如何呈現
Control的呈現
Control類中的呈現是通過方法Render來實現的Render的原型
protected internal virtual void Render(HtmlTextWriter writer){}
HtmlTextWriter writer 參數是在運行時有調用Render方法的框架所提供所以我們可以同過重寫Render方法來實現內容的呈現
HelloWorld示例
public class HelloWorld : Control{
protected override void Render(HtmlTextWriter writer)
{
writerWriteLine(Henllo World);
}
}
編譯之後在新的項目中添加對dll文件的使用會呈現出Hello World
Control輸出html內容
在Render方法中我們要實現輸出html標簽跟樣式可以借助於HtmlTextWriterTagHtmlTextWriterAttributeHtmlTextWriterStyle這三個枚舉來實現HtmlTextWriterTag是表示Html標簽HtmlTextWriterAttribute是表示標簽上的屬性HtmlTextWriterStyle是表示樣式
Picture示例
public class PicShow : Control
{
protected override void Render(HtmlTextWriter writer)
{
writerAddStyleAttribute(HtmlTextWriterStyleTextAlign center);
writerAddStyleAttribute(HtmlTextWriterStyleHeight px);
writerAddStyleAttribute(HtmlTextWriterStyleWidth px);
writerRenderBeginTag(HtmlTextWriterTagDiv);
//Create Img Tag
writerAddAttribute(HtmlTextWriterAttributeSrc 你的圖片地址);
writerAddStyleAttribute(HtmlTextWriterStyleWidth px);
writerAddStyleAttribute(HtmlTextWriterStyleHeight px);
writerRenderBeginTag(HtmlTextWriterTagImg);
writerRenderEndTag();
//End Of Div
writerRenderEndTag();
}
}
當你指定好上面的圖片地址後就可以顯示出指定的圖片同過查看源文件我們可以發現客戶端生成的源代碼就是我們所要創建的html內容
WebControl的呈現
WebControl的呈現分為三步呈現開始標簽呈現標簽中的內容呈現結束標簽分別實現的方法為RenderBeginTagRenderContentsRenderEndTagRenderBeginTag所生成的標簽是有WebControlTagKey或則WebControlTagName屬性來決定的WebControlTagKey的默認呈現標簽為所以如果我們要改變剛開始的呈現標簽可以通過重寫WebControlTagKey或則WebControlTagName來實現
注意的就是通常我們要對外圍的標簽進行控制時我們不會去重寫RenderBeginTag方法而是去重寫TagKey屬性另外如果我們重寫了RenderBeginTag方法就一定要去重寫RenderEndTag方法
另外WebControl提供了AddAttributeToRender方法來添加控件的屬性需要注意的一點你重寫AddAttributeToRender方法添加屬性時也要去調用baseAddAttributeToRender方法
我們用WebControl來實現上面的PicShow控件
public class PictureWeb : WebControl
{
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTagDiv;
}
}
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
baseAddAttributesToRender(writer);
writerAddStyleAttribute(HtmlTextWriterStyleTextAlign center);
writerAddStyleAttribute(HtmlTextWriterStyleWidth px);
writerAddStyleAttribute(HtmlTextWriterStyleHeight px);
}
protected override void RenderContents(HtmlTextWriter writer)
{
writerAddAttribute(HtmlTextWriterAttributeSrc你的圖片地址);
writerAddStyleAttribute(HtmlTextWriterStyleWidth px);
writerAddStyleAttribute(HtmlTextWriterStyleHeight px);
writerRenderBeginTag(HtmlTextWriterTagImg);
writerRenderEndTag();
}
}
在上面的代碼中我們首先要創建div標簽所以修改TagKey屬性為了給外層的div添加屬性所以重寫了AddAttributesToRender方法最後在呈現的Img在RenderContents方法中實現創建外層的< DIV >跟結束的< /DIV >我們交給了RenderBeginTag跟RenderEndTag去實現而無需重寫
CompositeControl的呈現
因為CompositeControl繼承於WebControl所以也有屬性TagKey來決定開始的標簽我們要實現CompositeControl的呈現只需添加域即可以如我們的控件需要有TextBox控件可以表示為private TextBox _txtInput然後通過重寫CreateChildControls方法通過thisControlsAdd方法來呈現
From:http://tw.wingwit.com/Article/program/net/201311/11674.html
