用AJAX實現下拉框（DropDownList）的聯動

目的：學習AJAX，用於實現在 選擇“省份”下拉框時候，聯動實現在“城市”下拉框中顯示出相應的“城市”名稱 。

步驟1：在頁面CS檔案中的PAGE_LOGD方法中註冊

 protected void Page_Load(object sender, EventArgs e)
   {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(cs檔案的類名))；

  ///向頁面註冊對象,在前台用該對象調用後台方法

}

步驟2. 在頁面CS檔案中建立在前台頁面需要調用的後台方法

    [AjaxPro.AjaxMethod]
    public DataSet getBranchNameByAjax(string selectedValue)
    {

       IList<SiteBranch> list = siteBaseInfoManager.GetBranchInfo(selectedValue);
       DataSet ds = new DataSet();
       DataTable dtId = new DataTable();
       DataTable dtName = new DataTable();
       DataRow idRow, nameRow;
       dtId.Columns.Add(new DataColumn("id"));
       dtName.Columns.Add(new DataColumn("name"));
       for(int i=0;i<list.Count;i++)
        {
            idRow = dtId.NewRow();
            nameRow =dtName.NewRow();
            idRow[0] = list[i].Id;
            nameRow[0] = list[i].FZJG;

            dtId.Rows.Add(idRow);
            dtName.Rows.Add(nameRow);
        }
        ds.Tables.Add(dtId);
        ds.Tables.Add(dtName);

        return ds;
       
    } 

步驟3：在下拉框屬性中加入JS方法，如下：

 <asp:DropDownList ID="DropDownListPlace" runat="server" onchange="getBranchNameByAjax(this.value)"
                        Width="85px">
                    </asp:DropDownList>

步驟4：AJAX調用的JS函數，如下：

function getBranchNameByAjax(value)
{

 Module_DataManage_SiteInfoManage_SiteInfoManage.getBranchNameByAjax(value,fillSiteBranchByresponse);

}
function fillSiteBranchByresponse(response)
{
  if(response.value==null)
           {
                 if(response.error=="login")
                 {
                     window.location.reload();
                 }
                 alert("與伺服器中斷連線!");
            }
            else
            {
              var dtId=response.value.Tables[0];
              var dtName=response.value.Tables[1];
              document.getElementById("DropDownListBranch").disabled=false;
              document.getElementById("DropDownListBranch").length=0;
              // if(dtId==""||dtId==null){document.getElementById("DropDownListBranch").options.add(new Option("",""));}
               for(var i=0;i<dtId.Rows.length;i++)
               {
                  var id=dtId.Rows[i].id;
                  var name=dtName.Rows[i].name;
                   if(name==""||name==null){document.getElementById("DropDownListBranch").options.add(new Option("",""));}
                  document.getElementById("DropDownListBranch").options.add(new Option(name,id));
               }
           }
 
}

步驟5：在工程中加入AjaxPro.dll,見附件