ASP.NET：日曆與下拉式選單結合運用

日曆（Calendar）與下拉式選單（DropdownList）是C#裡的Web控制項，提供像是網站中日期或生日的選取。

以下主要說明如何使用下拉式選單（DropdownList）來讓日曆（Calendar）可以讓使用者「動態」選擇想要的年日月。

首先我們準備使用2個DropdownList及1個Calendar來達到效果，
希望DropdownList的年、月變動時，Calendar也能跟著變動。

步驟一：

先完成DropdownList中的Items建立：

• 年：可以回推從現在開始往回100年。
• 月：每年固定都12個月。

我們可以在Page_Load的事件中，利用"!Page.IsPostBack"在頁面第一次載入時，利用FOR迴圈將年（100個年）及月（12個月）的Items建立完畢，最後再將年、月的DropdownList預設顯示設定為現在的年月，以下完整程式碼：

protected void Page_Load(object sender, EventArgs e)
    {
        if(!Page.IsPostBack) // First time actions
        {
            for(int i=0;i<100;i++)
            {
                DropDownList1.Items.Add((DateTime.Now.Year - i).ToString());
            }
            for (int i = 0; i < 12; i++)
            {
                DropDownList2.Items.Add((DateTime.Now.Month - i).ToString());
            }
            DropDownList1.SelectedValue = Convert.ToString(DateTime.Now.Year);
            DropDownList2.SelectedValue = Convert.ToString(DateTime.Now.Year);
        }
    }

以上便是在網站運行時，透過Page_Load的特性，在第一次執行時將需要的Items新增及顯示設定完畢。

步驟二：

環境準備好後，我們要設定DropDownList的變動，可以讓Calendar的頁面跟著變動。
因此我們先將DropDownList1（年）及DropDownList2（月）的"AutoPostBack"選項打勾，
讓使用者點選DropDownList的不同值時，可以跟著更新整個頁面。

步驟三：

為了讓Calendar可以跟隨DropDownList的不同值變動時，我們需要藉助事件中"SelectedIndexChanged"，因此我們新增DropDownList1的事件：DropDownList1_SelectedIndexChanged，

Tips:為了不重複寫程式碼，可以在原始碼HTML中將DropDownList2的OnSelectedIndexChanged設定成跟DropDownList1一樣：OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged

設定好後，我們將在DropDownList1_SelectedIndexChanged的事件中調用Calendar的日期設定方式。設定的方法有兩種：1. Calendar.TodaysDate 及 2. Calendar.VisibleDate，兩種方式皆能讓Calendar隨著DropDownList而跟著變動：

指定日曆的初始時間：

 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
     
//Calendar1.TodaysDate = new DateTime(Convert.ToInt32(DropDownList1.SelectedValue),Convert.ToInt32(DropDownList2.SelectedValue),1); // 1. Calendar.TodaysDate
     
//Calendar1.VisibleDate = new DateTime(Convert.ToInt32(DropDownList1.SelectedValue), Convert.ToInt32(DropDownList2.SelectedValue), 1); // 2. Calendar.VisibleDate
    }

Calendar的日期存取或設定方式是透過new DateTime值的設定，但因為DropDownList中的值預設是"String"，因此必須使用Convert.ToInt32()轉換後才能更成整數型別。兩種方式皆能達到目的，效果的差異我還不太懂，日後瞭解後再更新上來。

結論：透過簡單的設定，我們便可以設計出可以讓使用者自由選擇年月（跳躍式）。

Read More