Tenho feito alguns programas de sites recentemente e costumo usar várias opções de menu suspenso. Depois de ler a introdução, comecei a usar o controle AjaxPro e sinto que o efeito é bom. Já usei MagicAjax antes, mas esqueci dele depois de muito tempo sem usá-lo. O mais problemático é que é mais problemático trabalhar com diretórios virtuais Haha, existem muitos na Internet, mas muitas vezes os novatos não. lembrei de pontos importantes. Eu também, então os especialistas, por favor, ignorem. Vi que o AjaxPro é relativamente fácil de usar. Desta vez usei o 6.x, e o mais recente é o 7.x, achei a série 6.0 mais conveniente, então escolhi.
Há dicas em lugares importantes, acredito que sejam fáceis de entender.
Primeiro adicione este ponto de contato entre <system.web> e </system.web> em web.config, como segue:
<sistema.web>
<!--para Ajaxnet-->
<httpHandlers>
<add verbo="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
<!--Outras configurações-->
</system.web>
Em seguida, jogue AjaxPro.2.dll na pasta bin e faça referência a ele.
É melhor enviar o código, é muito problemático. O código abaixo é de Default.aspx.cs.
usando o sistema;
usando System.Data;
usando System.Configuration;
usando System.Data.OleDb;
usando System.Web;
usando System.Web.UI;
usando System.Web.UI.WebControls;
usando System.Web.UI.WebControls.WebParts;
usando System.Web.UI.HtmlControls
classe parcial pública _Default: System.Web.UI.Page;
{
protegido void Page_Load (remetente do objeto, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
if(!IsPostBack)BindDc();
}
/**//// <resumo>
/// Conexão com o banco de dados http://www.downcodes.com
/// </sumário>
/// <retorna></retorna>
public OleDbConnection myConn()
{
string ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Fonte de dados=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
conexão OleDbConnection = new OleDbConnection(ConnStr);
tentar
{
conexão.Open();
conexão de retorno;
}
pegar
{
lançar;
}
}
/**//// <resumo>
/// Obtenha categorias de nível inferior
/// </sumário>
[AjaxPro.AjaxMethod]
DataSet público getNextClass(string cid)
{
//Porque não queremos que a página saiba o nome do campo, então como txt, id como vol. Se for sql ser, você pode usar =.
//O nome da coluna obtido pela página deve ser igual a este e diferencia maiúsculas de minúsculas. Geralmente é um lugar fácil de ignorar.
//Então a classificação secundária não mudou
string sql = @"selecione cname como txt,id como vol da webclass onde parentid=" + cid;
tentar
{
retornar getDs(sql);
}
pegar
{
//lançar;
retornar nulo;
}
}
/**//// <resumo>
/// Retorna um DataSet
/// </sumário>
/// <param name="SQL"></param>
/// <retorna></retorna>
getDs do conjunto de dados público (string SQL)
{
OleDbConnection conn = minhaConn();
DataSet Ds = new DataSet();
OleDbDataAdapter Da = new OleDbDataAdapter(SQL, conexão);
tentar
{
Da.Preenchimento(Ds);
retornar D;
}
pegar
{
retornar nulo;
//lançar;
}
}
/**//// <resumo>
/// //Vinculação de dados
/// </sumário>
vazio privado BindDc()
{
//primeiro
string sql = @"select * da webclass onde Parentid=0";
ddl1.DataSource = getDs(sql);
ddl1.DataTextField = "cnome";
ddl1.DataValueField = "id";
ddl1.DataBind();
if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");
//Você pode primeiro determinar DropDownList.SelectedItem.Value
//Segundo
sql = @"select * da webclass onde parentid=" + ddl1.SelectedItem.Value;
ddl2.DataSource = getDs(sql);
ddl2.DataTextField = "cnome";
ddl2.DataValueField = "id";
ddl2.DataBind();
//O terceiro
if (ddl2.DataSource! = null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");
sql = @"select * da webclass onde parentid=" + ddl2.SelectedItem.Value;
ddl3.DataSource = getDs(sql);
ddl3.DataTextField = "cnome";
ddl3.DataValueField = "id";
ddl3.DataBind();
}
}
conteúdo padrão.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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="servidor">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxPro realiza ligação de três níveis sem atualização</title>
</head>
<linguagem script="javascript" type="text/javascript">
<!--
//Funções JS comuns do ACLOUD
function getBid(s){
retornar document.getElementById(s);
}
função getBmc(s){
retornar document.getElementByName(s);
}
//Mostra lista de categorias
função mostrarPróximo(sid,obj)
{
if(sid==null || sid=="" || sid.length<1)return;
var slt =getBid(obj);
var v = _Default.getNextClass(sid).value; // O nome da classe
//alerta(v);
//retornar;
se (v != nulo){
if(v != null && typeof(v) == "objeto" && v.Tables != null)
{
slt.comprimento = 0;
slt.options.add(new Option("Por favor selecione",0));
//Adicionado "Por favor, selecione" principalmente para acionar o evento onchange
if(obj=="ddl2"){
getBid("ddl3").options.length=0;
getBid("ddl3").options.add(new Option("Por favor selecione",0));
}
for(var i=0; i<v.Tables[0].Rows.length; i++)
{
var txt = v.Tables[0].Rows[i].txt; //Este local precisa diferenciar maiúsculas de minúsculas var vol = v.Tables[0].Rows[i].vol; a tabela do conjunto de dados Os nomes devem ser consistentes slt.options.add(new Option(txt,vol));
}
}
}
retornar;
}
-->
</script>
<corpo>
<form id="form1" runat="servidor">
<div>
<table width="500" border="0" align="center" cellpadding="0" cellpacing="0">
<tr>
<td width="99"> </td>
<td largura="401">
Cidade<asp:DropDownList ID="ddl1" runat="server">
</asp:DropDownList>
Região<asp:DropDownList ID="ddl2" runat="server">
</asp:DropDownList>
Jardim<asp:DropDownList ID="ddl3" runat="server">
</asp:DropDownList></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tabela>
</div>
</form>
</body>
</html>
Documentos relacionados