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

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

文章来源:365jz.com     点击数:368    更新时间:2011-01-07 15:09   参与评论

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

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

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

   先附上数据表图片:

  

  下面开始实际开发

   首先要在page_load中注册AJAX

代码为:

</>code


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


   注:MovieManage_PerformerEdit 是注册页面的类名 

   接下来是前台代码:

代码

</>code

  1. <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代码:

代码

</>code

  1. <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代码:

 

代码

</>code

  1. /// <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方法:

 

代码

</>code

  1. /// <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;
    }

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

 

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

发表评论 (368人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号