基于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;
    }

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

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