การควบคุม ASP.NET Ajax

การควบคุมอาแจ็กซ์

AJAX ย่อมาจาก Asynchronous JavaScript และ XML นี่คือเทคโนโลยีข้ามแพลตฟอร์มที่ช่วยเร่งเวลาตอบสนอง ส่วนควบคุมเซิร์ฟเวอร์ AJAX จะเพิ่มสคริปต์ลงในเพจ ซึ่งดำเนินการและประมวลผลโดยเบราว์เซอร์

อย่างไรก็ตาม เช่นเดียวกับตัวควบคุมเซิร์ฟเวอร์ ASP.NET อื่นๆ ตัวควบคุมเซิร์ฟเวอร์ AJAX เหล่านี้สามารถมีวิธีและตัวจัดการเหตุการณ์ที่เกี่ยวข้องกัน ซึ่งทั้งหมดได้รับการจัดการบนฝั่งเซิร์ฟเวอร์

กล่องเครื่องมือควบคุมใน Visual Studio IDE ประกอบด้วยชุดของส่วนประกอบการควบคุมที่เรียกว่า 'AJAX'

การควบคุม ScriptManager

การควบคุม ScriptManager เป็นการควบคุมที่สำคัญที่สุด และต้องปรากฏบนเพจเพื่อให้การควบคุมอื่นๆ ทำงาน

มันมีไวยากรณ์พื้นฐาน:

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

หากคุณสร้าง 'ไซต์ที่เปิดใช้งาน Ajax' หรือเพิ่ม 'แบบฟอร์มเว็บ AJAX' จากกล่องโต้ตอบ 'เพิ่มรายการ' หน้าเว็บจะถูกสร้างขึ้นโดยอัตโนมัติและมีการควบคุมตัวจัดการสคริปต์ การควบคุม ScriptManager ดูแลการเขียนสคริปต์ฝั่งไคลเอ็นต์สำหรับการควบคุมฝั่งเซิร์ฟเวอร์ทั้งหมด

อัปเดตแผงควบคุม

ตัวควบคุม UpdatePanel เป็นตัวควบคุมคอนเทนเนอร์และได้มาจากคลาสการควบคุม มันทำงานเป็นคอนเทนเนอร์สำหรับการควบคุมลูกภายในและไม่มีอินเทอร์เฟซของตัวเอง เมื่อตัวควบคุมตัวใดตัวหนึ่งทริกเกอร์การส่งกลับ UpdatePanel จะเข้ามาแทรกแซงเพื่อเริ่มแบบอะซิงโครนัสและอัปเดตส่วนหนึ่งของเพจ

ตัวอย่างเช่น หากปุ่มควบคุมอยู่ในแผงอัปเดตและมีการคลิก ปุ่มควบคุมในแผงอัปเดตเท่านั้นที่จะได้รับผลกระทบ และการควบคุมในส่วนอื่นๆ ของเพจจะไม่ได้รับผลกระทบ สิ่งนี้เรียกว่าการส่งคืนคอมมิตบางส่วนหรือการส่งคืนคอมมิตแบบอะซิงโครนัส

ตัวอย่าง

เพิ่มเว็บฟอร์ม AJAX ให้กับแอปพลิเคชันของคุณ มันมีการควบคุมตัวจัดการสคริปต์เริ่มต้น ใส่แผงอัพเดต วางปุ่มควบคุมและป้ายกำกับป้ายกำกับไว้ภายในแผงควบคุมการอัปเดต วางปุ่มและป้ายกำกับอีกชุดไว้ด้านนอกแผง

มุมมองการออกแบบมีลักษณะดังนี้:

ไฟล์ทรัพยากรมีลักษณะดังนี้:

 <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="เซิร์ฟเวอร์" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>นอกแผงการอัปเดต</p> < p> <asp:ปุ่ม ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="เซิร์ฟเวอร์"></asp:ฉลาก></ฟอร์ม>

ปุ่มควบคุมทั้งหมดมีรหัสเดียวกันสำหรับตัวจัดการเวลา:

 string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "กำลังแสดงเวลาจากแผง" + เวลา;lbltotal.Text = "กำลังแสดงเวลาจากภายนอก" + เวลา;

สังเกตว่าเมื่อดำเนินการเพจ หากคลิกปุ่มส่งส่งคืนทั้งหมด ระบบจะอัปเดตแท็กทั้งหมดตามเวลาอัปเดต แต่หากคลิกปุ่มส่งส่งคืนบางส่วน ระบบจะอัปเดตเฉพาะแท็กในแผงอัปเดตเท่านั้น

คุณสมบัติของการควบคุม UpdatePanel

วิธีการควบคุม UpdatePanel

ตารางต่อไปนี้แสดงวิธีการของแผงควบคุมการอัพเดต:

ลักษณะการทำงานของแผงการอัปเดตขึ้นอยู่กับค่าของคุณสมบัติ UpdateMode และคุณสมบัติ ChildrenAsTriggers

การควบคุมการปรับปรุงความคืบหน้า

การควบคุม UpdateProgress ให้ข้อเสนอแนะจากเบราว์เซอร์เมื่อมีการอัปเดตการควบคุมแผงการอัปเดตตั้งแต่หนึ่งรายการขึ้นไป ตัวอย่างเช่น รอการตอบกลับจากเซิร์ฟเวอร์เมื่อผู้ใช้ล็อกอินหรือเมื่อทำงานบางอย่างเกี่ยวกับฐานข้อมูล

โดยจะให้การยืนยันด้วยภาพ เช่น "กำลังโหลดหน้า..." ว่างานกำลังถูกประมวลผล

ไวยากรณ์ของตัวควบคุม UpdateProgress คือ:

 <asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> กำลังโหลด... </ProgressTemplate></asp:UpdateProgress>

ตัวอย่างด้านบนแสดงข้อความธรรมดาพร้อมแท็ก ProgressTemplate อย่างไรก็ตาม อาจเป็นรูปภาพหรือการควบคุมอื่นๆ ที่เกี่ยวข้อง ตัวควบคุม UpdateProgress จะแสดงทุกการส่งคืนแบบอะซิงโครนัส เว้นแต่จะระบุเป็นแผงการอัปเดตแยกต่างหากโดยใช้คุณสมบัติ AssociatedUpdatePanelID

คุณสมบัติของตัวควบคุม UpdateProgress

ตารางต่อไปนี้แสดงคุณสมบัติของการควบคุมความคืบหน้าการอัพเดต

วิธีการควบคุม UpdateProgress

ตารางต่อไปนี้แสดงวิธีการควบคุมความคืบหน้าการอัพเดต:

การควบคุมการจับเวลา

การควบคุมตัวจับเวลาใช้เพื่อเริ่มต้นการส่งกลับโดยอัตโนมัติ ซึ่งสามารถทำได้สองวิธี:

(1) ตั้งค่าคุณสมบัติทริกเกอร์ของตัวควบคุม UpdatePanel

 <ทริกเกอร์> <asp:AsyncPostBackTrigger ControlID = "btnpanel2" EventName = "คลิก" /></ ทริกเกอร์ >

(2) วางการควบคุมตัวจับเวลาโดยตรงภายใน UpdatePanel เพื่อเป็นทริกเกอร์สำหรับการควบคุมย่อย ตัวจับเวลาเดียวสามารถทำหน้าที่เป็นตัวกระตุ้นสำหรับ UpdatePanels จำนวนมากได้

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>