asp.net控件設計時支持(1)----基礎認識

文章出處：http://www.cnblogs.com/Clingingboy/archive/2006/09/17/506741.html

大家好象對控件設計時的討論不多,是不是感覺功能實現就可以了,當然設計時支持是可有可無的.我敢說沒有設計時支持的話,可能很多人不喜歡.net,正因爲有設計時支持,更降低了.net學習的門檻.這次就簡單的來看看,如果簡單的實現你常用的幾個功能.

一.ControlDesigner類

ControlDesigner作爲web服務器控件的設計器的基類,你可以擴展此類. 總之你瞭解這個類以後你會發現原來你平時看到的控件能夠在VS2005設計時中完美的呈現也是微軟幫你做的.既然如此,作爲一個完美的控件也應該配有設計時的支持,有時候可以讓開發達到事半功倍的效果.這裏先不介紹這個類其中具體的方法和屬性了.我們接了會具體使用的.

二.獲取設計時關聯控件HTML

(1) 定義控件

讓我們來定義兩個最簡單的控件

  

  public class DesginControl : Control
    {

        public string Text
        {
            get
            {
                String s = (String)ViewState["Text"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["Text"] = value;
            }
        }
        protected override void Render(HtmlTextWriter writer)
        {
            writer.Write(Text);
        }
    }

    public class DesginWebControl :WebControl
    {
        public string Text
        {
            get
            {
                String s = (String)ViewState["Text"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["Text"] = value;
            }
        }
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.Write(Text);
        }
    }

(2)第一次測試

好了,兩個控件一個派生自Control,一個派生於WebControl,編譯後把他們一起拖到設計器上吧,看看效果


圖一

DesignControl在Text屬性爲空的時候,即沒有呈現任何內容的時候,設計器上會出現上面這樣的文字

DesignWebControl更離譜,看到DesignWebControl文字右邊的小方框了沒,這個就是其默認呈現的效果.

(2)第二次測試

下面再次給他們兩加上Text屬性後的效果,再看效果


圖二

DesignControl顯示效果很好,
DesignWebControl也可以達到跟DesignControl一樣的效果,但多了項功能.
其可以允許在設計器中自動的拖拉控件改變控件的寬度和高度,看到右下腳的鼠標和控件中間控件的115和42沒.很不幸DesignControl沒有這樣的功能.爲什麼呢?

(4)第三次測試

我們再來最後的一次測試.我們再次將Text屬性的內容去掉
效果如下


圖三

DesignControl恢復回來了,不好的是DesignWebControl成了一白板:)

(6)解決方案來了
其實上面的這兩個控件跟Literal和Label控件像極了,其本身使用一點問題也沒有,爲了設計時更好看,也爲了保護我們的眼睛看的舒服點:),我們能做點什麼.
一切的一切都是因爲.net提供了設計時支持,不然的話,恐怕你連上面的幾個界面也看不到了.還好我們可以自己來改變它.那便是利用.net的設計時支持.

(7)每個控件都應該有各自的設計時支持

不知道這句話,大家是否認同,即使控件現在可能不需要,但請做好以後的準備,先空定義一個也可以

下面我們討論下label控件.

7.1當Text屬性爲空時,設計器呈現爲"["加控件ID的值"]",如[Label1],注意這個是設計器呈現,而非生成的效果呈現.
7.2Control類沒有width和height屬性,當然設計時也就不支持更改了.

(8)實現

上面說了一大堆廢話,還是來看看如何實現吧

public class DesginWebControlDesigner : ControlDesigner
    {
        private DesginWebControl webControl;

        public DesginWebControlDesigner()
        { }

        //初始化控件設計器
        public override void Initialize(IComponent ponent)
        {
            base.Initialize(ponent);


            webControl = (DesginWebControl)ponent;
            webControl.Text = "DesginWebControl";
            
        }

        //調整控件的大小
        public override bool AllowResize
        {
            get
            {
                return false;
            }
        }

        //獲取設計器HTML
        public override string GetDesignTimeHtml()
        {
            if (webControl.Text.Length > 0)
            {
                string spec = "<font color='red'>{0}</font>";
                return String.Format(spec, webControl.Text);
            }
            else
                return GetEmptyDesignTimeHtml();
        }

        //定義一個空的實現
        protected override string GetEmptyDesignTimeHtml()
        {
            string spec = "[{0}]";
            return String.Format(spec, webControl.ID);
        }
    }

(1)Initialize方法初始化控件設計時的狀態
(2)AllowResize屬性默認爲True,設置爲False,控件就無法在設計器了調整控件大小了
(3)GetDesignTimeHtml方法 最終獲取控件在設計器中的狀態
(4)GetEmptyDesignTimeHtml方法 定義一個空的實現

定義好以後再將控件與設計器關聯起來

    [Designer(typeof(DesginWebControlDesigner))]
    public class DesginWebControl :WebControl
    {
    }

好了,現在就可以來測試下了


圖四

效果跟定義的一樣,這個就是設計時的效果了,當然生成的頁面可不是這樣的,這個要區分清楚.
這時我們再來修改Text屬性,和控件的BackColor屬性,發現Text改變了,BackColor屬性在更改後設計器效果不變.

注意點:
(1)GetDesignTimeHtml方法呈現的將是控件設計器上最終的效果,使用時,你無法更改在此方法定義的效果,Initialize方法初始化的效果可以更改.
(2)頁面呈現效果與設計器呈現效果不一定相同

講了這麼多就講了最基礎的東西,很容易理解的東西,大家可以瞭解下.

示例代碼