ASP下拉框联动

ASP 实现下拉框联动(c#)

• 在aspx文件中添加两个下拉框，这里用（学院—专业）这对关系举例：

<asp:DropDownList ID="ddlInstitute" runat="server" AutoPostBack="True"></asp:DropDownList>
<asp:DropDownList ID="ddlMajor" runat="server">
                </asp:DropDownList>

AutoPostBack="True"设置自动回传到服务器，是实现联动的关键
* 在ddlIntitute下拉框属性中添加OnSelectedIndexChanged="ddlInstitute_SelectedIndexChanged"实现下拉框联动

---

这里介绍两种添加数据源的方式

1. 直接在代码中添加
   
   • 打开cs文件，在pageLoad()函数中初始下拉框内容

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        ddlInstitute.Items.Add("计算机学院");
        ddlInstitute.Items.Add("经济学院");
        ddlInstitute.Items.Add("文法学院");
        ddlInstitute.SelectedIndex = 0;
        ddlMajor.Items.Add("软件工程");
        ddlMajor.Items.Add("计算机科学");
        ddlMajor.Items.Add("电子学");
        ddlMajor.Items.Add("微电子");
    }
}

• 编写 ddlInstitute_SelectedIndexChanged函数，使用switch语句

protected void ddlInstitute_SelectedIndexChanged(object sender, EventArgs e)
    {
        switch (ddlInstitute.Text)
        {
            case "计算机学院":
                ddlMajor.Items.Clear();
                ddlMajor.Items.Add("软件工程");
                ddlMajor.Items.Add("计算机科学");
                ddlMajor.Items.Add("电子学");
                ddlMajor.Items.Add("微电子");
                break;
            case "经济学院":
                ddlMajor.Items.Clear();
                ddlMajor.Items.Add("金融学");
                ddlMajor.Items.Add("保险学");
                ddlMajor.Items.Add("财政学");
                break;
            case "法学院":
                ddlMajor.Items.Clear();
                ddlMajor.Items.Add("法学");
                ddlMajor.Items.Add("公共事业管理");
                ddlMajor.Items.Add("新闻学");
                break;
        }
    }
}

1. 从数据库添加
   
   • 在数据库中创建数据表[Institute]和表[Major]，表头及示例数据如下

* 编写数据库操作类返回数据表，方便之后的查询操作

public class OperatorDb
{
    private static string conStr = "Data Source=.;Initial Catalog=Demosql;Integrated Security=True";
//连接字符串，Initial Catalog设置为自己的数据库
    public static DataTable GetDataTable(string sql)
    {
        SqlConnection con = new SqlConnection(conStr);
        con.Open();
        SqlDataAdapter ada = new SqlDataAdapter(sql, con);
        DataTable dt = new DataTable();
        ada.Fill(dt);
        con.Close();
        return dt;
    }

• 编写学院查询类和专业查询类

 public static DataTable GetInstituteInfo()
    {//得到学院信息表   
        string sql = "select * from [dbo].[Institute] ";
        DataTable dt = OperatorDb.GetDataTable(sql);
        return dt;
    }
    public static DataTable GetMajorInfo()
    {//得到专业信息表
        string sql = "select * from [dbo].[Major] ";
        DataTable dt = OperatorDb.GetDataTable(sql);
        return dt;
    }
public static DataTable GetMajorByInstituteID(string instituteID)
    {
      string sql = "select * from [dbo].[Major] where instituteID='"+instituteID+"'";
        DataTable dt = OperatorDb.GetDataTable(sql);
        return dt;
    }

数据库部分已经完成，关于数据库的连接可查看其它教程。这里为了节省篇幅，就不赘述了
* 打开cs文件，在pageLoad()函数中初始下拉框内容

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
           DataTable institute = GetInstituteInfo();
          //调用查询学院函数
           this.ddlInstitute.DataSource = institute;        
           //设置数据源
           this.ddlInstitute.DataTextField = "InstituteName";
            //设置文字段
           this.ddlInstitute.DataValueField = "InstituteID"; 
           //设置数值段
           this.ddlInstitute.DataBind();  
           ddlInstitute.SelectedIndex = 0;
           //设置专业与上相同
           DataTable major = 
           DropdownlistDB.GetMajorByInstituteID("1");
          //学院ID初始值为1
           this.ddlMajor.DataSource = major;
           this.ddlMajor.DataTextField = "MajorName";
           this.ddlMajor.DataValueField = "MajorID";
           this.ddlMajor.DataBind(); 
        }
    }

• 编写 ddlInstitute_SelectedIndexChanged函数，

protected void ddlInstitute_SelectedIndexChanged(object sender, EventArgs e)
{
     DataTable major =     DropdownlistDB.GetMajorByInstituteID(this.ddlInstitute.SelectedValue);
          //this.ddlInstitute.SelectedValue为学院ID
           this.ddlMajor.DataSource = major;
           this.ddlMajor.DataTextField = "MajorName";
           this.ddlMajor.DataValueField = "MajorID";
           this.ddlMajor.DataBind();    
}

到这里就基本结束了，如果对下拉框联动多次调用，可将其封装为方法方便调用

   public static void setInstituteDropDownList(DropDownList institute) {
        DataTable institutelist = GetInstituteInfo();
        institute.DataSource = institutelist;
        institute.DataTextField = "InstituteName";
        institute.DataValueField = "InstituteID";
        institute.DataBind(); 
    }
    public static void setMajorDropDownList(DropDownList major,string instituteid)
    {
        DataTable majorlist = DropdownlistDB.GetMajorByInstituteNo(instituteid);
        major.DataSource = majorlist;
        major.DataTextField = "MajorName";
        major.DataValueField = "MajorID";
        major.DataBind();
    }

以上就是这两种下拉框联动数据绑定方法，第一次写博客，哪里不足大家多多包涵，欢迎指正（^-^）。