基于AJAX的无刷新DropDownLis两级联动

   在网站开发中DropDownLis多级联动是很常用到的，使用微软内置的事件触发的话会刷新整个页面，这并不是我们所想要的效果。

   在网上找到的一些资料都是通过js将数据传另一个附加页面来实现无刷新联动的，那样让人感觉不够完美，添加了本不应该添加的页面。

   在这里我们使用AJAX技术来实现DropDownLis的无刷新两级联动，无需添加额外的页面。

   先附上数据表图片：

  

  下面开始实际开发

   首先要在page_load中注册AJAX

代码为：

Ajax.Utility.RegisterTypeForAjax( typeof (MovieManage_PerformerEdit));

 
   注：MovieManage_PerformerEdit 是注册页面的类名 

   接下来是前台代码：

代码

< table >
< tr class = " bg2 " >
< td style = " width: 160px; text-align: right; " >
地 区：
</ td >
< td id = " Td3 " >
< asp:DropDownList ID = " ddlRegionParent " runat = " server " CssClass = " input " Width = " 100px "
MaxLength = " 200 " onchange = " GetRegion(this); " >
</ asp:DropDownList >
< span >--</ span >
< asp:DropDownList ID = " ddlRegion " runat = " server " CssClass = " input " Width = " 200px " MaxLength = " 200 " >
< asp:ListItem Value = " 0 " Text = " --请选择-- " ></ asp:ListItem >
</ asp:DropDownList >
</ td >
</ tr >
</ table >

 

以下是JS代码：

代码

< script type = " text/javascript " >

function GetRegion(obj)
{
var svalue = obj.value;
var regions = MovieManage_PerformerEdit.RegionBind(svalue);
BindRegion(regions);
}

function BindRegion(response)
{
if (response.error != null )
{
alert(response.error);
return ;
}
document.all( " ddlregion " ).length = 0 ;

var region = response.value;
var regions = region.split( ' , ' );

for (var i = 0 ;i < regions.length;i ++ )
{
document.all( " ddlregion " ).options.add( new Option(regions[i],regions[i]));
}

}
</ script >

 

注：GetRegion(obj)    用于获取后台查询的数据

    BindRegion(response)  用于将获取的数据绑定到第二级DropDownLis

 

后台绑定第一个DropDownLis代码：

 

代码

/// <summary>
/// 绑定第一个下拉框
/// </summary>
private void DDlRegionParentBind()
{
DataSet ParentRegionDS;
Com.Netmarch.BLL.Region parentRegionInfo = new Com.Netmarch.BLL.Region();
ParentRegionDS = parentRegionInfo.GetDataSetRegion( " and ParentId=0 " );
ddlRegionParent.DataSource = ParentRegionDS;
ddlRegionParent.DataTextField = " RegionName " ;
ddlRegionParent.DataValueField = " RegionID " ;
ddlRegionParent.DataBind();
ddlRegionParent.Items.Insert( 0 , " ---请选择--- " );
ddlRegionParent.Items[ 0 ].Selected = true ;
}

 

  后台AJAX方法：

 

代码

/// <summary>
/// 返回地区信息到前台js
/// </summary>
/// <param name="ParentId"></param>
/// <returns></returns>
[Ajax.AjaxMethod]
public string RegionBind( string ParentId)
{
// string Mystr = "";
DataSet regionDS;
StringBuilder strb = new StringBuilder();
Com.Netmarch.BLL.Region regionInfo = new Com.Netmarch.BLL.Region();
regionDS = regionInfo.GetDataSetRegion( " and ParentId= " + ParentId);
string ids = "" ;
foreach (DataRow dr in regionDS.Tables[ 0 ].Rows)
{
ids = (ids == "" ? dr[ " RegionName " ].ToString() : ids + " , " + dr[ " RegionName " ].ToString());
}
return ids;
}

注：由于本实例是基于多层架构开发的，所以一些对数据库的操作就没有贴出来，如需使用请自行添加。

      由于本人的新手，一些方面考虑的不够完善，有什么不足还希望各位大侠给予指点，小弟将不胜感激。

 

转载于:https://www.cnblogs.com/huaqing/archive/2011/01/07/hua.html