Using AjaxPro to develop a four-level non-refresh linkage drop-down box

Author：Eve Cole Update Time：2009-07-06 16:39:16

Development environment VS.NET 2005 C# Oracle AjaxPro

I have been busy recently and have no time to explain in detail, so I will post the general source code to see for myself.

For performance reasons, the province and city levels are written as JS arrays, and the county and district (town) levels are written in Oracle. Trigger C# to read the database through JS, then pass the data back to JS, and then bind it for display.

Operation <select> uses the more general createElement() instead of using options.add()

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Area.aspx.cs" Inherits="Area" %>

<!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>Region</title>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<select id="SF">
<option selected="selected">—Please select—</option>
</select>
</td>
<td>
<select id="CS">
<option selected="selected">—Please select—</option>
</select>
</td>
<td>
<select id="Xian">
<option selected="selected">—Please select—</option>
</select>
</td>
<td>
<select id="Zhen">
<option selected="selected">—Please select—</option>
</select>
</td>
</tr>
</table>

//Create a drop-down box through DOM http://www.downcodes.com/qq.asp
//obj: options data set of drop-down box
//id: the id of the drop-down box
function CreateDropDownList(obj,id)
...{
var sel=document.getElementById(id);
sel.options.length=1; //Save "—Please select—"
//Array storage is commonly used for provinces and cities, and C# is used to read from the database for counties and towns.
if(obj==null)return;
if(obj instanceof Array)
...{
for(var i=0;i<obj.length;i++)
...{
var op=document.createElement("option");
op.setAttribute("value",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
else
...{
for(var i=0;i<obj.Rows.length;i++) //Note that this is length, not Count
...{
var op=document.createElement("option");
op.setAttribute("value",obj.Rows[i].ID); //Note that it is case sensitive
var txt=document.createTextNode(obj.Rows[i].NAME); //The column names of the root DataTable must be consistent
op.appendChild(txt);
sel.appendChild(op);
}
}
//Bind the next drop-down box
switch(id)
...{
case "SF":sel.onchange=function()......{ClearXianZhen();CreateDropDownList(GetArray(this.value),"CS");};break;
case "CS":sel.onchange=function()......{ClearZhen();CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Xian).value,"Xian");};break; / /JS passes parameters to C# and gets the return value of C#
case "Xian":sel.onchange=function()...{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break; //Return value. value
default:sel.onchange=function()......{alert(this.value);};break;
}
}

//Execution entry
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

//Get the required array
//tar=Province ID to which it belongs
function GetArray(val)
...{
var temp=new Array();
var j=0;
for(var i=0;i<aDQ.length;i++)
...{
if(aDQ[i][2].toString()==val)
...{
temp[j]=aDQ[i];
//temp[j].push(aDQ[i]);
j++;
}
}
return temp;
}

//Clear the "Town" drop-down box
function ClearZhen()
...{
CreateDropDownList(null,"Zhen");
}
//Clear the "County" and "Town" drop-down boxes
function ClearXianZhen()
...{
CreateDropDownList(null,"Xian");
CreateDropDownList(null,"Zhen");
}

</script>

</form>
</body>
</html>

using System;
using System.Data;
using System.Data.OracleClient;

public partial class Area : System.Web.UI.Page
...{
protected void Page_Load(object sender, EventArgs e)
...{
//Register C# classes and enumerations into JS respectively
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <summary>
/// Get the data required by the drop-down box
/// </summary>
/// <param name="UpID">Upper level ID</param>
/// <param name="ae">County/Town</param>
/// <returns>Return DataTable</returns>
[AjaxPro.AjaxMethod]
public DataTable GetDataTable(string UpID, AreaEnum ae)
...{
if (String.IsNullOrEmpty(UpID))
return null;

string link = "server=XXX;user=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

//The column names in the DataTable returned by Oracle are all in uppercase letters. Remember to use uppercase letters when fetching values on the page.
string sql;
if (Enum.Equals(ae, AreaEnum.Xian))
sql = "SELECT id,name FROM City WHERE THREEID=0 AND TWOID=" + UpID;
else
sql = "SELECT id,name FROM City WHERE THREEID=" + UpID;

OracleDataAdapter adapter = new OracleDataAdapter(sql, conn);
DataTable table = new DataTable();
adapter.Fill(table);
return table;
}
}

/**//// <summary>
/// Region enumeration
/// </summary>
public enum AreaEnum
...{
/**//// <summary>
/// county
/// </summary>
Xian,
/**//// <summary>
/// town
/// </summary>
Zhen
}

At this point, the basic functions are implemented, and there are also some functions (determining the region through domain nameIP and binding directly, saving the selected region, conveniently reading/saving city information to make controls, etc.). I’ll finish it when I have time.

Remember to add

in <system.web> of Web.config