下拉式菜單(DropDownList)連動的選擇

昨晚有網友於QQ問到如下問題，不過當時在忙於另外一篇博文編寫，http://www.cnblogs.com/insus/archive/2013/05/09/3066347.html 沒能及時回應，現在有時間了。
Insus.NET嘗試演示一下，希望能讓網友有所了解。



這個算是多下拉控件連動功能，很多Javascript高手看到這要求，就會說Javascript或是JQuery可以輕松搞掂。是的，沒有錯。
不過，Insus.NET還是使用ASP.NET 來實現它。
解決問題，計划在程序中演示，不必涉及數據庫了，因此先在站點的App_Code目錄下，准備好兩個對象，參考如下，一個是存儲糧食的分類，另外一個是以每種糧食分類的糧食。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for Category
/// </summary>
namespace Insus.NET
{
    public class Category
    {
        private int _Category_nbr;
        private string _Category_Name;

        public int Category_nbr
        {
            get { return _Category_nbr; }
            set { _Category_nbr = value; }
        }
        public string Category_Name
        {
            get { return _Category_Name; }
            set { _Category_Name = value; }
        }
                
        public Category()
        {
            //
            // TODO: Add constructor logic here
            //
        }

        public Category(int category_nbr, string category_Name)
        {
            this._Category_nbr = category_nbr;
            this._Category_Name = category_Name;        
        }
    }
}

另一個對象。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for Foodstuff
/// </summary>
namespace Insus.NET
{
    public class Foodstuff
    {
        private int _Foodstuff_nbr;
        private int _Category_nbr;
        private string _Foodstuff_Name;

        public int Foodstuff_nbr
        {
            get { return _Foodstuff_nbr; }
            set { _Foodstuff_nbr = value; }
        }

        public int Category_nbr
        {
            get { return _Category_nbr; }
            set { _Category_nbr = value; }
        }

        public string Foodstuff_Name
        {
            get { return _Foodstuff_Name; }
            set { _Foodstuff_Name = value; }
        }

        public Foodstuff()
        {
            //
            // TODO: Add constructor logic here
            //
        }

        public Foodstuff(int foodstuff_nbr, int category_nbr, string foodstuff_Name)
        {
            this._Foodstuff_nbr = foodstuff_nbr;
            this._Category_nbr = category_nbr;
            this._Foodstuff_Name = foodstuff_Name;
        }
    }
}

接下來，分別對上面兩個對象填充數據，為演示作准備：

填充另一個，數據大約如下。

 
哇，看過Insus.NET博客的網友一定會說，Insus.NET在演示所有DropDownList，CheckboxList，或是RadioButtonlist等ListItem的數據源，都會取不同的資料來展示。呵呵！

再創建另外一個函數吧，是從Insus.NET.Foodstuff類別中，以category來過濾數據。這個可為糧食分類有異動時，過濾出相對應分類的糧食。

OK,數據准備好了，根據用戶的要求，在站點創建一個網頁，並拉放兩個DropDownList控件和兩個TextBox控件，太約如下：

在網頁加載時，Insus.NET給兩個DropDownList控件綁定數據。注意思，數據源是List<T>泛型，而不是陣列或是DataTable等。把泛型綁定給DropDownList時，需要用到Select()方法，把字段域擴展出來。

兩個DropDownList控件在網頁裝載時，數據與狀態加載，第一個下拉有數據綁定，第二個下拉控件只顯示"--選擇--"，由於它的數據綁定變化是隨第一個下拉控件選擇的異動而作相應變化。為了第一個下拉控件能每選擇一次，讓它能PostBack，得啟用它的一個屬性AutoPostBack="true" ，另外有選擇變化異動時，能對第二個下拉控件綁定數據，因此，你得在第一個下拉控件使用OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"事件。



上圖中，第76行代碼，是獲取第一個下拉控件選擇的值，當用戶選擇“--選擇--”時，返回值為0。其實，如果你想這樣判斷的話，可以在網頁綁定時，就給它一個值，如下圖中的第25行與第28行代碼。這樣就不必在獲取值時，判斷它是否為string.Empty了，而且為Empty時，返回0。
第79行至85行代碼是為第二個下拉控件綁定數據。
第88與89行代碼，是為兩件文本框分別賦值，它是隨兩個下拉控件值變化而變化喔。



寫到這里，還有一點點沒有完成，就是第二個下拉控件變化時，第二個文本框值也應該隨選擇的值而動態賦值。因此在第二個下拉控件添加：



還得去.aspx.cs寫事件：

完成了，當然少不了動畫演示：



算完成了。如果你的程序寫到些，足可以上傳至服務器，不過，如果按Insus.NET的想法，還有些地方可以重構一下的喔，細心的網友一定看到很多地方代碼有冗余。如果你有興趣的話，可以看看Insus.NET是怎樣來重構它們的。重構過程看動畫，或是你可以下載下來，使用Internet Explorer(IE)來看。


 
最終的源程序，也可以下載喔：
http://download.cnblogs.com/insus/ASPDOTNET/DropDownList_Dependancy.zip