基于AJAX的无刷新DropDownLis两级联动
文章来源：365jz.com 点击数：351 更新时间：2011-01-07 15:09 参与评论
在网站开发中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;
}
注：由于本实例是基于多层架构开发的，所以一些对数据库的操作就没有贴出来，如需使用请自行添加。
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
