Usando AjaxPro para desenvolver uma caixa suspensa de ligação sem atualização de quatro níveis

Autor：Eve Cole Data da Última Atualização：2009-07-06 16:39:16

Ambiente de desenvolvimento VS.NET 2005 C# Oracle AjaxPro

Tenho estado ocupado recentemente e não tenho tempo para explicar em detalhes, então postarei o código-fonte geral para ver por mim mesmo.

Por razões de desempenho, os níveis de província e cidade são escritos como matrizes JS, e os níveis de condado e distrito (cidade) são escritos em Oracle. Acione C# para ler o banco de dados por meio de JS, depois passe os dados de volta para JS e vincule-os para exibição.

A operação <select> usa o createElement() mais geral em vez de usar 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="servidor">
<title>Região</title>
</head>
<corpo>
<form id="form1" runat="servidor">
<tabela>
<tr>
<td>
<selecione id="SF">
<option selected="selected">—Selecione—</option>
</selecionar>
</td>
<td>
<selecione id="CS">
<option selected="selected">—Selecione—</option>
</selecionar>
</td>
<td>
<selecione id="Xian">
<option selected="selected">—Selecione—</option>
</selecionar>
</td>
<td>
<selecione id="Zhen">
<option selected="selected">—Selecione—</option>
</selecionar>
</td>
</tr>
</table>

//Cria uma caixa suspensa através do DOM http://www.downcodes.com/qq.asp
//obj: conjunto de dados de opções da caixa suspensa
//id: o id da caixa suspensa
função CreateDropDownList(obj,id)
...{
var sel=document.getElementById(id);
sel.options.length=1; //Salvar "—Por favor selecione—"
//O armazenamento de array é comumente usado para províncias e cidades, e C# é usado para ler o banco de dados para condados e cidades.
if(obj==nulo)return;
if(obj instância de Array)
...{
for(var i=0;i<obj.comprimento;i++)
...{
var op=document.createElement("opção");
op.setAttribute("valor",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
outro
...{
for(var i=0;i<obj.Rows.length;i++) //Observe que isso é comprimento, não contagem
...{
var op=document.createElement("opção");
op.setAttribute("value",obj.Rows[i].ID); //Observe que diferencia maiúsculas de minúsculas.
var txt=document.createTextNode(obj.Rows[i].NAME); //Os nomes das colunas da DataTable raiz devem ser consistentes
op.appendChild(txt);
sel.appendChild(op);
}
}
// Vincula a próxima caixa suspensa
mudar (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 passa parâmetros para C# e obtém o valor de retorno de C#
case "Xian":sel.onchange=function()...{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break valor;
padrão:sel.onchange=function()......{alert(this.value);};break;
}
}

//Entrada de execução
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

//Obtém o array necessário
//tar=ID da província à qual pertence
função GetArray(val)
...{
var temp=new Array();
varj=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++;
}
}
temperatura de retorno;
}

//Limpa a caixa suspensa "Cidade"
função ClearZhen()
...{
CreateDropDownList(null,"Zhen");
}
//Limpa as caixas suspensas "Condado" e "Cidade"
função ClearXianZhen()
...{
CreateDropDownList(null,"Xian");
CreateDropDownList(null,"Zhen");
}

</script>

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

usando o sistema;
usando System.Data;
usando System.Data.OracleClient

área de classe parcial pública: System.Web.UI.Page;
...{
protegido void Page_Load (remetente do objeto, EventArgs e)
...{
//Registra classes e enumerações C# em JS respectivamente
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <resumo>
/// Obtenha os dados exigidos pela caixa suspensa
/// </sumário>
/// <param name="UpID">ID de nível superior</param>
/// <param name="ae">Condado/Cidade</param>
/// <returns>Retornar DataTable</returns>
[AjaxPro.AjaxMethod]
DataTable pública GetDataTable(string UpID, AreaEnum ae)
...{
if (String.IsNullOrEmpty(UpID))
retornar nulo;

string link = "servidor=XXX;usuário=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

//Os nomes das colunas no DataTable retornados pelo Oracle estão todos em letras maiúsculas. Lembre-se de usar letras maiúsculas ao buscar valores na página.
stringsql;
if (Enum.Equals(ae, AreaEnum.Xian))
sql = "SELECIONE id,nome FROM Cidade WHERE THREEID=0 AND TWOID=" + UpID;
outro
sql = "SELECT id,nome FROM Cidade WHERE THREEID=" + UpID

adaptador OracleDataAdapter = new OracleDataAdapter(sql, conn);
tabela DataTable = new DataTable();
adaptador.Fill(tabela);
tabela de retorno;
}
}

/**//// <resumo>
/// Enumeração de região
/// </sumário>
enum público AreaEnum
...{
/**//// <resumo>
/// condado
/// </sumário>
Xian,
/**//// <resumo>
/// cidade
/// </sumário>
Zhen
}

Neste ponto, as funções básicas são implementadas, e também existem algumas funções (determinar a região através de nome de domínioIP e vincular diretamente, salvar a região selecionada, ler/salvar convenientemente informações da cidade para fazer controles, etc.). Vou terminar quando tiver tempo.

Lembre-se de adicionar

em <system.web> do Web.config