用ajax實現dropdownlist多級聯動執行個體

 

經常用dropdownlist綁定資料，涉及到多級聯動的問題，重新整理頁面不太好，於是花了點時間，用AjaxPro來實現無重新整理綁定DropDownList資料的問題。
--------------------------------------------------------------------------------

執行個體：
實現省、市、縣三級DropDownList資料無重新整理綁定
思想：
在頁面載入時從資料庫中讀取並綁定省份資料，然後根據省份當前的DropDownList所選id來綁定市資料，最後根據市的DropDownList所選id來綁定縣資料。
然後當使用者改變省的DropDownList，用AjaxPro技術傳值(當前所選的省id),根據所選的省id來綁定市與縣的DropDownList，當改變市的DropDownList時原理一樣。.cs頁面從資料庫中等到的資料以xml的形式傳回給頁面，然後用javascript來分析處理綁定。
看不明白沒關係，看下代碼實現就明白了。
示：

準備：
首先需要將AjaxPro.2部署到您的項目中，如果部署AjaxPro.2請查看這裡《查看如何部署ajaxpro》。
代碼：
頁面中的三個dropdownlist,分別是省、市、縣：
 
<asp:DropDownList ID="ddlp" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlc" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlx" runat="server">
</asp:DropDownList>頁面載入時綁定三個DropDownList控制項：
protected void Page_Load(object sender, EventArgs e)
{
#region 註冊無重新整理
AjaxPro.Utility.RegisterTypeForAjax(typeof(alldeadmin_usercontrol_areaUc));
#endregion
if (!this.IsPostBack)
{
this.bindproData();//綁定省份
this.bindcityData(); //市資料繫結
this.bindxianData();//縣級資料繫結
}
}具體對三個DropDownList控制項綁定的代碼：
/// <summary>
/// 省份資料dropdownlist綁定
/// </summary>
private void bindproData()
{
BLL.alldeadmin.areabll myareabll = new areabll();
this.ddlp.DataSource = myareabll.GetAllListp();
this.ddlp.DataTextField = "proName";
this.ddlp.DataValueField = "id";
this.ddlp.DataBind();
this.ddlp.Attributes.Add("onchange", "loadCity(opDdlSelect(this));");//當省下拉式清單改變時綁定市與縣事件，此事件處理常式通過javascript來實現，下面將提到。
}
/// <summary>
///市資料dropdownlist綁定
/// </summary>
private void bindcityData()
{
this.ddlc.DataSource = this.returncityData(this.ddlp.SelectedValue);
this.ddlc.DataTextField = "cityName";
this.ddlc.DataValueField = "id";
this.ddlc.DataBind();
this.ddlc.Attributes.Add("onchange", "loadXian(opDdlSelect(this))");//當市下拉式清單改變時綁定縣事件，此事件處理常式通過javascript來實現，下面將提到。

}
/// <summary>
///縣資料dropdownlist綁定
/// </summary>
private void bindxianData()
{
this.ddlx.DataSource = this.returnxianData(this.ddlc.SelectedValue);
this.ddlx.DataTextField = "xianName";
this.ddlx.DataValueField = "id";
this.ddlx.DataBind();
}從資料庫中返回某市的資料和縣的資料:
  /// <summary>
    /// 返回市資料
    /// </summary>
    private DataSet returncityData(string state)
    {
        BLL.alldeadmin.areabll myareabll = new areabll();
        string tw = " where ProId=" + state;
        return myareabll.GetListc(tw);
    }
    /// <summary>
    /// 返回縣資料
    /// </summary>
    private DataSet returnxianData(string state)
    {
        BLL.alldeadmin.areabll myareabll = new areabll();
        string tw = " where cityId=" + state;
        return myareabll.GetListx(tw);
    }這裡是和aspx頁面無重新整理返回資料的地方：
/// <summary>
    /// 無重新整理向頁面返回市級資料
    /// </summary>
    /// <param name="state"></param>
    /// <returns></returns>
    [AjaxPro.AjaxMethod]
    public string getcity(string state)
    {
        return returncityData(state).GetXml();
    }

    /// <summary>
    /// 無重新整理向頁面返回縣級資料
    /// </summary>
    /// <param name="state"></param>
    /// <returns></returns>
    [AjaxPro.AjaxMethod]
    public string getxian(string state)
    {
        return returnxianData(state).GetXml();
    }

前台.aspx頁面的javascript處理模組
javascript是對xml處理的，我返回的xml結構為

<script language="javascript" type="text/javascript">
<!--
//返回當前ddl的值(輔助函數）
function opDdlSelect(objectSelect)
{
    if(objectSelect!=null)
    {
        return objectSelect.options[objectSelect.selectedIndex].value;
    }
}

//市級資料處理
　function loadCity(state)
　　{
　　alldeadmin_usercontrol_areaUc.getcity(state,callback);//裝載市資料
　　alldeadmin_usercontrol_areaUc.getxian(state,callbackxian);//裝載縣資料
　　}
　　
　　function callback(res)  //回呼函數
        {
             var drp2 = document.getElementById("<%=ddlc.ClientID %>");////因為這個例子是作為使用者控制項在啟動並執行，所以不能用 javascript直接引用控制項名稱，需要用控制項.ClientID 屬性來擷取控制項的用戶端id。
             var iteml=drp2.options.length -1;//清空dropdownlist裡的項內容
　　        for(var i = 0;i<=iteml;i++)
　　        {
　　        drp2.remove(iteml-i);
　　        }
　　        var oDoc = new ActiveXObject("MSXML2.DOMDocument");
　　        result=res.value;//取得xml資料
　　        oDoc.loadXML(result);
　　        items = oDoc.selectNodes("//NewDataSet/ds");
　　            for (var item = items.nextNode(); item; item = items.nextNode()){
　　            var city = item.selectSingleNode("cityName").nodeTypedValue;
　　            var cid=item.selectSingleNode("id").nodeTypedValue;
　　            var newOption = document.createElement("OPTION");
　　            newOption.text = city;
　　            newOption.value = cid;
　　            drp2.options.add(newOption);
　　            }
        }
 //縣資料處理      
 function loadXian(state)
　　{
　　var getobject = alldeadmin_usercontrol_areaUc.getxian(state,callbackxian);
　　}
　　
　　function callbackxian(res)  //回呼函數
        {
             var drp2 = document.getElementById("<%=ddlx.ClientID %>");
             var iteml=drp2.options.length -1;//清空dropdownlist裡的項內容
　　        for(var i = 0;i<=iteml;i++)
　　        {
　　        drp2.remove(iteml-i);
　　        }
　　        var oDoc = new ActiveXObject("MSXML2.DOMDocument");
　　        result=res.value;//取得xml資料
　　        oDoc.loadXML(result);
　　        items = oDoc.selectNodes("//NewDataSet/ds");
　　            for (var item = items.nextNode(); item; item = items.nextNode()){
　　            var city = item.selectSingleNode("xianName").nodeTypedValue;
　　            var cid=item.selectSingleNode("id").nodeTypedValue;
　　            var newOption = document.createElement("OPTION");
　　            newOption.text = city;
　　            newOption.value = cid;
　　            drp2.options.add(newOption);
　　            }
        }      
-->
</script>

文章來源(WEB開發技術知識庫)：http://www.cn-web.com/cnweb/0/483/article/483.html