Implementation of the Ajax no-brush new technology, provincial, municipal, and county-level linkage drop-down menu -- Asp. Net

 

 

Start work.

Step 1: Prepare the data. Prepare three tables, namely, the province table, the sity table, and the area table, and the top three tables, which mainly contain code, the code is used to store the region code, and the name is used to store the name of the administrative region. Of course, there is also an Id Primary Key. We use code to determine the dependency.

Step 2: After the database and table are ready, you can write code. Drag a ScriptManager control and an UpdatePanel control. These two controls are used to implement the new anti-bot technology and are very convenient. Then drag three DropDownList controls. Be sure to put them in the ContentTemplate of the UpdatePanel control and check the Code:

? <Form id = "form1" runat = "server">
<Asp: ScriptManager ID = "ScriptManager1" runat = "server">
</Asp: ScriptManager>
<Asp: UpdatePanel ID = "UpdatePanel1" runat = "server">
<ContentTemplate>
<Asp: DropDownList ID = "ddl_Province" runat = "server" AutoPostBack = "True" onselectedindexchanged = "ddl_Province_SelectedIndexChanged">
</Asp: DropDownList>
<Asp: DropDownList ID = "ddl_City" runat = "server" AutoPostBack = "True" onselectedindexchanged = "ddl_City_SelectedIndexChanged">
</Asp: DropDownList>
<Asp: DropDownList ID = "ddl_Area" runat = "server">
</Asp: DropDownList>
</ContentTemplate>
</Asp: UpdatePanel>
</Form>
Write it here and write the database-related code, which is very simple.

Step 3: Background code:

In the background code, I wrote three methods: BindProvince (), BindCity (), BindArea (), the three methods are used to bind the three drop-down menus of provinces, cities, and counties as their names. The method is very simple. Check the Code:

Private void BindProvince ()
{
String SQL = "select code, name from province ";
SqlConnection conn = new SqlConnection (ConfigurationManager. ConnectionStrings ["conn"]. ConnectionString );
SqlDataAdapter adapter = new SqlDataAdapter (SQL, conn );
DataSet ds = new DataSet ();
Conn. Open ();
Adapter. Fill (ds );
Conn. Close ();
Ddl_Province.DataSource = ds. Tables [0];
Ddl_Province.DataValueField = "code ";
Ddl_Province.DataTextField = "name ";
Ddl_Province.DataBind ();
}
Private void BindCity (string code)
{
String provinceCode = code. Substring (0, 2 );
String SQL = "select code, name from city where left (code, 2) = '" + provinceCode + "'";
SqlConnection conn = new SqlConnection (ConfigurationManager. ConnectionStrings ["conn"]. ConnectionString );
SqlDataAdapter adapter = new SqlDataAdapter (SQL, conn );
DataSet ds = new DataSet ();
Conn. Open ();
Adapter. Fill (ds );
Conn. Close ();
Ddl_City.DataSource = ds. Tables [0];
Ddl_City.DataValueField = "code ";
Ddl_City.DataTextField = "name ";
Ddl_City.DataBind ();
}

Private void BindArea (string code)
{
String cityCode = code. Substring (0, 4 );
String SQL = "select code, name from area where left (code, 4) = '" + cityCode + "'";
SqlConnection conn = new SqlConnection (ConfigurationManager. ConnectionStrings ["conn"]. ConnectionString );
SqlDataAdapter adapter = new SqlDataAdapter (SQL, conn );
DataSet ds = new DataSet ();
Conn. Open ();
Adapter. Fill (ds );
Conn. Close ();
Ddl_Area.DataSource = ds. Tables [0];
Ddl_Area.DataValueField = "code ";
Ddl_Area.DataTextField = "name ";
Ddl_Area.DataBind ();
} Then, write these methods on the SelectedIndexChanged event handling method in the drop-down menu. The Code is as follows:

Protected void ddl_City_SelectedIndexChanged (object sender, EventArgs e)
{
BindArea (ddl_City.SelectedItem.Value );
}

Protected void ddl_Province_SelectedIndexChanged (object sender, EventArgs e)
{
BindCity (ddl_Province.SelectedItem.Value );
BindArea (ddl_City.SelectedItem.Value );
} Finally, write in the Load event of the page:

Protected void Page_Load (object sender, EventArgs e)
{
If (! IsPostBack)
{
BindProvince ();
BindCity (ddl_Province.SelectedItem.Value );
BindArea (ddl_City.SelectedItem.Value );
}
} Finally, do not forget to set the province drop-down menu and municipal drop-down menu to AutoPostBack = True; OK... the whole background code:

Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Data;
Using System. Data. SqlClient;
Using System. Configuration;
Namespace chinereea
{
Public partial class Default: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
If (! IsPostBack)
{
BindProvince ();
BindCity (ddl_Province.SelectedItem.Value );
BindArea (ddl_City.SelectedItem.Value );
}
}

Private void BindProvince ()
{
String SQL = "select code, name from province ";
SqlConnection conn = new SqlConnection (ConfigurationManager. ConnectionStrings ["conn"]. ConnectionString );
SqlDataAdapter adapter = new SqlDataAdapter (SQL, conn );
DataSet ds = new DataSet ();
Conn. Open ();
Adapter. Fill (ds );
Conn. Close ();
Ddl_Province.DataSource = ds. Tables [0];
Ddl_Province.DataValueField = "code ";
Ddl_Province.DataTextField = "name ";
Ddl_Province.DataBind ();
}
Private void BindCity (string code)
{
String provinceCode = code. Substring (0, 2 );
String SQL = "select code, name from city where left (code, 2) = '" + provinceCode + "'";
SqlConnection conn = new SqlConnection (ConfigurationManager. ConnectionStrings ["conn"]. ConnectionString );
SqlDataAdapter adapter = new SqlDataAdapter (SQL, conn );
DataSet ds = new DataSet ();
Conn. Open ();
Adapter. Fill (ds );
Conn. Close ();
Ddl_City.DataSource = ds. Tables [0];
Ddl_City.DataValueField = "code ";
Ddl_City.DataTextField = "name ";
Ddl_City.DataBind ();
}

Private void BindArea (string code)
{
String cityCode = code. Substring (0, 4 );
String SQL = "select code, name from area where left (code, 4) = '" + cityCode + "'";
SqlConnection conn = new SqlConnection (ConfigurationManager. ConnectionStrings ["conn"]. ConnectionString );
SqlDataAdapter adapter = new SqlDataAdapter (SQL, conn );
DataSet ds = new DataSet ();
Conn. Open ();
Adapter. Fill (ds );
Conn. Close ();
Ddl_Area.DataSource = ds. Tables [0];
Ddl_Area.DataValueField = "code ";
Ddl_Area.DataTextField = "name ";
Ddl_Area.DataBind ();
}

Protected void ddl_City_SelectedIndexChanged (object sender, EventArgs e)
{
BindArea (ddl_City.SelectedItem.Value );
}

Protected void ddl_Province_SelectedIndexChanged (object sender, EventArgs e)
{
BindCity (ddl_Province.SelectedItem.Value );
BindArea (ddl_City.SelectedItem.Value );
}
}
} Design code:

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

<! 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">
<Asp: ScriptManager ID = "ScriptManager1" runat = "server">
</Asp: ScriptManager>
<Asp: UpdatePanel ID = "UpdatePanel1" runat = "server">
<ContentTemplate>
<Asp: DropDownList ID = "ddl_Province" runat = "server" AutoPostBack = "True" onselectedindexchanged = "ddl_Province_SelectedIndexChanged">
</Asp: DropDownList>
<Asp: DropDownList ID = "ddl_City" runat = "server" AutoPostBack = "True" onselectedindexchanged = "ddl_City_SelectedIndexChanged">
</Asp: DropDownList>
<Asp: DropDownList ID = "ddl_Area" runat = "server">
</Asp: DropDownList>
</ContentTemplate>
</Asp: UpdatePanel>
</Form>
</Body>
</Html>