ฉันได้ทำโปรแกรมเว็บไซต์บางโปรแกรมเมื่อเร็ว ๆ นี้ และฉันมักจะใช้ตัวเลือกเมนูแบบเลื่อนลงหลายตัว หลังจากอ่านบทนำ ฉันก็เริ่มใช้การควบคุม AjaxPro และฉันรู้สึกว่าเอฟเฟกต์นั้นดี ฉันเคยใช้ MagicAjax มาก่อน แต่ฉันลืมมันไปหลังจากที่ไม่ได้ใช้งานมาเป็นเวลานาน สิ่งที่ลำบากที่สุดคือการทำงานกับไดเร็กทอรีเสมือนจะลำบากกว่า ฮ่าๆ มีมากมายบนอินเทอร์เน็ต แต่มือใหม่มักไม่เป็นเช่นนั้น เตือนถึงประเด็นสำคัญ ฉันก็เช่นกัน ดังนั้นผู้เชี่ยวชาญโปรดอย่าสนใจเลย ฉันเห็นว่า AjaxPro ค่อนข้างใช้งานง่าย ครั้งนี้ฉันใช้ 6.x และอันล่าสุดคือ 7.x ฉันคิดว่าซีรีส์ 6.0 สะดวกกว่า ดังนั้นฉันจึงเลือกมัน
มีคำใบ้ในสถานที่สำคัญผมเชื่อว่าเข้าใจง่าย
ขั้นแรกให้เพิ่มจุดติดต่อระหว่าง <system.web> และ </system.web> ใน web.config ดังนี้:
<system.เว็บ>
<!--สำหรับอาแจ็กซ์เน็ต-->
<httpตัวจัดการ>
<เพิ่มกริยา = "POST, GET" path = "ajaxpro/*.ashx" type = "AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpตัวจัดการ>
<!--การตั้งค่าอื่นๆ-->
</system.เว็บ>
จากนั้นโยน AjaxPro.2.dll ลงในโฟลเดอร์ bin และอ้างอิง
ส่งโค้ดดีกว่าครับ ยุ่งยากเกินไป โค้ดด้านล่างนี้มาจาก Default.aspx.cs
ใช้ระบบ;
ใช้ System.Data;
โดยใช้ระบบการกำหนดค่า;
โดยใช้ 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
-
โมฆะที่ได้รับการป้องกัน Page_Load (ผู้ส่งวัตถุ EventArgs e)
-
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); //จำเป็น
ถ้า(!IsPostBack)BindDc();
}
/**//// <สรุป>
/// การเชื่อมต่อฐานข้อมูล http://www.downcodes.com
/// </สรุป>
/// <ส่งคืน></ส่งคืน>
OleDbConnection สาธารณะ myConn ()
-
สตริง ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
OleDbConnection conn = OleDbConnection ใหม่ (ConnStr);
พยายาม
-
conn.เปิด();
กลับคอน;
-
จับ
-
โยน;
-
-
/***////// <สรุป>
/// รับหมวดหมู่ระดับล่าง
/// </สรุป>
[AjaxPro.AjaxMethod]
ชุดข้อมูลสาธารณะ getNextClass (สตริง cid)
-
//เพราะเราไม่ต้องการให้เพจทราบชื่อฟิลด์ ดังนั้นเป็น txt, id เป็น vol. ถ้าเป็น sql ser คุณสามารถใช้ = ได้
//ชื่อคอลัมน์ที่ได้รับจากเพจจะต้องเหมือนกับชื่อนี้และคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ซึ่งมักจะมองข้ามได้ง่าย
//ดังนั้นการจำแนกประเภทรองจึงไม่เปลี่ยนแปลง
string sql = @"select cname as txt,id as vol จาก webclass โดยที่ parentid=" + cid;
พยายาม
-
กลับ getDs(sql);
-
จับ
-
//โยน;
กลับเป็นโมฆะ;
-
-
/***////// <สรุป>
/// กลับชุดข้อมูล
/// </สรุป>
/// <ชื่อพารามิเตอร์ = "SQL" ></ พารามิเตอร์>
/// <ส่งคืน></ส่งคืน>
ชุดข้อมูลสาธารณะ getDs (สตริง SQL)
-
OleDbConnection conn = myConn();
ชุดข้อมูล Ds = ชุดข้อมูลใหม่ ();
OleDbDataAdapter Da = OleDbDataAdapter ใหม่ (SQL, conn);
พยายาม
-
ดา.เติม(Ds);
กลับ Ds;
-
จับ
-
กลับเป็นโมฆะ;
//โยน;
}
}
/***////// <สรุป>
/// //การเชื่อมโยงข้อมูล
/// </สรุป>
โมฆะส่วนตัว BindDc()
-
//อันแรก
string sql = @"select * จาก webclass โดยที่ Parentid=0";
ddl1.DataSource = getDs(sql);
ddl1.DataTextField = "cname";
ddl1.DataValueField = "id";
ddl1.DataBind();
ถ้า (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");
//ก่อนอื่นคุณสามารถกำหนด DropDownList.SelectedItem.Value ได้
//อันที่สอง
sql = @"select * จาก webclass โดยที่ parentid=" + ddl1.SelectedItem.Value;
ddl2.DataSource = getDs(sql);
ddl2.DataTextField = "cname";
ddl2.DataValueField = "id";
ddl2.DataBind();
//อันที่สาม.
ถ้า (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");
sql = @"select * จาก webclass โดยที่ parentid=" + ddl2.SelectedItem.Value;
ddl3.DataSource = getDs(sql);
ddl3.DataTextField = "cname";
ddl3.DataValueField = "id";
ddl3.DataBind();
-
}
เนื้อหา default.aspx:
<%@ ภาษาเพจ = "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 " >
<หัว runat="เซิร์ฟเวอร์">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxPro ตระหนักถึงการเชื่อมโยงสามระดับโดยไม่ต้องรีเฟรช</title>
</หัว>
<script language="javascript" type="text/javascript">
-
//ACLOUD ฟังก์ชัน JS ทั่วไป
ฟังก์ชั่น getBid(s){
กลับ document.getElementById (s);
-
ฟังก์ชัน getBmc(s){
กลับ document.getElementByName(s);
-
//แสดงรายการหมวดหมู่
ฟังก์ชั่น showNext (sid, obj)
-
ถ้า (sid==null || sid=="" || sid.length<1)return;
var slt =getBid(obj);
var v = _Default.getNextClass(sid).value; // ชื่อของคลาส
//แจ้งเตือน(v);
//กลับ;
ถ้า (v != null){
if(v != null && typeof(v) == "วัตถุ" && v.Tables != null)
-
slt.ความยาว = 0;
slt.options.add(ตัวเลือกใหม่("กรุณาเลือก",0));
//เพิ่ม "โปรดเลือก" เพื่อทริกเกอร์เหตุการณ์ onchange เป็นหลัก
ถ้า(obj=="ddl2"){
getBid("ddl3").options.length=0;
getBid("ddl3").options.add(ตัวเลือกใหม่("กรุณาเลือก",0));
-
สำหรับ (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));
-
-
-
กลับ;
-
-
</สคริปต์>
<ร่างกาย>
<form id="form1" runat="server">
<div>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="99"> </td>
<td width="401">
เมือง <asp:DropDownList ID = "ddl1" runat = "เซิร์ฟเวอร์">
</asp:DropDownList>
ภูมิภาค<asp:DropDownList ID="ddl2" runat="server">
</asp:DropDownList>
สวน<asp:DropDownList ID="ddl3" runat="server">
</asp:DropDownList></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</ตาราง>
</div>
</แบบฟอร์ม>
</ร่างกาย>
</html>
เอกสารที่เกี่ยวข้อง