2011年7月14日 星期四

ASP.NET自訂控制項 - 簡單的日期選擇輸入框 DateBox (二)

此篇將延續
ASP.NET自訂控制項 - 簡單的日期選擇輸入框 DateBox

在上次的分享中,雖然這個控制項已經可以正常的運作,但是不知道有沒有人發現在設計階段(Design-Time)是有一些小問題的.


控制項在設計階段的確是可以正常顯示.


在屬性設定視窗中仍然有以下問題:

1. Date這個屬性應該是在執行階段中,用程式碼來進行存取使用的
2. ImageUrl沒有辦法像Image一樣可以使用挑選的方式進行設定

針對上述問題,我們可以透過以下方式進行處理

1. 使用Browsable Attribute隱藏屬性是否顯示
[
Browsable(false)
]
public DateTime Date
{
    get { return Convert.ToDateTime(this.DateText); }
    set { this.DateText = value.ToString(this.Format); }
}


2. 使用Editor Attribute指定屬性的編輯器
[
Editor("System.Web.UI.Design.ImageUrlEditor", typeof(UITypeEditor))
]
public string ImageUrl
{
    get
    {
        object value = this.ViewState["ImageUrl"];

        if (value == null) return "";

        return (string)value;
    }
    set { this.ViewState["ImageUrl"] = value; }
}


3. 透過DefaultValue Attribute來設定屬性預設值與Category Attribute來設定屬性的分類
[
DefaultValue("yyyy/MM/dd"),
Category("Likol")
]
public string Format
{
    get
    {
        object value = this.ViewState["Format"];

        if (value == null) return "yyyy/MM/dd";

        return (string)value;
    }
    set { this.ViewState["Format"] = value; }
}


修正完成後,就可以在設計階段中看到對應的效果





修改後的完整程式碼如下

DateBox.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using System.ComponentModel;
using System.Drawing.Design;

namespace Likol.Web.DemoWebSite.WebControls
{
    [
    ToolboxData("<{0}:DateBox runat=server>")
    ]
    public class DateBox : CompositeControl
    {
        private TextBox txtValue;
        private ImageButton ibButton;
        private CalendarExtender ceCalendar;

        [
        DefaultValue(""),
        Category("Likol"),
        Editor("System.Web.UI.Design.ImageUrlEditor", typeof(UITypeEditor))
        ]
        public string ImageUrl
        {
            get
            {
                object value = this.ViewState["ImageUrl"];

                if (value == null) return "";

                return (string)value;
            }
            set { this.ViewState["ImageUrl"] = value; }
        }

        [
        DefaultValue("yyyy/MM/dd"),
        Category("Likol")
        ]
        public string Format
        {
            get
            {
                object value = this.ViewState["Format"];

                if (value == null) return "yyyy/MM/dd";

                return (string)value;
            }
            set { this.ViewState["Format"] = value; }
        }

        [
        DefaultValue(""),
        Category("Likol")
        ]
        public string DateText
        {
            get
            {
                this.EnsureChildControls();

                return this.txtValue.Text;
            }
            set
            {
                this.EnsureChildControls();

                this.txtValue.Text = value;
            }
        }

        [
        Browsable(false)
        ]
        public DateTime Date
        {
            get { return Convert.ToDateTime(this.DateText); }
            set { this.DateText = value.ToString(this.Format); }
        }

        protected override void CreateChildControls()
        {
            this.txtValue = new TextBox();
            this.txtValue.ID = "Value";
            this.txtValue.MaxLength = 10;

            this.ibButton = new ImageButton();
            this.ibButton.ID = "Button";
            this.ibButton.ImageUrl = this.ImageUrl;

            this.ceCalendar = new CalendarExtender();
            this.ceCalendar.ID = "Calendar";
            this.ceCalendar.TargetControlID = this.txtValue.ID;
            this.ceCalendar.PopupButtonID = this.ibButton.ID;
            this.ceCalendar.Format = this.Format;

            this.Controls.Add(this.txtValue);
            this.Controls.Add(this.ibButton);
            this.Controls.Add(this.ceCalendar);
        }
    }
}

沒有留言:

張貼留言