최근 일부 웹사이트 프로그램을 사용하고 있는데 여러 드롭다운 메뉴 옵션을 자주 사용합니다. 소개를 읽은 후 AjaxPro 컨트롤을 사용하기 시작했는데 효과가 좋은 것 같습니다. 이전에 MagicAjax를 사용해 보았지만 오랫동안 사용하지 않고 잊어버렸습니다. 가장 귀찮은 것은 가상 디렉터리 작업 시 더 번거롭다는 것입니다. ㅎㅎ 인터넷에 많은 것들이 있지만 초보자들은 그렇지 않은 경우가 많습니다. 저도 중요한 점을 상기시켰으니 전문가들은 무시해주세요. AjaxPro는 비교적 사용하기 쉬운 것으로 알고 이번에는 6.x를 사용했는데, 최신 버전인 7.0이 더 편리한 것 같아 선택하게 되었습니다.
중요한 곳에 힌트가 있어서 이해하기 쉽다고 생각합니다.
먼저 다음과 같이 web.config의 <system.web>과 </system.web> 사이에 이 접점을 추가합니다.
<시스템.웹>
<!--Ajaxnet의 경우-->
<http핸들러>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</http핸들러>
<!--기타 설정-->
</system.web>
그런 다음 AjaxPro.2.dll을 bin 폴더에 넣고 참조합니다.
코드를 보내는 것이 더 좋지만 너무 번거롭습니다. 아래 코드는 Default.aspx.cs에서 가져온 것입니다.
시스템 사용;
System.Data 사용;
System.Configuration 사용;
System.Data.OleDb 사용;
System.Web 사용;
System.Web.UI 사용;
System.Web.UI.WebControls 사용;
System.Web.UI.WebControls.WebParts 사용;
System.Web.UI.HtmlControls 사용;
공개 부분 클래스 _Default: System.Web.UI.Page
{
protected void Page_Load(개체 전송자, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)) //필수
if(!IsPostBack)BindDc();
}
/**//// <요약>
/// 데이터베이스 연결 http://www.downcodes.com
/// </summary>
/// <반환></반환>
공개 OleDbConnection myConn()
{
string ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
OleDbConnection conn = new OleDbConnection(ConnStr);
노력하다
{
conn.Open();
반환 연결;
}
잡다
{
던지다;
}
}
/**//// <요약>
/// 하위 수준 카테고리 가져오기
/// </summary>
[AjaxPro.Ajax메소드]
공개 DataSet getNextClass(문자열 cid)
{
//페이지가 필드 이름을 알기를 원하지 않기 때문에 txt, id를 vol으로 사용하면 =을 사용할 수 있습니다.
//페이지에서 얻은 열 이름은 이 이름과 동일해야 하며 대소문자를 구분합니다. 이는 일반적으로 간과하기 쉬운 부분입니다.
//따라서 2차 분류는 변경되지 않았습니다.
string sql = @"cname을 txt로 선택하고, id를 webclass의 vol으로 선택합니다. 여기서 parentid=" + cid;
노력하다
{
getDs(sql)를 반환합니다.
}
잡다
{
//던지다;
null을 반환;
}
}
/**//// <요약>
/// 데이터세트 반환
/// </summary>
/// <param 이름="SQL"></param>
/// <반환></반환>
공개 데이터 세트 getDs(문자열 SQL)
{
OleDbConnection conn = myConn();
DataSet Ds = 새로운 DataSet();
OleDbDataAdapter Da = new OleDbDataAdapter(SQL, conn);
노력하다
{
Da.Fill(Ds);
D를 반환합니다.
}
잡다
{
null을 반환;
//던지다;
}
}
/**//// <요약>
/// //데이터 바인딩
/// </summary>
개인 무효 BindDc()
{
//첫번째
string sql = @"select * from 웹클래스에서 Parentid=0";
ddl1.DataSource = getDs(sql);
ddl1.DataTextField = "cname";
ddl1.DataValueField = "id";
ddl1.DataBind();
if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");
//먼저 DropDownList.SelectedItem.Value를 결정할 수 있습니다.
//두번째
sql = @"select * 웹클래스에서 parentid=" + ddl1.SelectedItem.Value;
ddl2.DataSource = getDs(sql);
ddl2.DataTextField = "cname";
ddl2.DataValueField = "id";
ddl2.DataBind();
//세번째
if (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");
sql = @"select * 웹클래스에서 parentid=" + ddl2.SelectedItem.Value;
ddl3.DataSource = getDs(sql);
ddl3.DataTextField = "cname";
ddl3.DataValueField = "id";
ddl3.DataBind();
}
}
default.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="서버">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxPro는 새로 고침 없이 3단계 연결을 구현합니다</title>
</head>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
<!--
//ACLOUD 일반 JS 함수
함수 getBid(들){
document.getElementById(s)를 반환합니다.
}
함수 getBmc(들){
return document.getElementByName(s);
}
//카테고리 목록 표시
함수 showNext(sid,obj)
{
if(sid==null || sid=="" || sid.length<1)return;
var slt =getBid(obj);
var v = _Default.getNextClass(sid).value // 클래스 이름
//경고(v);
//반품;
if (v != null){
if(v != null && typeof(v) == "객체" && v.Tables != null)
{
slt.길이 = 0;
slt.options.add(new Option("선택하세요",0));
//주로 onchange 이벤트를 트리거하기 위해 "선택하세요"를 추가했습니다.
if(obj=="ddl2"){
getBid("ddl3").options.length=0;
getBid("ddl3").options.add(new Option("선택하세요",0));
}
for(var i=0; i<v.Tables[0].Rows.length; i++)
{
var txt = v.Tables[0].Rows[i].txt; //이 위치는 대소문자를 구분해야 합니다. var vol = v.Tables[0].Rows[i].vol; 데이터 세트 테이블 이름은 일관되어야 합니다. slt.options.add(new Option(txt,vol));
}
}
}
반품;
}
-->
</script>
<본문>
<form id="form1" runat="서버">
<div>
<table width="500" border="0" align="center" cellpadding="0" 세포 간격="0">
<tr>
<td width="99"> </td>
<td 너비="401">
도시<asp:DropDownList ID="ddl1" runat="server">
</asp:드롭다운리스트>
지역<asp:DropDownList ID="ddl2" runat="server">
</asp:드롭다운리스트>
정원<asp:DropDownList ID="ddl3" runat="서버">
</asp:DropDownList></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
관련 문서