?

經(jīng)常用dropdownlist綁定數(shù)據(jù)，涉及到多級聯(lián)動的問題，刷新頁面不太好，于是花了點(diǎn)時間，用AjaxPro來實(shí)現(xiàn)無刷新綁定DropDownList數(shù)據(jù)的問題。
--------------------------------------------------------------------------------

實(shí)例：
實(shí)現(xiàn)省、市、縣三級DropDownList數(shù)據(jù)無刷新綁定
思想：
在頁面載入時從數(shù)據(jù)庫中讀取并綁定省份數(shù)據(jù)，然后根據(jù)省份當(dāng)前的DropDownList所選id來綁定市數(shù)據(jù)，最后根據(jù)市的DropDownList所選id來綁定縣數(shù)據(jù)。
然后當(dāng)用戶改變省的DropDownList，用AjaxPro技術(shù)傳值(當(dāng)前所選的省id),根據(jù)所選的省id來綁定市與縣的DropDownList，當(dāng)改變市的DropDownList時原理一樣。.cs頁面從數(shù)據(jù)庫中等到的數(shù)據(jù)以xml的形式傳回給頁面，然后用javascript來分析處理綁定。
看不明白沒關(guān)系，看下代碼實(shí)現(xiàn)就明白了。
效果圖示：

準(zhǔn)備：
首先需要將AjaxPro.2部署到您的項(xiàng)目中，如果部署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(); //市數(shù)據(jù)綁定
this.bindxianData();//縣級數(shù)據(jù)綁定
}
}具體對三個DropDownList控件綁定的代碼：
/// <summary>
/// 省份數(shù)據(jù)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));");//當(dāng)省下拉列表改變時綁定市與縣事件，此事件處理程序通過javascript來實(shí)現(xiàn)，下面將提到。
}
/// <summary>
///市數(shù)據(jù)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))");//當(dāng)市下拉列表改變時綁定縣事件，此事件處理程序通過javascript來實(shí)現(xiàn)，下面將提到。

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

??? /// <summary>
??? /// 無刷新向頁面返回縣級數(shù)據(jù)
??? /// </summary>
??? /// <param name="state"></param>
??? /// <returns></returns>
??? [AjaxPro.AjaxMethod]
??? public string getxian(string state)
??? {
??????? return returnxianData(state).GetXml();
??? }

前臺.aspx頁面的javascript處理模塊
javascript是對xml處理的，我返回的xml結(jié)構(gòu)為

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

//市級數(shù)據(jù)處理
　function loadCity(state)
　　{
　　alldeadmin_usercontrol_areaUc.getcity(state,callback);//裝載市數(shù)據(jù)
　　alldeadmin_usercontrol_areaUc.getxian(state,callbackxian);//裝載縣數(shù)據(jù)
　　}
　　
　　function callback(res)? //回調(diào)函數(shù)
??????? {
???????????? var drp2 = document.getElementById("<%=ddlc.ClientID %>");因?yàn)檫@個例子是作為用戶控件在運(yùn)行的，所以不能用 javascript直接引用控件名稱，需要用控件.ClientID 屬性來獲取控件的客戶端id。
???????????? var iteml=drp2.options.length -1;//清空dropdownlist里的項(xiàng)內(nèi)容
　　??????? for(var i = 0;i<=iteml;i++)
　　??????? {
　　??????? drp2.remove(iteml-i);
　　??????? }
　　??????? var oDoc = new ActiveXObject("MSXML2.DOMDocument");
　　??????? result=res.value;//取得xml數(shù)據(jù)
　　??????? 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);
　　??????????? }
??????? }
?//縣數(shù)據(jù)處理??????
?function loadXian(state)
　　{
　　var getobject = alldeadmin_usercontrol_areaUc.getxian(state,callbackxian);
　　}
　　
　　function callbackxian(res)? //回調(diào)函數(shù)
??????? {
???????????? var drp2 = document.getElementById("<%=ddlx.ClientID %>");
???????????? var iteml=drp2.options.length -1;//清空dropdownlist里的項(xiàng)內(nèi)容
　　??????? for(var i = 0;i<=iteml;i++)
　　??????? {
　　??????? drp2.remove(iteml-i);
　　??????? }
　　??????? var oDoc = new ActiveXObject("MSXML2.DOMDocument");
　　??????? result=res.value;//取得xml數(shù)據(jù)
　　??????? 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開發(fā)技術(shù)知識庫)：http://www.cn-web.com/cnweb/0/483/article/483.html

轉(zhuǎn)載于:https://www.cnblogs.com/yongheng178/archive/2008/09/02/1282030.html

總結(jié)

以上是生活随笔為你收集整理的用ajax实现dropdownlist多级联动实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。