AjaxPro를 사용하여 4레벨 비새로 고침 연결 드롭다운 상자 개발

저자：Eve Cole 업데이트 시간：2009-07-06 16:39:16

개발 환경 VS.NET 2005 C# Oracle AjaxPro

최근 일이 바빠서 자세히 설명할 시간이 없어서 직접 보도록 일반적인 소스 코드를 올려보겠습니다.

성능상의 이유로 주, 시 수준은 JS 배열로 작성하고, 군, 구(읍) 수준은 Oracle로 작성했습니다. C#을 트리거하여 JS를 통해 데이터베이스를 읽은 다음 데이터를 다시 JS로 전달한 다음 표시를 위해 바인딩합니다.

<select> 작업은 options.add()를 사용하는 대신 더 일반적인 createElement()를 사용합니다.

<%@ 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="서버">
<title>지역</title>
</head>
<본문>
<form id="form1" runat="서버">
<테이블>
<tr>
<TD>
<id를 선택="SF">
<option selected="selected">—선택하세요—</option>
</select>
</td>
<TD>
<id를 선택="CS">
<option selected="selected">—선택하세요—</option>
</select>
</td>
<TD>
<select id="시안">
<option selected="selected">—선택하세요—</option>
</select>
</td>
<TD>
<select id="젠">
<option selected="selected">—선택하세요—</option>
</select>
</td>
</tr>
</table>

//DOM을 통해 드롭다운 상자 만들기 http://www.downcodes.com/qq.asp
//obj: 드롭다운 상자의 옵션 데이터 세트
//id: 드롭다운 상자의 ID
함수 CreateDropDownList(obj,id)
...{
var sel=document.getElementById(id);
sel.options.length=1; //저장 "—선택하세요—"
//배열 저장소는 주로 지방과 도시에 사용되며, C#은 카운티와 도시에 대한 데이터베이스에서 읽는 데 사용됩니다.
if(obj==null)return;
if(obj 인스턴스 배열)
...{
for(var i=0;i<obj.length;i++)
...{
var op=document.createElement("옵션");
op.setAttribute("value",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
또 다른
...{
for(var i=0;i<obj.Rows.length;i++) //이것은 Count가 아니라 길이입니다.
...{
var op=document.createElement("옵션");
op.setAttribute("value",obj.Rows[i].ID) //대소문자를 구분합니다.
var txt=document.createTextNode(obj.Rows[i].NAME); //루트 DataTable의 열 이름은 일관성이 있어야 합니다.
op.appendChild(txt);
sel.appendChild(op);
}
}
//다음 드롭다운 상자 바인딩
스위치(id)
...{
케이스 "SF":sel.onchange=function()......{ClearXianZhen();CreateDropDownList(GetArray(this.value),"CS");};break;
케이스 "CS":sel.onchange=function()......{ClearZhen();CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Xian).value,"Xian");};break / /JS는 매개변수를 C#에 전달하고 C#의 반환 값을 가져옵니다.
case "Xian":sel.onchange=function()...{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break;
기본값:sel.onchange=function()......{alert(this.value);};break;
}
}

//실행 항목
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

//필요한 배열을 가져옵니다.
//tar=속해 있는 지방 ID
함수 GetArray(val)
...{
var temp=new 배열();
var j=0;
for(var i=0;i<aDQ.length;i++)
...{
if(aDQ[i][2].toString()==val)
...{
온도[j]=aDQ[i];
//temp[j].push(aDQ[i]);
j++;
}
}
복귀온도;
}

//"마을" 드롭다운 상자 지우기
함수 ClearZhen()
...{
CreateDropDownList(null,"젠");
}
//"County" 및 "Town" 드롭다운 상자를 지웁니다.
함수 ClearXianZhen()
...{
CreateDropDownList(null,"시안");
CreateDropDownList(null,"젠");
}

</script>

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

시스템 사용;
System.Data 사용;
System.Data.OracleClient 사용;

공용 부분 클래스 영역: System.Web.UI.Page
...{
protected void Page_Load(개체 전송자, EventArgs e)
...{
//C# 클래스와 열거형을 각각 JS에 등록합니다.
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <요약>
/// 드롭다운 상자에 필요한 데이터 가져오기
/// </summary>
/// <param name="UpID">상위 아이디</param>
/// <param name="ae">군/군</param>
/// <returns>DataTable 반환</returns>
[AjaxPro.Ajax메소드]
공개 DataTable GetDataTable(문자열 UpID, AreaEnum ae)
...{
if(String.IsNullOrEmpty(UpID))
null 반환;

문자열 링크 = "서버=XXX;사용자=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

//Oracle이 반환한 DataTable의 열 이름은 모두 대문자입니다. 페이지에서 값을 가져올 때 대문자를 사용해야 합니다.
문자열SQL;
if (Enum.Equals(ae, AreaEnum.Xian))
sql = "3ID=0 AND 2ID인 도시에서 ID, 이름을 선택하세요=" + UpID;
또 다른
sql = "ID 선택, 이름 FROM City WHERE THREEID=" + UpID;

OracleDataAdapter 어댑터 = new OracleDataAdapter(sql, conn);
DataTable 테이블 = 새로운 DataTable();
어댑터.채우기(테이블);
반환 테이블;
}
}

/**//// <요약>
/// 지역 열거
/// </summary>
공개 열거형 AreaEnum
...{
/**//// <요약>
/// 카운티
/// </summary>
시안,
/**//// <요약>
/// 도시
/// </summary>
젠
}

이제 기본 기능이 구현되고, 몇 가지 기능(도메인명IP로 지역을 결정하고 직접 바인딩, 선택한 지역을 저장, 도시 정보를 편리하게 읽어/저장하여 제어하는 등)도 있습니다. 시간이 나면 끝내겠습니다.

Web.config의 <system.web>에

<httpHandlers>를

추가하는 것을 잊지 마세요.