ASP. NET -- Implement Dynamic Interaction between two drop-down boxes and asp.net drop-down boxes

ASP. NET -- Implement Dynamic Interaction between two drop-down boxes and asp.net drop-down boxes

Introduction:

We often encounter problems on webpages. First, select the province in the drop-down box. Then, the second drop-down box will automatically load the city in the province. This design greatly facilitates user search. How is this implemented?

1. Create a database

"Province" table

City table

2. Add controls

3. Bind data sources in the two drop-down boxes

Protected void Page_Load (object sender, EventArgs e) {// determines whether the page is accessed for the first time. If yes, the database is bound. If no, no binding is required. If (! This. isPostBack) {// bind the province SqlConnection con = DB. createConnection (); con. open (); string plain text = "select * from province"; SqlCommand cmd = new SqlCommand (plain text, con); SqlDataReader sdr = cmd. executeReader (); this. dropDownList1.DataSource = sdr; this. dropDownList1.DataTextField = "proName"; // text content this. dropDownList1.DataValueField = "proID"; // data source field this. dropDownList1.DataBind (); sdr. close (); // bind the city string cmdCityText = "select * from city where proID =" + this. dropDownList1.SelectedValue; SqlCommand cmdCity = new SqlCommand (cmdCityText, con); sdr = cmdCity. executeReader (); // the remaining part is similar to the bound province. // close the connection con. close ();}}

At this point, both text boxes have been loaded to their respective data. The rest is dynamic interaction.

4. When we change the content in the first drop-down box, the SelectedIndexChanged event in the first text box is triggered. Use the proID (province ID) in the first drop-down box as the parameter to check the content of the city.

The Code is as follows:

Protected void dropdownlistincluselectedindexchanged (object sender, EventArgs e) {// province ID string proID = this. dropDownList1.SelectedValue; SqlConnection con = DB. createConnection (); con. open (); SqlCommand cmd = new SqlCommand ("select * from city where proID =" + proID, con); SqlDataReader sdr = cmd. executeReader (); // bind this. dropDownList2.DataSource = sdr; this. dropDownList2.DataTextField = "cityName"; this. dropDownList2.DataValueField = "cityID"; this. dropDownList2.DataBind (); sdr. close (); con. close ();}

In this way, we can achieve dynamic linkage. Such dynamic Association generally consists of multiple drop-down boxes to form a set of menus, such as the two drop-down boxes used above. There is a link between the drop-down menu. When the selected item of the superior changes, the lower-level displays the corresponding content based on the selected item in the superior.

Although it is only a small skill or a small demand, when the data size is very large, its function can not be underestimated. This function may be ignored on only one page during the last exam lead, resulting in a significant increase in workload.

After Dynamic Association is used, the page loading speed will not be affected in the face of massive data or complex classification, which facilitates user search.

Aspnet drop-down box second-level linkage (how to implement)

Use DropDownList

Create a class:

# Region binding DropDownList control code
Public static bool ControlClass (DropDownList CN, string SqlStr, string TF, string VF)
{
SqlConnection conn = DBConn. conn ();
SqlCommand cmd = new SqlCommand (SqlStr, conn );

Try
{
Conn. Open ();
SqlDataReader der = cmd. ExecuteReader ();
CN. DataSource = der;
CN. DataTextField = TF;
CN. DataValueField = VF;
CN. DataBind ();
Return true;
}
Catch
{
Return false;
}
Finally
{
Conn. Close ();
Cmd. Dispon ();
}
}
# Endregion

Code 1:
Call methods in the class

If (! IsPostBack)
{
Class Name. ControlClass (DropDownList1, "select * from cdb_members", "userName", "uid ");
// Set AutoPostBacke of level 1 DropDwonList to true;
Set the second DropDowlist

Code:

OperationDataClass. ControlClass (DropDownList2, "select * from cdb_members where uid = '" + this. ddlItems. SelectedValue + "'", "userName", "uid ");
}

/// First, the two tables of the database must be associated.
If you do not understand it, you can go to #24

It's not enough to give a score.

In ASPNET, how does one use c # To implement the association of two drop-down lists?

With AJax, add a ScriptManager and an UpdatePannel on your page, put DropDownList2 in the UpdatePannel, and add the UpdatePannel Trigger. The ControlID is set to DropDownList1, set Event to SelecteIndex_Changed. Then, in your DropDownList1 SelecteIndex_Changed event, write the code that changes the content of DropDownList2 according to DropDownList1. Set AutoPostBack = True for DropDownList1.