Asp.net控制元件開發學習筆記(七)—-WebControl基類

範大腳腳發表於2017-12-21
ASP.NET控制元件筆記Web
WebControl基類
     在Asp.net控制元件開發中，WebControl基類給我們提供了對於控制元件的Style更加靈活的解決方案，因為在System.Web.UI.Control基類中只能手動的輸入呈現在客戶端的程式碼，但如果開發的伺服器控制元件對style的要求較高。那Control基類的侷限性就顯而易見了，而繼承WebControl類作為基類將會是很好的選擇。
     System.web.UI.WebControls.Webcontrol直接繼承與Control類。在繼承了Control的特性的基礎上，WebControl基類不僅在生成客戶端html使用了另一種更好的render方式，並且還提供了對於老版本瀏覽器的相容。
 
WebControl的ControlStyle屬性
 
     ControlStyle屬性其實是System.Web.UI.WebControls.Style的一個例項，這個屬性用於讀取或者設定常用的CSS類，以下是System.Web.UI.WebControls.Style的屬性和CSS屬性的對應關係。
Style的屬性
CSS標準屬性
BackColor
background-color
BorderColor
border-color
BorderStyle
border-style
BorderWidth
border-width
CssClass
CSS的類名
Font
Font weight, style, family, and so on
ForeColor
color
Height
height
width
width
 
而在ControlStyle.Font是一些設定字型的屬性，是System.Web.UI.FontInfo物件的例項。和標準CSS屬性的對照如下表：
 
Font 屬性
CSS標準屬性
Bold
font-weight: bold
Italic
font-style: italic
Name
font-family
Names
font-family
Overline
text-decoration: overline
Underline
text-decoration: underline
Size
font-size
Strikeout
text-decoration: line-through
 
WebControl基類ControlStyle屬性的簡化
   下面這行程式碼:
      webcontrol.ControlStyle.BorderWidth = 1;
和
 
   webcontrol.BorderWidth = 1;
程式碼是等價的，WebControl基類可以不通過ControlStyle屬性而訪問ControlStyle內的成員，這樣在前臺可以直接對控制元件進行style設定，剛才的後臺程式碼於如下前臺程式碼是等價的：
<cc:WebControl id=”WebControl” runat=”server” borderwidth=”1″/>
 
WebControl的Style屬性
因為ControlStyle屬性只暴露了一部分可用於操控CSS的屬性，而除了上述ControlStyle暴露的基本的CSS屬性設定之外，WebControl基類還為我們提供了Style屬性用於對CSS進行精確完整的操作，可以用如下圖讓概念更加清晰:
 
Style屬性是System.Web.UI.CssStyleCollection這個類的例項，style屬性大多在.aspx檔案中用到，比如:
<asp:Button ID=”Button1″ runat=”server” Text=”Button” style=” background:blue;”   />
而與上面對Style賦值等價的後臺程式碼則是：
Button1.Style[“background”] = “blue”;
或者
Button1.Style.Add(“background”, “blue”);
 
一個新的Render系統
   和整合Control並重寫Render方法不同，WebControl給我們提供了一個新的系統用於Render控制元件。下面寫一個Label的Demo：
 
Demo:label控制元件
程式碼如下:
    [ToolboxData(“<{0}:label runat=server></{0}:label>”),DefaultProperty(“Text”)]
    public class Label : WebControl
    {
        public Label(): base(HtmlTextWriterTag.Span)
        {
        }
        public virtual string Text
        {
            get
            {
                object text = ViewState[“Text”];
                if (text == null)
                    return string.Empty;
                else
                    return (string)text;
            }
            set
            {
                ViewState[“Text”] = value;
            }
        }
        override protected void RenderContents(HtmlTextWriter writer)
        {
            writer.Write(Text);
        }
 }
 在建構函式中，我們可以看出public Label(): base(HtmlTextWriterTag.Span)和從前繼承於Control基類的方式有所不同，通過HtmlTextWriterTag列舉物件，我們所有生成的內容都會在Html的<span>標籤內.而在最後用RednerContents函式來render內容時並不需要自己寫相應的html標籤，而是建構函式內的選擇了span，則webcontrol幫你生成相應的html標籤。
 
 WebControl本身內建的render系統分為四個函式，依次進行，可以用下圖表示： 
其中AddAttributesToRender函式在後面說到，根據順序我們可以發現，WebControl在生成Html方面要大大強於Control基類的生成方式。就這個Label控制元件來說，生成的過程會是
1:RenderBeginTag
根據HtmlTextWriterTag列舉型別來確定生成的html標籤的種類，在這裡這個方法會生成
<span
2:AddAttributesToRender函式生成控制元件相關的html屬性在這裡可能會接著上面生成
<span title=”xx”
3:renderContents函式生成控制元件中的內容，在這個Label控制元件會接著生成類似如下：
<span title=”xx”>這裡是文字內容
4：RenderEndTag這個函式也是根據HtmlTextWriteTag列舉來確定生成的html關閉標籤，在這裡會接著上面生成：
<span title=”xx”>這裡是文字內容</span>
 
因為在這個Demo中我們只覆蓋了RenderContents函式，而沒有涉及到AddAttributesToRedner函式,而RenderBeginTag和RenderEndTag會根據基類建構函式中的HtmlTextWriterTag列舉型別生成相應的html標籤.如果在前臺這麼用這個控制元件：
<asp:Label runat=”server” Text=”測試Text”></asp:Label>
 
則render後生成相應的Html程式碼是:
<span>測試Text</span>
 
 
這樣的render方式.可以讓你省去手動輸入html，而只需要過載你需要自己實現的步驟。在通常情況下RenderBeginTag和RenderEndTag幾乎很少被過載。而被過載最多的也就是AddAttributeToRender和RenderContents方法.
 
AddAttributeToRender方法
  AddAttributeToRender方法是最常用的,這個方法通過鍵/值對新增屬性，比如前幾章的TextBox控制元件，如果Render的過程中引入了這個方法，那麼會容易很多.頁面的Render部分只需要如下一些程式碼即可:
   
        public Textbox(): base(HtmlTextWriterTag.Input)
        {
 
        }
       override protected void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddAttribute(“type”, “text”);
            writer.AddAttribute(“name”, UniqueID);
            writer.AddAttribute(“value”, Text);
            base.AddAttributesToRender(writer);
        }
需要特別注意的是，在override   AddAttributesToRedner方法時，一定不要忘了加上最後的那句base.AddAttributesToRender(writer);
 
本文轉自CareySon部落格園部落格，原文連結：http://www.cnblogs.com/CareySon/archive/2009/10/10/1580277.html如需轉載請自行聯絡原作者


相關文章