ASP.NET 魔法學院

在上一篇文章中提到了純 JavaScript 的 The Coolest DHTML Calendar 日期選擇器，雖然它的使用方式已經很相當便利，可是需要在有日期選擇器的頁面做重覆的動作對程式開發人員來說是一件相當無趣的事。

本文就是要實作將這個 The Coolest DHTML Calendar 日期選擇器封包成日期選擇的伺服器控制項，讓開發人員可以直接拖曳這個控制項在頁面上即可使用。

首先看一下 The Coolest DHTML Calendar 它的使用方式，它需要在 Head 區段加入加下的定義，包含一個 css 樣式表檔案及三個 JavaScript 檔案。

<!-- calendar stylesheet --> <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" /> <!-- main calendar program --> <script type="text/javascript" src="calendar.js"></script> <!-- language for the calendar --> <script type="text/javascript" src="lang/calendar-en.js"></script> <!-- the following script defines the Calendar.setup helper function, which makes adding a calendar a matter of 1 or 2 lines of code. --> <script type="text/javascript" src="calendar-setup.js"></script>

然後在需要彈出日期選擇的控制項上加入下列初始化動作即可使用。

<input type="text" name="date" id="f_date_b" /> <button type="reset" id="f_trigger_b">...</button> <script type="text/javascript"> Calendar.setup({ inputField : "f_date_b", // id of the input field ifFormat : "%m/%d/%Y %I:%M %p", // format of the input field showsTime : true, // will display a time selector button : "f_trigger_b", // trigger for the calendar (button ID) singleClick : false, // double-click mode step : 1 // show all years in drop-down boxes (instead of every other year as default) }); </script>

有了以上的資訊，就可以著手進行日期控制項的實作了。

首先新增一個「Web 控制項程式庫」，然後加入一個「Web 自訂控制項」命名為 TBDateEdit 類別。TBDateEdit 的作法如下

1.繼承 System.Web.UI.WebControls.CompositeControl 類別，製作複合式控制項。
2.覆寫 OnLoad 方法，輸出 Head 所需的 css 及 JavaScript 參考檔案。
3.覆寫 CreateChildControls 方法，建立一個 TextBox 及 HtmlButton。
4.覆寫 Render 方法，輸出日期控制項的 JavaScript。
5.新增 Text 屬性，輸入文字內容。

在控制項的程式碼中，預設 JavaScript 的路徑為 Web 應用程式下的 "ClientScript/jscalendar" 子資料夾；所以 Web 專案需要將 The Coolest DHTML Calendar 相關的 JavaScript 複製至該資料夾。

Imports System Imports System.Collections.Generic Imports System.ComponentModel Imports System.Text Imports System.Web Imports System.Web.UI Imports System.Web.UI.WebControls Namespace WebControls < _ DefaultProperty("Text"), _ ToolboxData("<{0}:TBDateEdit runat=server></{0}:TBDateEdit>")> _ Public Class TBDateEdit Inherits System.Web.UI.WebControls.CompositeControl Private FTextBox As New TextBox() Private FButton As New HtmlControls.HtmlButton() ''' <summary> ''' 輸入文字內容。 ''' </summary> < _ Description("輸入文字內容。"), _ DefaultValue("") _ > _ Public Property Text() As String Get Return FTextBox.Text End Get Set(ByVal value As String) FTextBox.Text = value End Set End Property ''' <summary> ''' 覆寫 OnLoad 方法。 ''' </summary> Protected Overrides Sub OnLoad(ByVal e As System.EventArgs) Dim oLink As New System.Web.UI.HtmlControls.HtmlLink() Dim sUrl As String Dim sScriptPath As String '預設 JavaScript 的路徑為 Web 應用程式下的 "ClientScript/jscalendar" 子資料夾 sScriptPath = "~/ClientScript/jscalendar/" 'Header 區段加入 css 樣式表檔案。 If Me.Page.Header.FindControl("CalendarCss") Is Nothing Then sUrl = sScriptPath & "calendar-blue2.css" sUrl = Me.Page.ResolveUrl(sScriptPath & "calendar-blue2.css") oLink.Href = sUrl oLink.Attributes("rel") = "stylesheet" oLink.Attributes("type") = "text/css" oLink.Attributes("media") = "all" oLink.Attributes("title") = "blue2" oLink.Attributes("charset") = "C" oLink.ID = "CalendarCss" Me.Page.Header.Controls.Add(oLink) End If '加入日期控制項所需的 JavaScript 檔案。 sUrl = sScriptPath & "calendar.js" sUrl = Me.Page.ResolveUrl(sUrl) Me.Page.ClientScript.RegisterClientScriptInclude("calendar", sUrl) sUrl = sScriptPath & "lang/calendar-big5.js" sUrl = Me.Page.ResolveUrl(sUrl) Me.Page.ClientScript.RegisterClientScriptInclude("calendar-lang", sUrl) sUrl = sScriptPath & "calendar-setup.js" sUrl = Me.Page.ResolveUrl(sUrl) Me.Page.ClientScript.RegisterClientScriptInclude("calendar-setup", sUrl) MyBase.OnLoad(e) End Sub ''' <summary> ''' 建立子控制項。 ''' </summary> Protected Overrides Sub CreateChildControls() Me.Controls.Clear() FTextBox.ID = "TextBox" FButton.ID = "Button" FButton.InnerText = "..." Me.Controls.Add(FTextBox) Me.Controls.Add(FButton) End Sub ''' <summary> ''' 傳送伺服器控制項內容至提供的 HtmlTextWriter 物件，這個物件會寫入用戶端上所要呈現的內容。 ''' </summary> ''' <param name="writer"></param> ''' <remarks></remarks> Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) Dim sScript As String '輸出日期控制項的 JavaScript sScript = "Calendar.setup({" & vbNewLine & _ "inputField:'" & FTextBox.ClientID & "'," & vbNewLine & _ "ifFormat:'%Y/%m/%d'," & vbNewLine & _ "showsTime:true," & vbNewLine & _ "button:'" & FButton.ClientID & "'," & vbNewLine & _ "step:1" & "});" & vbNewLine 'FButton.Attributes("onclick") = FTextBox.ClientID & ".click();" Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), Me.ClientID, sScript, True) MyBase.Render(writer) End Sub End Class End Namespace

完成以上動作後，就建置這個控制項程式庫。再來加入一個新網站來測試這個控制項，首先要記得將 The Coolest DHTML Calendar 相關的 JavaScript 複製至 ClientScript/jscalendar 資料夾。

然後工具列中將日期控制項拖曳至頁面上，在頁面上配置二個日期控制項及一個按鈕。會放置二個日期控制項，是要測試在多個日期控制項時，輸出的 css 及 JavaScript 參考是否會重覆，及輸出的 JavaScript 是否正確。而按鈕是要測試 PostBack 後，TextBox 中的值是否會被保存。

<form id="form1" runat="server"> <div> <bee:TBDateEdit ID="TBDateEdit1" runat="server" /> <br /> <br /> <bee:TBDateEdit ID="TBDateEdit2" runat="server" /> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </form>

執行結果如下

這個控制項實作只是初步教學，這個日期控制項還需要做一些擴充，例如加入語系設定、樣式設定、日期格式等屬性，才是一個完整的日期控制項。

程式碼下載：TBDateEditDemo.zip
 

ASP.NET 魔法學院