Uso de AjaxPro para desarrollar un cuadro desplegable de vinculación sin actualización de cuatro niveles

Autor：Eve Cole Fecha de actualización：2009-07-06 16:39:16

Entorno de desarrollo VS.NET 2005 C# Oracle AjaxPro

He estado ocupado recientemente y no tengo tiempo para explicarlo en detalle, así que publicaré el código fuente general para verlo por mí mismo.

Por motivos de rendimiento, los niveles de provincia y ciudad se escriben como matrices JS, y los niveles de condado y distrito (ciudad) se escriben en Oracle. Active C# para leer la base de datos a través de JS, luego pase los datos a JS y luego vincúlelos para mostrarlos.

La operación <select> usa el createElement() más general en lugar de usar options.add()

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns=" http://www.w3.org/1999/xhtml " >
<head runat="servidor">
<título>Región</título>
</cabeza>
<cuerpo>
<formulario id="form1" runat="servidor">
<tabla>
<tr>
<td>
<seleccione id="SF">
<option selected="selected">—Por favor seleccione—</option>
</seleccionar>
</td>
<td>
<seleccione id="CS">
<option selected="selected">—Por favor seleccione—</option>
</seleccionar>
</td>
<td>
<seleccione id="Xian">
<option selected="selected">—Por favor seleccione—</option>
</seleccionar>
</td>
<td>
<seleccione id="Zhen">
<option selected="selected">—Por favor seleccione—</option>
</seleccionar>
</td>
</tr>
</table>

//Crea un cuadro desplegable a través de DOM http://www.downcodes.com/qq.asp
//obj: conjunto de datos de opciones del cuadro desplegable
//id: la identificación del cuadro desplegable
función CreateDropDownList(obj,id)
...{
var sel=document.getElementById(id);
sel.options.length=1; //Guardar "—Seleccione—"
// El almacenamiento de matrices se usa comúnmente para provincias y ciudades, y C# se usa para leer desde la base de datos de condados y pueblos.
si(obj==nulo)retorno;
si (obj instancia de matriz)
...{
para(var i=0;i<obj.length;i++)
...{
var op=document.createElement("opción");
op.setAttribute("valor",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
demás
...{
for(var i=0;i<obj.Rows.length;i++) //Tenga en cuenta que esto es longitud, no recuento
...{
var op=document.createElement("opción");
op.setAttribute("value",obj.Rows[i].ID); //Tenga en cuenta que distingue entre mayúsculas y minúsculas.
var txt=document.createTextNode(obj.Rows[i].NAME //Los nombres de las columnas de la DataTable raíz deben ser consistentes
op.appendChild(txt);
sel.appendChild(op);
}
}
// Vincula el siguiente cuadro desplegable
cambiar(identificación)
...{
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 pasa parámetros a C# y obtiene el valor de retorno de C#
case "Xian":sel.onchange=function()...{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break;
predeterminado:sel.onchange=function()......{alert(this.value);};break;
}
}

//Entrada de ejecución
vararr=GetArray("0");
CreateDropDownList(arr,"SF");

//Obtiene la matriz requerida
//tar=ID de Provincia a la que pertenece
función ObtenerArray(val)
...{
var temp=nueva matriz();
varj=0;
para(var i=0;i<aDQ.length;i++)
...{
si(aDQ[i][2].toString()==val)
...{
temp[j]=aDQ[i];
//temp[j].push(aDQ[i]);
j++;
}
}
temperatura de retorno;
}

//Borrar el cuadro desplegable "Ciudad"
función ClearZhen()
...{
CreateDropDownList(nulo,"Zhen");
}
//Borrar los cuadros desplegables "Condado" y "Ciudad"
función ClearXianZhen()
...{
CreateDropDownList(nulo,"Xian");
CreateDropDownList(nulo,"Zhen");
}

</script>

</form>
</cuerpo>
</html>

usando Sistema;
usando System.Data;
usando System.Data.OracleClient

área de clase parcial pública: System.Web.UI.Page
...{
Page_Load vacío protegido (remitente del objeto, EventArgs e)
...{
//Registrar clases de C# y enumeraciones en JS respectivamente
AjaxPro.Utility.RegisterTypeForAjax(tipode(Área));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <resumen>
/// Obtener los datos requeridos por el cuadro desplegable
/// </summary>
/// <param name="UpID">ID de nivel superior</param>
/// <param name="ae">Condado/Ciudad</param>
/// <returns>Devolver tabla de datos</returns>
[Método AjaxPro.Ajax]
tabla de datos pública GetDataTable (cadena UpID, AreaEnum ae)
...{
si (String.IsNullOrEmpty(UpID))
devolver nulo;

enlace de cadena = "servidor=XXX;usuario=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

// Los nombres de las columnas en la tabla de datos devuelta por Oracle están todos en letras mayúsculas. Recuerde usar letras mayúsculas al recuperar valores en la página.
cadena sql;
si (Enum.Equals(ae, AreaEnum.Xian))
sql = "SELECCIONAR id,nombre DE Ciudad DONDE TRESID=0 Y DOSID=" + UpID;
demás
sql = "SELECCIONAR id, nombre DE Ciudad DONDE TRESID=" + UpID

adaptador OracleDataAdapter = nuevo OracleDataAdapter(sql, conn);
Tabla de datos = nueva tabla de datos();
adaptador.Rellenar(tabla);
tabla de retorno;
}
}

/**//// <resumen>
/// Enumeración de regiones
/// </summary>
enumeración pública AreaEnum
...{
/**//// <resumen>
/// condado
/// </summary>
xian,
/**//// <resumen>
/// ciudad
/// </summary>
zhen
}

En este punto, se implementan las funciones básicas, y también hay algunas funciones (determinar la región a través del nombre de dominio IP y vincularla directamente, guardar la región seleccionada, leer/guardar convenientemente la información de la ciudad para realizar controles, etc.). Lo terminaré cuando tenga tiempo.

Recuerde agregar

en <system.web> de Web.config