Transcript การ ใช้ งาน Ajax กับ ASP.NET

1


AJAX = Asynchronous JavaScript and XML.
AJAX is the art of exchanging data with a server, and updating parts of a
web page - without reloading the whole page.
2
UpdatePanel เป็ นการกาหนดว่าพื ้นที่สว่ นใดบ้ าง ที่เราต้ องการให้ อพั เดทเฉพาะส่วน
เช่น หากเราต้ องการให้ เมื่อผู้ใช้ พิมพ์ username ที่ต้องการสมัครสมาชิก มีการตรวจสอบ
ทันทีวา่ username นันซ
้ ้าหรื อไม่ซ ้าทันที โดยที่เราไม่ต้องกดปุ่ มทา และเพจเกิดการอัพเดท
เฉพาะในบริ เวณ UpdatePanel เท่านัน้



วาง ScriptManager ลงในหน้ านี ้เพื่อเริ่ มต้ นใช้ งาน UpdatePanel
วาง UpdatePanel เพื่อกาหนดว่าพื ้นที่สว่ นใดที่เราต้ องการ update ในหน้ าเว็บนี ้
โดยภายในประกอบด้ วย tbUsername และ lbCheck
◦ กาหนด property UpdateMode เป็ น Conditional คือจะเกิดการอัพเดทภายในพาเนลนี ้
ก็ตอ่ เมื่อเกิดการ trigger ภายในพาเนลนี ้เท่านัน้

สัง่ ให้ tbUsername AutoPostBack เป็ น true ***
3

เขียนโค้ ดภายใน event TextChanged โดยภายในเรี ยกใช้ เมธอด valid_username()
และสัง่ ให้ UpdatePanel1 อัพเดท
4

ลองเพิ่มคาสัง่ ให้ แสดงเวลาลงไป เพื่อที่ตอนรันจะได้ เห็นผลลัพธ์ของ UpdatePanel
ได้ ชดั เจนมากขึ ้น
5
UpdateProgress คือ ขณะที่กาลังทาการ update อยูใ่ น UpdatePanel จะสามารถแสดง
progress ได้
 วาง ScriptManager เพื่อเริ่ มต้ นใช้ งาน Update Panel
 วาง UpdatePanel โดยภายในประกอบด้ วย
◦ ปุ่ ม login และ register
 วาง UpdateProgress โดยภายในประกอบด้ วย
◦ รูปภาพที่ต้องการแสดงผลขณะอัพเดท
6

เมื่อรันแล้ วหากพบว่าการลิ ้งค์หน้ า login แสดงผลไวไป มองไม่เห็น progress
ลองเพิ่มคาสัง่ ด้ านล่างเพื่อหน่วงเวลา 3 วินาที โดยอาจจะเพิ่มไปที่โค้ ดของปุ่ ม login
System.Threading.Thread.Sleep(3000);
7
สร้ างตารางเพิ่มเติม และใส่ข้อมูลลงตารางดังนี ้
 ตาราง Brand

ตาราง Model
8



วาง ScriptManager, UpdatePanel, UpdateProgress ดังรูป
การทางาน เมื่อผู้ใช้ กรอกยี่ห้อรถยนต์ที่ต้องการค้ นหา สร้ าง event TextChanged
ขึ ้นมาเพื่อ query ยี่ห้อรถยนต์ และรุ่นรถยนต์ทงหมดในยี
ั้
่ห้อนันแสดงออกมาผ่
้
าน
GridView
นักศึกษาจะใช้ SqlDataSource หรื อ ใช้ การเขียนโค้ ดเพื่อ query ข้ อมูลจากเบส ก็ได้
9

Inner join

like
10