ASP.NET中採用DropDownList控件實現省市聯動效果

SQL數據庫代碼:

create database proCity

use proCity
create table province(
	proId int primary key,
	proName varchar(20) not null
)

use proCity
insert into province values(1,'江西')
insert into province values(2,'湖南')
insert into province values(3,'湖北')

select * from province



use proCity
create table city(
	cityId int primary key,
	proId int foreign key references province(proId),
	cityName  varchar(10)
)

use proCity
insert into city values
('1','1','南昌'),('2','1','九江'),('3','1','新餘'),
('4','2','長沙'),('5','2','株洲'),('6','2','湘潭'),
('7','3','武漢'),('8','3','荊州'),('9','3','宜昌')

select * from city

前臺代碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        省份:
        <asp:DropDownList ID="dropDownList1" runat="server" AutoPostBack="True" 
            onselectedindexchanged="dropDownList1_SelectedIndexChanged"></asp:DropDownList><br /><br />
        城市:
        <asp:DropDownList ID="dropDownList2" runat="server"></asp:DropDownList>
    </div>
    </form>
</body>
</html>

數據庫連接類代碼:

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

namespace WebApplication2
{
    public class DB
    {
        public static SqlConnection sqlcon()
        {
            return new SqlConnection("server=.;database=proCity;uid=sa;pwd=123456");
        }
    }
}

後臺代碼:

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

namespace WebApplication2
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //在網頁第一次打開的時候進行調用
            if (!IsPostBack)
            {
                this.dataBind();
                
            }
        }

        protected void dataBind()
        {
            SqlConnection sqlcon = DB.sqlcon();
            sqlcon.Open();
            SqlCommand sqlcom = new SqlCommand("select * from province", sqlcon);
            SqlDataReader dr = sqlcom.ExecuteReader();
            this.dropDownList1.DataSource = dr;
            this.dropDownList1.DataValueField = "proId";
            this.dropDownList1.DataTextField = "proName";
            this.dropDownList1.DataBind();
            dr.Close();

            sqlcom.CommandText = "select * from city";
            SqlDataReader dr1 = sqlcom.ExecuteReader();
            this.dropDownList2.DataSource = dr1;
            this.dropDownList2.DataValueField = "cityId";
            this.dropDownList2.DataTextField = "cityName";
            this.dropDownList2.DataBind();
            dr1.Close();
            sqlcon.Close();
        }

        protected void dropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            int proID = Convert.ToInt32(this.dropDownList1.SelectedItem.Value);
            SqlConnection sqlcon = DB.sqlcon();
            sqlcon.Open();
            SqlCommand sqlcom = new SqlCommand("select * from city where proId= ' " + proID + " '", sqlcon);
            SqlDataReader dr = sqlcom.ExecuteReader();
            this.dropDownList2.DataSource = dr;
            this.dropDownList2.DataValueField = "cityId";
            this.dropDownList2.DataTextField = "cityName";
            this.dropDownList2.DataBind();
            dr.Close();
            sqlcon.Close();
        }
    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章