Dev Stock

เบื้องต้นเกี่ยวกับ UpdatePanel Control

เป็น ASP.NET Control ที่ทำให้กลุ่ม ASP.NET Control อื่นๆ ที่อยู่ภายใน ContentTemplate ถูกทำงานในรูปแบบ AJAX (Asynchronous JavaScript and XML) และแยกส่วนในการ Update ข้อมูลลงใน Page ออกเป็นแต่ละ UpdatePanel (Partial-Rendering) ในการใช้งาน UpdatePanel จะต้องมีการวาง Control ScriptManager ลงใน Page นั้นๆ เสมอ ซึ่งตัว ScriptManager เพียงตัวเดียวจะทำงานกับหลายๆ UpdatePanel ได้ในแต่ละ Page

ประโยชน์ที่เราจะได้จากการใช้งาน UpdatePanel Control คือ ทำให้ User ไม่เห็นการ Postback เมื่อ User กระทำสิ่งใดๆ บน Page เช่นการกด Sorting บน GridView

การทำงานของ UpdatePanel Control

UpdatePanel และ ScriptManager เป็นการทำงานในระดับ Server Side ในระดับ Client จะมี PageRequestManager ทำหน้าที่ในการจัดการกับ DOM (Document Object Model) เพื่อให้ทำ Asynchronous Postback กลับมาที่ Server Side นั้นเกิดขึ้น จริงๆ แล้ว UpdatePanel จะถูก Render ลงใน IE เป็น tag <DIV> และ ScriptMananger จะทำการ Register javascript เพื่อไปเรียกใช้งาน PageRequestManager ตามภาพด้านล่างนี้

เพื่อให้เห็นภาพรวมของการทำงาน UpdatePanel ให้ดู Step และ Diagram ด้านล่างนี้

1. Request Initial GET ก็เหมือนกับการทำงานที่เป็น Not IsPostback คือการ Load Page นั้นครั้งแรก
2. Server Side จะทำการ Render ทุกๆ Control ลงไปให้ Client และในจังหวะนี้เองที่ ScriptManager จะทำการ Register javascript เพื่อเรียกใช้ PageRequestManager
3. เมื่อมีการทำ Action ใดๆ ในฝั่ง Client ก็จะเกิดการทำ Asynchronous Postback โดยใช้ Event หรือ Method ต่างๆ ของ PageRequestManager เป็นตัวจัดการ
4. Server ก็จะส่งข้อมูลเป็น JSON หรือ String ธรรมดากลับมาให้กับ UpdatePanel เฉพาะส่วนที่มีการทำ Asynchronous Postback ขึ้นมา (Partial Page Update) 

ตัวอย่างการใช้งาน UpdatePanel Control

เป็น WebApp ที่จะใช้ Insert ข้อมูลพนักงานลงใน Gridview

การเก็บข้อมูลจะถูกจัดเก็บลงใน Object ชื่อ Employee แล้วเอา Object Employee บรรจุลงใน Generic List ชื่อ EmployeeList อีกที สุดท้ายจะต้องมีการเก็บ State ของ EmployeeList ไว้ใน ViewState

ดังนั้นจำเป็นที่จะต้องมีการทำ Serialize Class Employee เพราะมันจะมีการ ส่ง Object Employee ที่อยู่ใน Generic List ลงใน IE กลับไปกลับมา ระหว่าง Client และ Server ซึ่ง Class Employee ก็จะถูกส่งข้ามเครื่องไปมานั้นเอง

ในการ Load Page ครั้งแรกจะมีการสร้าง Init Data ลงใน GridView เพื่อทำการสร้าง Object ลงใน ViewState ไม่ให้เป็น Nothing

เมื่อมีการกดปุ่ม Insert ก็จะนำค่าใน Textbox FirstNameTextBox และ LastNameTextBox

• ทำการ Encode Html ออกไป
• แล้วนำไปสร้างเป็น Object Employee
• จากนั้นก็ Add ลงใน EmployeeList
• เก็บ EmployeeList ลงใน ViewState
• และทำการ Bind ข้อมูล

 ใน Page ASPX จะแยก UpdatePanel ออกเป็นสองส่วนคือส่วนของการ Insert (InsertEmployeeUpdatePanel) และ การแสดงข้อมูลพนักงาน (EmployeesUpdatePanel)

ในแต่ละ UpdatePanel มีการกำหนดให้ UpdateMode เป็น Conditional ทั้งคู่ หมายความว่า ถ้ามีการกำหนด Triggers ลงไปก็จะทำ AsyncPostBack ตาม Control หรือ ตาม Event ที่กำหนดอย่างเช่นใน EmployeesUpdatePanel กำหนด UpdateMode เป็น Conditional และมีการกำหนด Trigger ให้รับการทำงานเฉพาะที่เกิดจาก Control InsertButton เท่านั้น