【翻譯】在ASP.NET中實現彈出日曆

原文出處：http://www.codeproject.com/aspnet/popupcalendarcontrol.asp

在ASP.NET中實現彈出日曆
作者： Isaias Formacio-Serna

可以找到很多Calendar控制項的實現，但是我在使用它們的時候發現了一些問題，其原因在於這些控制項的Javascript跟ASP.NET不能協同工作。我的這個控制項可以讓你在頁面上放置一個能夠彈出但不會傳回的日曆，你可以儘可能多地在同樣一個表單中使用它。

 

 

 

介紹

在網上有很多這種控制項的實現。我的這個控制項是基於Paul Kilmer的工作，但是我在它不能工作的地方作了一些修改。大多數修改是把HMTL控制項換成了ASP.NET控制項，因為這樣可以讓我更好的控制控制項的後台編碼，你將在代碼中看到這種情況。

建立控制項

首先，你需要建立一個新的控制項，在這個例子裡，我把它叫做 ctlCalendar 。在這個控制項中，你需要添加一個Web表單工具箱中的 TextBox (TextBox1)控制項，添加一個HTML工具箱中的 Button (Button1)控制項 ，然後添加一個Web表單工具箱中的 Panel (pnlCaledar)控制項 ，最後在這個Panel 中，添加一個Web表單工具箱中的 Calendar (Calendar1) 控制項。請注意，我是使用HTML工具箱的Button1 控制項，因為在使用者點擊它時我不需要它向伺服器傳值。

你的控制項頁面看起來會是這樣：

 

下面是ctlCalendar.ascx的代碼：

<asp:textbox id="TextBox1" runat="server"></asp:textbox>

<input type="button" id="Button1" runat="server" value="..."><br>

<asp:Panel id="pnlCalendar" runat="server"

     style="POSITION: absolute">

 <asp:calendar id="Calendar1" runat="server" CellPadding="4"

      BorderColor="#999999" Font-Names="Verdana" Font-Size="8pt"

      Height="180px" ForeColor="Black" DayNameFormat="FirstLetter"

      Width="200px" BackColor="White">

  <TodayDayStyle ForeColor="Black" BackColor="#CCCCCC"></TodayDayStyle>

  <SelectorStyle BackColor="#CCCCCC"></SelectorStyle>

  <NextPrevStyle VerticalAlign="Bottom"></NextPrevStyle>

  <DayHeaderStyle Font-Size="7pt" Font-Bold="True" BackColor="#CCCCCC">

  </DayHeaderStyle>

  <SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666">

  </SelectedDayStyle>

  <TitleStyle Font-Bold="True" BorderColor="Black" BackColor="#999999">

  </TitleStyle>

  <WeekendDayStyle BackColor="LightSteelBlue"></WeekendDayStyle>

  <OtherMonthDayStyle ForeColor="#808080"></OtherMonthDayStyle>

 </asp:calendar>

</asp:Panel>

實現功能

現在，我們將使用兩個函數來實現它的功能。第一個是 Page_Load ，用它來初始化我們的控制項；第二個是 Calendar1_SelectionChanged。

private void Page_Load(object sender, System.EventArgs e)

{

    if (!Page.IsPostBack)

    {

        this.TextBox1.Text = System.DateTime.Now.ToShortDateString();

        this.pnlCalendar.Attributes.Add("style",

             "DISPLAY: none; POSITION: absolute");

    }

    else

    {

        string id = Page.Request.Form["__EVENTTARGET"].Substring(0,

                    Page.Request.Form["__EVENTTARGET"].IndexOf(":"));

        if (id != this.ID)

        {

            this.pnlCalendar.Attributes.Add("style",

                 "DISPLAY: none; POSITION: absolute");

        }

        else

        {

            this.pnlCalendar.Attributes.Add("style","POSITION: absolute");

        }

    }

    Page.RegisterClientScriptBlock("Script_Panel" + this.ID,

      "<script> function On"+this.ID+