ASP.NET三级联动

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

三级联动就是用三个下拉列表框DropDownList，每个里面添加相应的东西，在第一个列表框中选择一个值，第二三个列表框都会根据第一个选择进行相应的变化，在第二个列表框中选择一个值，第三个列表框也会根据第二个的选择进行变化，通常用于地区选择以及时间日期选择。

注：只有上一个列表框选择执行提交事件，才可以在提交事件中写执行方法，AutoPostBack - 自动提交事件，将DropDownList属性的AutoPostBack改为true

写一个简单的数据库，用三级联动将数据库里的信息查找相应显示

数据库：

写一个省，市，区县的表，市的Pcode为省的Acode，区县的Pcode为市的Acode

create database China
go
use China
go
create table Chinast
(
   Acode nvarchar(20),
   Aname nvarchar(20),
   Pcode nvarchar(20)
)

insert into Chinast values('11','山东','0001')
insert into Chinast values('1101','济南','11')
insert into Chinast values('110101','历下区','1101')
insert into Chinast values('110102','天桥区','1101')
insert into Chinast values('110103','槐荫区','1101')
insert into Chinast values('1102','淄博','11')
insert into Chinast values('110201','张店区','1102')
insert into Chinast values('110201','周村区','1102')
insert into Chinast values('110203','淄川区','1102')
insert into Chinast values('12','山西','0001')
insert into Chinast values('1201','太原','12')
insert into Chinast values('120101','清徐','1201')
insert into Chinast values('120102','阳曲','1201')
insert into Chinast values('120103','古交','1201')
insert into Chinast values('1202','临汾','12')
insert into Chinast values('120201','霍州','1202')
insert into Chinast values('120202','洪洞','1202')
insert into Chinast values('120203','襄汾','1202')

写一个Web窗体，里面放三个DropDownList，简单的调整一下

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .a {
            position: relative;
            top: 100px;
            left: 30%;
            height: 40px;
            width: 100px;
            font-family:微软雅黑;
            font-size:25px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="a" AutoPostBack="True"></asp:DropDownList>&nbsp;&nbsp;
        <asp:DropDownList ID="DropDownList2" runat="server" CssClass="a" AutoPostBack="True"></asp:DropDownList>&nbsp;&nbsp;
        <asp:DropDownList ID="DropDownList3" runat="server" CssClass="a"></asp:DropDownList>
    </form>
</body>
</html>

数据库实体类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Chinast 的摘要说明
/// </summary>
public class Chinast
{
    public Chinast()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }

    public string Acode { get; set; }
    public string Aname { get; set; }
    public string Pcode { get; set; }
}

数据库操作类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;

/// <summary>
/// ChinastData 的摘要说明
/// </summary>
public class ChinastData
{
    SqlConnection conn = null;
    SqlCommand cmd = null;
    public ChinastData()
    {
        conn = new SqlConnection("server=.;database=China;user=sa;pwd=123;");
        cmd = conn.CreateCommand();
    }


    /// <summary>
    /// 根据地区的Pcode查找和此Pcode相应的地区信息
    /// </summary>
    /// <param name="code"></param>
    /// <returns></returns>
    public List<Chinast> selectAll(string code)
    {
        List<Chinast> li = new List<Chinast>();
        cmd.CommandText = "select * from Chinast where Pcode=@Pcode";
        cmd.Parameters.Clear();
        cmd.Parameters.Add("@Pcode", code);
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows) 
        {
            while (dr.Read()) 
            {
                Chinast st=new Chinast();
                st.Acode=dr["Acode"].ToString();
                st.Aname= dr["Aname"].ToString();
                st.Pcode=dr["Pcode"].ToString();
                li.Add(st);
            }
        }
        conn.Close();
        return li;
    }

}

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DropDownList1.SelectedIndexChanged += DropDownList1_SelectedIndexChanged;//省提交事件委托
        DropDownList2.SelectedIndexChanged += DropDownList2_SelectedIndexChanged;//市提交事件委托
        if (IsPostBack == false)//判断IsPostBack为false，将代码写在里面，页面只执行一次，防止每次操作进行页面刷新
        {
            //调用数据库方法，返回一个Chinast泛型集合，传参省的Pcode
            List<Chinast> sheng = new ChinastData().selectAll("0001");
            DropDownList1.DataSource = sheng;//绑定数据源
            DropDownList1.DataTextField = "Aname";//下拉框里面显示的值，DataTextField为返回集合中的Aname，地名
            DropDownList1.DataValueField = "Acode";//Value为他的Acode；
            DropDownList1.DataBind();


            //因为每个市的Pcode为省的Acode，Acode为省的Value值，则根据市的Pcode查数据时就是省的Value，DropDownList1.SelectedItem.Value
            List<Chinast> shi = new ChinastData().selectAll(DropDownList1.SelectedItem.Value);
            DropDownList2.DataSource = shi;
            DropDownList2.DataTextField = "Aname";
            DropDownList2.DataValueField = "Acode";
            DropDownList2.DataBind();

            //因为每个区县的Pcode为市的Acode，Acode为市的Value值，则根据区县的Pcode查数据时就是市的Value，DropDownList2.SelectedItem.Value
            List<Chinast> qu = new ChinastData().selectAll(DropDownList2.SelectedItem.Value);
            DropDownList3.DataSource = qu;
            DropDownList3.DataTextField = "Aname";
            DropDownList3.DataValueField = "Acode";
            DropDownList3.DataBind();
            
        }
        
        
        
    }

    void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)//市提交事件
    {
        List<Chinast> qu = new ChinastData().selectAll(DropDownList2.SelectedItem.Value);//根据选择市的Value查找相应的区县
        DropDownList3.DataSource = qu;
        DropDownList3.DataTextField = "Aname";
        DropDownList3.DataValueField = "Acode";
        DropDownList3.DataBind();
    }




    void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)//省提交事件，选择后执行提交，市及区县根据Value值执行相应的查找显示
    {
        List<Chinast> shi = new ChinastData().selectAll(DropDownList1.SelectedItem.Value);//根据选择省的Value查找相应的市
        DropDownList2.DataSource = shi;
        DropDownList2.DataTextField = "Aname";
        DropDownList2.DataValueField = "Acode";
        DropDownList2.DataBind();

        List<Chinast> qu = new ChinastData().selectAll(DropDownList2.SelectedItem.Value);//根据选择市的Value查找相应的区县
        DropDownList3.DataSource = qu;
        DropDownList3.DataTextField = "Aname";
        DropDownList3.DataValueField = "Acode";
        DropDownList3.DataBind();
    }

    

    
}