webForm（三）——三级联动

时间 2019-11-17

标签 webform 三级联动繁體版

原文原文链接

三级联动 css

首先附图一张，初步认识一下什么是三级联动：web

注：选第一个后面两个变，选第二个，最后一个改变。数据库

其次，作三级联动须要注意的方面：①DropDownList中的一个属性——AutoPostBack：是否发生自动回传到服务器的操做。若是把该属性设置为 TRUE，则启用自动回传，不然为 FALSE。默认是 FALSE，在此须要true。服务器

②绑定数据：封装一个抽象的方法，灵活运用ssh

例：web实现省市区三级联动（方法有两种，我的推荐第一种；第二种，代码量多一些）spa

注：在此连接数据库的类就不作呈现，但提示一点：数据库根据父级代号条件写查询返回list<>集合。code

法一：orm

web中建立三个下拉列表框（DropDownList）server

<form id="form1" runat="server">
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"></asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True"></asp:DropDownList>
        <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True"></asp:DropDownList><br />
        
    </form>

CS：※SelectedIndexChanged事件：当列表控件的选定项在信息发往服务器之间变化时发生blog

public partial class Default3 : System.Web.UI.Page
{
    ChinaDA da = new ChinaDA();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind(DropDownList1 ,new ChinaDA().Select( "0001"));//填充省
            Bind(DropDownList2, new ChinaDA().Select(DropDownList1.SelectedValue));//填充市
            Bind(DropDownList3, new ChinaDA().Select(DropDownList2.SelectedValue));//填充区
        }
        DropDownList1.SelectedIndexChanged += DropDownList1_SelectedIndexChanged;//省改变事件
        DropDownList2.SelectedIndexChanged += DropDownList2_SelectedIndexChanged;//市改变事件
        
    }
    public void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
    {
          Bind(DropDownList3, new ChinaDA().Select(DropDownList2.SelectedValue));
    }

    public void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Bind(DropDownList2, new ChinaDA().Select(DropDownList1.SelectedValue));
        Bind(DropDownList3, new ChinaDA().Select(DropDownList2.SelectedValue));
    }

    private void Bind(DropDownList dd, List<China> list)
    {
        dd.DataSource = list;
        dd.DataTextField = "Name";
        dd.DataValueField = "Code";
        dd.DataBind();
    }
}

法二：

建立三个下拉列表框（DropDownList）

省：<asp:DropDownList ID="DropDownListsheng" runat="server" OnSelectedIndexChanged="DropDownListsheng_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
 市：<asp:DropDownList ID="DropDownListshi" runat="server" OnSelectedIndexChanged="DropDownListshi_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
 区：<asp:DropDownList ID="DropDownListqu" runat="server" AutoPostBack="True"></asp:DropDownList>

CS：※DropDownList.Items.Clear(); 每调用一次填充方法就须要请空一下，不然数据会追加

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            sheng();
            shi();
            qu();
        }          
    }
    public void sheng()//填充省
    {
        List<ChinaStates> listsheng = new ChinaStatesDA().Select("0001");
        foreach (ChinaStates cssheng in listsheng)
        {
            ListItem lisheng = new ListItem(cssheng.AreaName, cssheng.AreaCode);
            DropDownListsheng.Items.Add(lisheng);
        }
    }
    public void shi()//填充市
    {

        List<ChinaStates> listshi = new ChinaStatesDA().Select(DropDownListsheng.SelectedValue);
        foreach (ChinaStates csshi in listshi)
        {
            ListItem lishi = new ListItem(csshi.AreaName, csshi.AreaCode);
            DropDownListshi.Items.Add(lishi);
        }
    }
    public void qu()//填充区
    {

        List<ChinaStates> listqu = new ChinaStatesDA().Select(DropDownListshi.SelectedValue);
        foreach (ChinaStates csqu in listqu)
        {
            ListItem liqu = new ListItem(csqu.AreaName, csqu.AreaCode);
            DropDownListqu.Items.Add(liqu);
        }

    }
    protected void DropDownListsheng_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownListshi.Items.Clear();
        DropDownListqu.Items.Clear();
        shi();
        qu();
    }
    protected void DropDownListshi_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownListqu.Items.Clear();
        qu();
    }