Use AJAX to implement the association of DropDownList

Objective: To learn about AJAX and display the corresponding "city" name in the "city" drop-down box when selecting a "Province" drop-down box.

Step 1: register in the PAGE_LOGD method in the CS file on the page

Protected void Page_Load (object sender, EventArgs e)
{
AjaxPro. Utility. RegisterTypeForAjax (typeof (Class Name of the cs file ));

/// Register an object with the page and call the background method with this object at the foreground

}

Step 2. Create the background method to be called on the front-end page in the page CS File

[AjaxPro. AjaxMethod]
Public DataSet getBranchNameByAjax (string selectedValue)
{

IList <SiteBranch> list = siteBaseInfoManager. GetBranchInfo (selectedValue );
DataSet ds = new DataSet ();
DataTable dtId = new DataTable ();
DataTable dtName = new DataTable ();
DataRow idRow, nameRow;
DtId. Columns. Add (new DataColumn ("id "));
DtName. Columns. Add (new DataColumn ("name "));
For (int I = 0; I <list. Count; I ++)
{
IdRow = dtId. NewRow ();
NameRow = dtName. NewRow ();
IdRow [0] = list [I]. Id;
NameRow [0] = list [I]. FZJG;

Dtid. Rows. Add (idrow );
Dtname. Rows. Add (namerow );
}
DS. Tables. Add (dtid );
DS. Tables. Add (dtname );

Return Ds;

}

Step 3: add the js method to the properties of the drop-down box as follows:

<Asp: dropdownlist id = "dropdownlistplace" runat = "server" onchange = "getbranchnamebyajax (this. Value )"
Width = "85px">
</Asp: DropDownList>

Step 4: AJAX calls the JS function as follows:

Function getBranchNameByAjax (value)
{

Module_DataManage_SiteInfoManage_SiteInfoManage.getBranchNameByAjax (value, fillSiteBranchByresponse );

}
Function fillSiteBranchByresponse (response)
{
If (response. value = null)
{
If (response. error = "login ")
{
Window. location. reload ();
}
Alert ("disconnected from the server! ");
}
Else
{
Var dtId = response. value. Tables [0];
Var dtName = response. value. Tables [1];
Document. getElementById ("DropDownListBranch"). disabled = false;
Document. getElementById ("DropDownListBranch"). length = 0;
// If (dtId = "" | dtId = null) {document. getElementById ("DropDownListBranch "). options. add (new Option ("",""));}
For (var I = 0; I <dtId. Rows. length; I ++)
{
Var id = dtId. Rows [I]. id;
Var name = dtName. Rows [I]. name;
If (name = "" | name = null) {document. getElementById ("DropDownListBranch"). options. add (new Option ("",""));}
Document. getElementById ("DropDownListBranch"). options. add (new Option (name, id ));
}
}

}

Step 5: Add AjaxPro. dll to the project. See the attachment.