การใช้ AjaxPro เพื่อพัฒนากล่องดรอปดาวน์การเชื่อมโยงแบบไม่รีเฟรชสี่ระดับ

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-07-06 16:39:16

สภาพแวดล้อมการพัฒนา VS.NET 2005 C# Oracle AjaxPro

เมื่อเร็ว ๆ นี้ฉันมีงานยุ่งและไม่มีเวลาอธิบายรายละเอียด ดังนั้นฉันจะโพสต์ซอร์สโค้ดทั่วไปเพื่อดูด้วยตัวเอง

เพื่อเหตุผลด้านประสิทธิภาพ ระดับจังหวัดและเมืองจะถูกเขียนเป็นอาร์เรย์ JS และระดับเขตและเขต (เมือง) จะเขียนด้วยภาษา Oracle ทริกเกอร์ C# เพื่ออ่านฐานข้อมูลผ่าน JS จากนั้นส่งข้อมูลกลับไปยัง JS จากนั้นผูกข้อมูลเพื่อแสดงผล

การดำเนินการ <select> ใช้ createElement() ทั่วไปมากกว่าการใช้ options.add()

<%@ ภาษาเพจ = "C#" AutoEventWireup = "true" CodeFile = "Area.aspx.cs" สืบทอด = "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 " >
<หัว runat="เซิร์ฟเวอร์">
<title>ภูมิภาค</title>
</หัว>
<ร่างกาย>
<form id="form1" runat="server">
<ตาราง>
<tr>
<td>
<select id="SF">
<option select="selected">—โปรดเลือก—</option>
</เลือก>
</td>
<td>
<select id="CS">
<option select="selected">—โปรดเลือก—</option>
</เลือก>
</td>
<td>
<select id="ซีอาน">
<option select="selected">—โปรดเลือก—</option>
</เลือก>
</td>
<td>
<select id="เจิ้น">
<option select="selected">—โปรดเลือก—</option>
</เลือก>
</td>
</tr>
</table>

// สร้างกล่องแบบเลื่อนลงผ่าน DOM http://www.downcodes.com/qq.asp
//obj: ชุดข้อมูลตัวเลือกของกล่องแบบเลื่อนลง
//id: รหัสของช่องแบบเลื่อนลง
ฟังก์ชั่น CreateDropDownList (obj, id)
-
var sel=document.getElementById(id);
sel.options.length=1; //บันทึก "—กรุณาเลือก—"
//ที่เก็บข้อมูลแบบอาร์เรย์มักใช้สำหรับจังหวัดและเมือง และใช้ C# เพื่ออ่านจากฐานข้อมูลสำหรับมณฑลและเมือง
ถ้า(obj==null)กลับมา;
ถ้า (อินสแตนซ์ obj ของอาร์เรย์)
-
สำหรับ (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(สหกรณ์);
-
-
อื่น
-
for(var i=0;i<obj.Rows.length;i++) //โปรดทราบว่านี่คือความยาว ไม่ใช่การนับ
-
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(สหกรณ์);
-
-
//ผูกกล่องดรอปดาวน์ถัดไป
สวิตช์ (รหัส)
-
กรณี "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");};ค่าที่ส่งคืน
ค่าเริ่มต้น:sel.onchange=function()......{alert(this.value);};break;
-
}

//รายการดำเนินการ
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

//รับอาร์เรย์ที่ต้องการ
//tar=รหัสจังหวัดที่เป็นเจ้าของ
ฟังก์ชั่น GetArray (วาล)
-
var temp=อาร์เรย์ใหม่();
วาร์เจ=0;
สำหรับ(var i=0;i<aDQ.length;i++)
-
ถ้า(aDQ[i][2].toString()==val)
-
อุณหภูมิ[j]=aDQ[i];
//อุณหภูมิ[j].push(aDQ[i]);
เจ++;
-
-
อุณหภูมิกลับ;
}

//ล้างช่องแบบเลื่อนลง "เมือง"
ฟังก์ชั่น ClearZhen()
-
CreateDropDownList(null,"เจิ้น");
-
//ล้างกล่องแบบเลื่อนลง "เขต" และ "เมือง"
ฟังก์ชั่น ClearXianZhen()
-
CreateDropDownList(null,"ซีอาน");
CreateDropDownList(null,"เจิ้น");
}

</สคริปต์>

</แบบฟอร์ม>
</ร่างกาย>
</html>

ใช้ระบบ;
ใช้ System.Data;
ใช้ System.Data.OracleClient

พื้นที่คลาสสาธารณะบางส่วน: System.Web.UI.Page
-
โมฆะที่ได้รับการป้องกัน Page_Load (ผู้ส่งวัตถุ EventArgs e)
-
//ลงทะเบียนคลาส C# และการแจงนับลงใน JS ตามลำดับ
AjaxPro.Utility.RegisterTypeForAjax (ประเภทของ (พื้นที่));
AjaxPro.Utility.RegisterEnumForAjax (ประเภทของ (AreaEnum));
}

/**//// <สรุป>
/// รับข้อมูลที่ต้องการโดยกล่องแบบเลื่อนลง
/// </สรุป>
/// <param name="UpID">ID ระดับบนสุด</param>
/// <param name="ae">เขต/เมือง</param>
/// <returns>ส่งคืนตารางข้อมูล</returns>
[AjaxPro.AjaxMethod]
DataTable GetDataTable สาธารณะ (สตริง UpID, AreaEnum ae)
-
ถ้า (String.IsNullOrEmpty(UpID))
คืนค่า null;

string link = "server=XXX;user=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

//ชื่อคอลัมน์ใน DataTable ที่ส่งคืนโดย Oracle ล้วนเป็นตัวพิมพ์ใหญ่ อย่าลืมใช้อักษรตัวพิมพ์ใหญ่เมื่อดึงค่าบนเพจ
สตริง sql;
ถ้า (Enum.Equals(ae, AreaEnum.Xian))
sql = "เลือก id ชื่อจากเมืองโดยที่ THREEID = 0 และ TWOID = " + UpID;
อื่น
sql = "เลือก id ชื่อจากเมือง WHERE THREEID=" + UpID;

อะแดปเตอร์ OracleDataAdapter = OracleDataAdapter ใหม่ (sql, conn);
ตาราง DataTable = DataTable ใหม่ ();
อะแดปเตอร์เติม (ตาราง);
โต๊ะขากลับ;
-
}

/**//// <สรุป>
/// การแจงนับภูมิภาค
/// </สรุป>
AreaEnum สาธารณะ
-
/***////// <สรุป>
/// อำเภอ
/// </สรุป>
ซีอาน
/***////// <สรุป>
/// เมือง
/// </สรุป>
เจิ้น
}

ณ จุดนี้ มีการใช้งานฟังก์ชันพื้นฐานแล้ว และยังมีฟังก์ชันบางอย่าง (การกำหนดภูมิภาคผ่านชื่อโดเมนIP และการเชื่อมโยงโดยตรง บันทึกภูมิภาคที่เลือก อ่าน/บันทึกข้อมูลเมืองได้อย่างสะดวกเพื่อทำการควบคุม ฯลฯ) ฉันจะทำมันให้เสร็จเมื่อฉันมีเวลา

อย่าลืมเพิ่ม

ใน <system.web> ของ Web.config

<เพิ่มกริยา = "POST, GET" path = "ajaxpro/*.ashx" type = "AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpตัวจัดการ>