您现在的位置: 365建站网 > 365学习 > 基于AJAX的无刷新DropDownLis两级联动

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

文章来源:365jz.com     点击数:289    更新时间: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;
}

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

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (289人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------