He estado haciendo algunos programas de sitios web recientemente y, a menudo, uso varias opciones del menú desplegable. Después de leer la introducción, comencé a usar el control AjaxPro y siento que el efecto es bueno. He usado MagicAjax antes, pero lo olvidé después de no usarlo durante mucho tiempo. Lo más problemático es que es más problemático cuando trabajo con directorios virtuales Jaja, hay muchos en Internet, pero los principiantes a menudo no. Me recordó puntos importantes. A mí también, así que los expertos lo ignoran. Vi que AjaxPro es relativamente fácil de usar. Esta vez usé 6.x, y la última versión es 7.x. Pensé que la serie 6.0 era más conveniente, así que la elegí.
Hay pistas en lugares importantes, creo que es fácil de entender.
Primero agregue este punto de contacto entre <system.web> y </system.web> en web.config, de la siguiente manera:
<sistema.web>
<!--para Ajaxnet-->
<controladoreshttp>
<agregar verbo="POST,GET" ruta="ajaxpro/*.ashx" tipo="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
<!--Otras configuraciones-->
</sistema.web>
Luego, coloque AjaxPro.2.dll en la carpeta bin y haga referencia a él.
Es mejor enviar el código, es demasiado problemático. El siguiente código es de Default.aspx.cs.
usando Sistema;
usando System.Data;
usando System.Configuration;
usando System.Data.OleDb;
usando System.Web;
utilizando System.Web.UI;
usando System.Web.UI.WebControls;
usando System.Web.UI.WebControls.WebParts;
usando System.Web.UI.HtmlControls
clase parcial pública _Default: System.Web.UI.Page
{
Page_Load vacío protegido (remitente del objeto, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default) //Necesario
if(!IsPostBack)BindDc();
}
/**//// <resumen>
/// Conexión a la base de datos http://www.downcodes.com
/// </summary>
/// <devoluciones></devoluciones>
conexión OleDb pública myConn()
{
cadena ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
Conexión OleDbConnection = nueva OleDbConnection(ConnStr);
intentar
{
conexión.Open();
conexión de retorno;
}
atrapar
{
tirar;
}
}
/**//// <resumen>
/// Obtener categorías de nivel inferior
/// </summary>
[Método AjaxPro.Ajax]
conjunto de datos público getNextClass (cadena cid)
{
//Porque no queremos que la página sepa el nombre del campo, entonces como txt, id como vol. Si es sql ser, puedes usar =.
//El nombre de la columna obtenida por la página debe ser el mismo que este y distingue entre mayúsculas y minúsculas. Este suele ser un lugar fácil de pasar por alto.
// Entonces la clasificación secundaria no ha cambiado.
string sql = @"seleccione cname como txt,id como vol de webclass donde parentid=" + cid;
intentar
{
devolver getDs(sql);
}
atrapar
{
//tirar;
devolver nulo;
}
}
/**//// <resumen>
/// Devolver un conjunto de datos
/// </summary>
/// <param nombre="SQL"></param>
/// <devoluciones></devoluciones>
conjunto de datos público getDs (cadena SQL)
{
Conexión OleDbConnection = myConn();
Conjunto de datos Ds = nuevo conjunto de datos();
OleDbDataAdapter Da = nuevo OleDbDataAdapter(SQL, conexión);
intentar
{
Da.Relleno(Ds);
devolver D;
}
atrapar
{
devolver nulo;
//tirar;
}
}
/**//// <resumen>
/// //Enlace de datos
/// </summary>
vacío privado BindDc()
{
//primero
string sql = @"select * de clase web donde Parentid=0";
ddl1.DataSource = getDs(sql);
ddl1.DataTextField = "cnombre";
ddl1.DataValueField = "identificación";
ddl1.DataBind();
if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");
// Primero puedes determinar DropDownList.SelectedItem.Value
//El segundo
sql = @"select * de clase web donde parentid=" + ddl1.SelectedItem.Value;
ddl2.DataSource = getDs(sql);
ddl2.DataTextField = "cnombre";
ddl2.DataValueField = "identificación";
ddl2.DataBind();
//El tercero
if (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");
sql = @"select * de clase web donde parentid=" + ddl2.SelectedItem.Value;
ddl3.DataSource = getDs(sql);
ddl3.DataTextField = "cnombre";
ddl3.DataValueField = "identificación";
ddl3.DataBind();
}
}
contenido predeterminado.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<head runat="servidor">
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312" />
<title>AjaxPro realiza un enlace de tres niveles sin actualización</title>
</cabeza>
<script idioma="javascript" tipo="texto/javascript">
<!--
//Funciones JS comunes en ACLOUD
función obtener oferta(s){
devolver document.getElementById(s);
}
función obtenerBmc(s){
devolver document.getElementByName(s);
}
//Mostrar lista de categorías
función mostrarSiguiente(sid,obj)
{
if(sid==null || sid=="" || sid.length<1)return;
var slt =obtenerOferta(obj);
var v = _Default.getNextClass(sid).value // El nombre de la clase;
//alerta(v);
//devolver;
si (v != nulo){
if(v != null && typeof(v) == "objeto" && v.Tables != null)
{
longitud slt = 0;
slt.options.add(nueva opción("Seleccione",0));
//Se agregó "Por favor seleccione" principalmente para activar el evento onchange
si(obj=="ddl2"){
getBid("ddl3").options.length=0;
getBid("ddl3").options.add(new Option("Seleccione",0));
}
for(var i=0; i<v.Tables[0].Filas.longitud; i++)
{
var txt = v.Tables[0].Rows[i].txt; //Este lugar debe distinguir entre mayúsculas y minúsculas var vol = v.Tables[0].Rows[i].vol; la tabla del conjunto de datos Los nombres deben ser consistentes slt.options.add(new Option(txt,vol));
}
}
}
devolver;
}
-->
</script>
<cuerpo>
<formulario id="form1" runat="servidor">
<div>
<table width="500" border="0" align="center" cellpadding="0" cellspace="0">
<tr>
<td ancho="99"></td>
<td ancho="401">
Ciudad<asp:DropDownList ID="ddl1" runat="server">
</asp:ListaDesplegable>
Región<asp:DropDownList ID="ddl2" runat="servidor">
</asp:ListaDesplegable>
Jardín<asp:DropDownList ID="ddl3" runat="server">
</asp:DropDownList></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tabla>
</div>
</formulario>
</cuerpo>
</html>
Documentos relacionados