【自然架構】分享 n級關聯下拉清單框

特點：

1、 使用js方法，把需要的資料一次性寫入到頁面裡，然後用js來實作關聯的效果。

2、 支援n級。

3、 封裝成了伺服器控件，是以使用非常簡單。

4、 支援在回發的時候保持狀态。

5、 支援修改記錄的時候設定預設選項。

6、 頁面設定比較靈活。

7、 采用DataSet作為資料的容器。

缺點：

1、 由于是把需要的資料一次性寫入頁面交給用戶端，是以在網速比較慢的時候，顯示頁面需要比較長的時間。

可以改進的地方：

1、 引入json，可以把需要的資料放到單獨的js檔案裡面，這樣可以減少帶寬的壓力。

2、 Ajax，按需所取。每次隻加載需要的資料。

線上示範：

　　使用省、市、區縣的資料庫進行示範。由于伺服器的網速很慢，是以需要等待一下，等頁面完全下載下傳完畢之後，才可以使用，否則會出現js腳本錯誤。頁面完全下載下傳完畢之後就沒有js腳本錯誤了。

1、 二級關聯的示範

以省、市關聯為例示範。送出表單後可以保持狀态，可以設定選項。

 protected void Page_Load(object sender, EventArgs e)

        {

            DataAccessLibrary dal = DALFactory.CreateDAL();

            string sql = @"SELECT AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '__0000') 

                            SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '____00') AND (AreaCode NOT LIKE '__0000') ";

            DataSet ds = dal.ExecuteFillDataSet(sql);

            this.lst_Area.DataSource = ds;

            this.lst_Area.DataBind();

        }

        protected void btn_Save_Click(object sender, EventArgs e)

            //送出表單後，擷取關聯下拉清單框的選項值

            //擷取ID

            string itemID = this.lst_Area.SelectedValue;

            this.txt_Value.Text = itemID;

            //擷取text

            string itemText = this.lst_Area.SelectedText;

        protected void btn_SetItemSelect_Click(object sender, EventArgs e)

            //設定下拉清單框的選項

            string itemID = this.txt_SetID.TextTrimNone;

            this.lst_Area.SetSelectedValue(itemID);

2、 三級關聯的示範

以省、市、區縣關聯為例示範。送出表單後可以保持狀态，可以設定選項。

（伺服器的網速有點慢，網頁又有點大，是以需要一點時間下載下傳。）

protected void Page_Load(object sender, EventArgs e)

                            SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '____00') AND (AreaCode NOT LIKE '__0000') 

                            SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode NOT LIKE '__0000') AND (AreaCode NOT LIKE '____00') ";

與二級關聯的代碼相對比，隻是SQL語句的地方不同，即多了一條SQL語句。其他的都是一樣的。同理，如果是四級的，那麼就在多一條SQL語句。

n級關聯，那麼就需要n條SQL語句。

3、 修改記錄示範

一般在修改記錄的時候，需要根據記錄裡的資訊設定清單框的選項，這裡示範了這種功能。

增加下面這樣的代碼即可。

 if (!Page.IsPostBack)

            {

                //6,568,572 是“遼甯省,撫順市,望花區”對于的ID

                //實際項目中，是從資料庫裡擷取，然後設定，這裡隻是一個執行個體

                this.lst_Area.SetSelectedValue("6,568,572"); 

            }

4、 頁面修飾示範

您看了上面的示範，可呢會覺得幾個下拉清單框挨在一起太難看了，這裡示範如何來做修飾。這個可以在下拉清單框的前面，加上一些修飾。

 protected virtual void SetHTML()

            //一行裡，下拉清單框前面加說明的方法

            string[] html = new string[6];

            html[0] = "省份：";

            html[2] = "城市：";

            html[4] = "區/縣：";

            this.lst_Area.ListHTML = html;

5、 Table形式的表單

在表單裡，如果是table形式的話，一行裡隻想顯示一個清單框，那麼要如何設定呢？

省份、城市、區縣各占一行的形式。

 protected override void SetHTML()

            //多行表格的方法

            html[0] = "";

            html[1] = "</td></tr>";

            html[2] = "<tr><td align=\"right\">城市：</td><td>";

            html[3] = "</td></tr>";

            html[4] = "<tr><td align=\"right\">區/縣：</td><td>";

6、 Div形式的表單

在表單裡，如果是div形式，一行裡隻想顯示一個清單框，那麼又要如何設定呢？

protected override void SetHTML()

            html[1] = "</div>";

            html[2] = "<div class=\"formLeft\">城市：</div><div class=\"formRight\">";

            html[3] = "</div>";

            html[4] = "<div class=\"formLeft\">區/縣：</div><div class=\"formRight\">";

注意：

　　由于控件自身并沒有儲存資料，是以每次通路的時候，都需要設定DataSource 屬性，并且需要綁定（DataBind）。這一點和一般的伺服器控件不一樣。

　　設定選項的時候，需要在 if (!Page.IsPostBack) 内設定，否則無法得到使用者的選擇。