Utilisation d'AjaxPro pour développer une liste déroulante de liaison sans actualisation à quatre niveaux

Auteur：Eve Cole Date de mise à jour：2009-07-06 16:39:16

Environnement de développement VS.NET 2005 C# Oracle AjaxPro

J'ai été occupé récemment et je n'ai pas le temps d'expliquer en détail, je vais donc publier le code source général pour voir par moi-même.

Pour des raisons de performances, les niveaux de province et de ville sont écrits sous forme de tableaux JS, et les niveaux de comté et de district (ville) sont écrits dans Oracle. Déclenchez C# pour lire la base de données via JS, puis transmettez les données à JS, puis liez-les pour les afficher.

L'opération <select> utilise createElement() plus générale au lieu d'utiliser 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="serveur">
<title>Région</title>
</tête>
<corps>
<form id="form1" runat="serveur">
<tableau>
<tr>
<td>
<identifiant de sélection="SF">
<option selected="selected">—Veuillez sélectionner—</option>
</sélectionner>
</td>
<td>
<identifiant de sélection="CS">
<option selected="selected">—Veuillez sélectionner—</option>
</sélectionner>
</td>
<td>
<select id="Xian">
<option selected="selected">—Veuillez sélectionner—</option>
</sélectionner>
</td>
<td>
<select id="Zhen">
<option selected="selected">—Veuillez sélectionner—</option>
</sélectionner>
</td>
</tr>
</table>

//Créer une liste déroulante via DOM http://www.downcodes.com/qq.asp
//obj : ensemble de données d'options de la liste déroulante
//id : l'identifiant de la liste déroulante
fonction CreateDropDownList(obj,id)
...{
var sel=document.getElementById(id);
sel.options.length=1; //Enregistrer "—Veuillez sélectionner—"
//Le stockage en tableau est couramment utilisé pour les provinces et les villes, et C# est utilisé pour lire la base de données pour les comtés et les villes.
if(obj==null)retour;
si (instance obj de tableau)
...{
pour(var i=0;i<obj.length;i++)
...{
var op=document.createElement("option");
op.setAttribute("valeur",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
autre
...{
for(var i=0;i<obj.Rows.length;i++) //Notez qu'il s'agit de la longueur, pas du nombre
...{
var op=document.createElement("option");
op.setAttribute("value",obj.Rows[i].ID); //Notez que cela est sensible à la casse
var txt=document.createTextNode(obj.Rows[i].NAME); //Les noms de colonnes du DataTable racine doivent être cohérents
op.appendChild(txt);
sel.appendChild(op);
}
}
// Lier la liste déroulante suivante
commutateur (identifiant)
...{
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 transmet les paramètres à C# et obtient la valeur de retour de C#
case "Xian":sel.onchange=function()...{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break; //Valeur de retour.
par défaut : sel.onchange=function()......{alert(this.value);};break;
}
}

//Entrée d'exécution
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

//Obtenir le tableau requis
//tar=ID de la province à laquelle il appartient
fonction GetArray(val)
...{
var temp=nouveau tableau();
variable j=0 ;
pour(var i=0;i<aDQ.length;i++)
...{
si(aDQ[i][2].toString()==val)
...{
temp[j]=aDQ[i];
//temp[j].push(aDQ[i]);
j++;
}
}
température de retour ;
}

//Effacer la liste déroulante "Ville"
fonction ClearZhen()
...{
CreateDropDownList(null,"Zhen");
}
//Effacer les listes déroulantes "Comté" et "Ville"
fonction ClearXianZhen()
...{
CreateDropDownList(null,"Xian");
CreateDropDownList(null,"Zhen");
}

</script>

</form>
</corps>
</html>

utiliser le système ;
en utilisant System.Data ;
en utilisant System.Data.OracleClient ;

zone de classe partielle publique : System.Web.UI.Page
...{
protected void Page_Load (expéditeur de l'objet, EventArgs e)
...{
//Enregistrez respectivement les classes et les énumérations C# dans JS
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <résumé>
/// Récupère les données requises par la liste déroulante
/// </summary>
/// <param name="UpID">ID de niveau supérieur</param>
/// <param name="ae">Comté/Ville</param>
/// <returns>Retourner DataTable</returns>
[AjaxPro.AjaxMethod]
public DataTable GetDataTable (chaîne UpID, AreaEnum ae)
...{
si (String.IsNullOrEmpty(UpID))
renvoie null ;

lien de chaîne = "serveur=XXX;utilisateur=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

//Les noms de colonnes du DataTable renvoyés par Oracle sont tous en majuscules. N'oubliez pas d'utiliser des lettres majuscules lors de la récupération des valeurs sur la page.
chaîne sql ;
if (Enum.Equals(ae, AreaEnum.Xian))
sql = "SELECT id, nom FROM City WHERE THREEID=0 AND TWOID=" + UpID ;
autre
sql = "SELECT id,name FROM City WHERE THREEID=" + UpID

adaptateur OracleDataAdapter = new OracleDataAdapter(sql, conn);
Table DataTable = new DataTable();
adaptateur.Fill(table);
table de retour ;
}
}

/**//// <résumé>
/// Énumération des régions
/// </summary>
énumération publique AreaEnum
...{
/**//// <résumé>
/// comté
/// </summary>
Xian,
/**//// <résumé>
/// ville
/// </summary>
Zén
}

À ce stade, les fonctions de base sont implémentées, ainsi que certaines fonctions (détermination de la région via le nom de domaineIP et liaison directe, enregistrement de la région sélectionnée, lecture/enregistrement pratique des informations sur la ville pour effectuer des contrôles, etc.). Je le terminerai quand j'aurai le temps.

N'oubliez pas d'ajouter

dans <system.web> de Web.config