Verwendung von AjaxPro zur Entwicklung eines vierstufigen Dropdown-Felds für nicht aktualisierungsfähige Verknüpfungen

Autor：Eve Cole Aktualisierungszeit：2009-07-06 16:39:16

Entwicklungsumgebung VS.NET 2005 C# Oracle AjaxPro

Ich war in letzter Zeit sehr beschäftigt und habe keine Zeit, es im Detail zu erklären, daher werde ich den allgemeinen Quellcode veröffentlichen, um mich selbst davon zu überzeugen.

Aus Leistungsgründen werden die Ebenen „Provinz“ und „Stadt“ als JS-Arrays geschrieben, und die Ebenen „Kreis“ und „Bezirk“ (Stadt) werden in Oracle geschrieben. Lösen Sie C# aus, um die Datenbank über JS zu lesen, geben Sie die Daten dann an JS zurück und binden Sie sie dann zur Anzeige.

Operation <select> verwendet das allgemeinere createElement() anstelle von 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>
<Körper>
<form id="form1" runat="server">
<Tabelle>
<tr>
<td>
<select id="SF">
<option selected="selected"> – Bitte auswählen –</option>
</select>
</td>
<td>
<select id="CS">
<option selected="selected"> – Bitte auswählen –</option>
</select>
</td>
<td>
<select id="Xian">
<option selected="selected"> – Bitte auswählen –</option>
</select>
</td>
<td>
<select id="Zhen">
<option selected="selected"> – Bitte auswählen –</option>
</select>
</td>
</tr>
</table>

//Erstellen Sie eine Dropdown-Box über DOM http://www.downcodes.com/qq.asp
//obj: Optionsdatensatz des Dropdown-Felds
//id: die ID des Dropdown-Felds
Funktion CreateDropDownList(obj,id)
...{
var sel=document.getElementById(id);
sel.options.length=1; //Speichern „—Bitte auswählen—“
//Array-Speicher wird üblicherweise für Provinzen und Städte verwendet, und C# wird zum Lesen aus der Datenbank für Kreise und Städte verwendet.
if(obj==null)return;
if(obj-Instanz des Arrays)
...{
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);
}
}
anders
...{
for(var i=0;i<obj.Rows.length;i++) //Beachten Sie, dass dies die Länge und nicht die Anzahl ist
...{
var op=document.createElement("option");
op.setAttribute("value",obj.Rows[i].ID); //Beachten Sie, dass die Groß-/Kleinschreibung beachtet wird
var txt=document.createTextNode(obj.Rows[i].NAME); //Die Spaltennamen der Root-DataTable müssen konsistent sein
op.appendChild(txt);
sel.appendChild(op);
}
}
//Binde das nächste Dropdown-Feld
Schalter(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 übergibt Parameter an C# und erhält den Rückgabewert von C#
case "Xian":sel.onchange=function()...{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break; //Wert zurückgeben
default:sel.onchange=function()......{alert(this.value);};break;
}
}

//Ausführungseintrag
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

//Erforderliches Array abrufen
//tar=Provinz-ID, zu der es gehört
Funktion 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++;
}
}
Rücklauftemperatur;
}

//Löschen Sie das Dropdown-Feld „Stadt“.
Funktion ClearZhen()
...{
CreateDropDownList(null,"Zhen");
}
//Löschen Sie die Dropdown-Felder „Bezirk“ und „Stadt“.
Funktion ClearXianZhen()
...{
CreateDropDownList(null,"Xian");
CreateDropDownList(null,"Zhen");
}

</script>

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

Verwenden des Systems;
Verwenden von System.Data;
unter Verwendung von System.Data.OracleClient;

öffentlicher Teilklassenbereich: System.Web.UI.Page
...{
protected void Page_Load(object sender, EventArgs e)
...{
//C#-Klassen und Aufzählungen jeweils in JS registrieren
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <Zusammenfassung>
/// Rufen Sie die für das Dropdown-Feld erforderlichen Daten ab
/// </summary>
/// <param name="UpID">ID der oberen Ebene</param>
/// <param name="ae">Landkreis/Stadt</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);

// Die Spaltennamen in der von Oracle zurückgegebenen Datentabelle sind alle in Großbuchstaben geschrieben, wenn Sie Werte auf der Seite abrufen.
string sql;
if (Enum.Equals(ae, AreaEnum.Xian))
sql = "SELECT id,name FROM City WHERE THREEID=0 AND TWOID=" + UpID;
anders
sql = "SELECT id,name FROM City WHERE THREEID=" + UpID;

OracleDataAdapter adapter = new OracleDataAdapter(sql, conn);
DataTable-Tabelle = new DataTable();
adapter.Fill(table);
Rückgabetabelle;
}
}

/**//// <Zusammenfassung>
/// Regionsaufzählung
/// </summary>
öffentliche Aufzählung AreaEnum
...{
/**//// <Zusammenfassung>
/// Landkreis
/// </summary>
Xian,
/**//// <Zusammenfassung>
/// Stadt
/// </summary>
Zhen
}

Zu diesem Zeitpunkt sind die Grundfunktionen implementiert, und es gibt auch einige Funktionen (Bestimmen der Region über DomänennameIP und direkte Bindung, Speichern der ausgewählten Region, bequemes Lesen/Speichern von Stadtinformationen zur Durchführung von Kontrollen usw.). Ich werde es beenden, wenn ich Zeit habe.

Denken Sie daran,

in <system.web> von Web.config

hinzuzufügen