用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,分别是省、市、县：
 





页面加载时绑定三个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控件绑定的代码：
///

/// 省份数据dropdownlist绑定
///

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来实现，下面将提到。
}
///

///市数据dropdownlist绑定
///

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来实现，下面将提到。

}
///

///县数据dropdownlist绑定
///

private void bindxianData()
{
this.ddlx.DataSource = this.returnxianData(this.ddlc.SelectedValue);
this.ddlx.DataTextField = "xianName";
this.ddlx.DataValueField = "id";
this.ddlx.DataBind();
}从数据库中返回某市的数据和县的数据:
  ///

    /// 返回市数据
    ///

    private DataSet returncityData(string state)
    {
        BLL.alldeadmin.areabll myareabll = new areabll();
        string tw = " where ProId=" + state;
        return myareabll.GetListc(tw);
    }
    ///

    /// 返回县数据
    ///

    private DataSet returnxianData(string state)
    {
        BLL.alldeadmin.areabll myareabll = new areabll();
        string tw = " where cityId=" + state;
        return myareabll.GetListx(tw);
    }这里是和aspx页面无刷新返回数据的地方：
///

    /// 无刷新向页面返回市级数据
    ///

    ///
    ///
    [AjaxPro.AjaxMethod]
    public string getcity(string state)
    {
        return returncityData(state).GetXml();
    }

    ///

    /// 无刷新向页面返回县级数据
    ///

    ///
    ///
    [AjaxPro.AjaxMethod]
    public string getxian(string state)
    {
        return returnxianData(state).GetXml();
    }

前台.aspx页面的javascript处理模块
javascript是对xml处理的，我返回的xml结构为

文章来源(WEB开发技术知识库)：http://www.cn-web.com/cnweb/0/483/article/483.html

转载于:https://www.cnblogs.com/yongheng178/archive/2008/09/02/1282030.html