การทำ Partial Rendering สำหรับ User Controls

สำหรับท่านใดที่ยังใช้งาน ASP.NET Web From ในการพัฒนาเว็บไซต์อยู่ คงคุ้นเคยกับการใช้งาน User Controls เป็นอย่างดีเนื่องจากเป็นการสร้าง UI เพื่อใช้งานซ้ำในหลายๆ Page ซึ่งเป็นที่นิยม สำหรับบทความนี้จะแนะนำวิธีการ แยกเรนเดอร์ User Controls ที่มีปัญหาโหลดช้าอันเนื่องมาจากสาเหตุใดก็ตาม และเป็นข้อมูลเพิ่มเติมที่ผู้ใช้ไม่จำเป็นต้องเห็นเป็นอย่างแรก โดยมีขั้นตอนดังนี้

1.เพิ่ม HTML Container element เช่น Div, Panel ในหน้าจอ ที่ต้องการใช้งาน เช่น

2.เพิ่ม Ajax Controls toolkit : Dynamic Populate ใช้เพื่อ Render HTML หลังจากที่ Page Load เสร็จเรียบร้อย

  • TargetControlsID คือ ID ของ HTML Container element ที่เราต้องการแสดงผล HTML ของ User Controls ที่เราสร้างมาจาก Web Service
  • ServicePath คือ Path ของ Web Service ที่เรียกใช้งาน
  • ServiceMethod คือ Web Method ที่ใช้ Render User Controls
  • UpdatingCssClass คือ CSS Class ที่ต้องการให้แสดงระหว่างรอ Load HTML

3.Java Script เรียกใช้งาน  Ajax Controls toolkit : Dynamic Populate และเพิ่มเติมฟังก์ชันที่ต้องการขณะแสดงผล User Controls

4.สร้าง Web Method สำหรับสร้าง HTML ของ User Controls

  • รูปแบบของ Web Service Method ซึ่งจะต้องมี Return Type เป็น string และรับ Parameter ชื่อ contextKey ซึ่งมี Type เป็น string เช่นกัน
  • เรียก Method ชื่อ RenderUserControl โดยระบุ Path ของ User Control ที่ต้องการ และ List ของ Property ทั้งหมดของ User Control

5.Method ที่ใช้ในการสร้างเนื้อหา HTML จาก User Controls

เพียงเท่านี้ เราก็สามารถเรียกใช้งาน User Control นี้ในหน้าจอต่างๆ ได้โดยไม่ต้องกังวลเรื่องเพิ่มเวลาโหลดให้กับหน้าจอแสดงผลนั้นๆแล้วครับ อย่างไรก็ดีบทความนี้ผมได้เขียนไว้นานมากแล้ว แต่ยังไม่ได้นำมาเผยแพร่ ในปัจจุบันอาจมีวิธีการอื่นๆ และ ASP.NET ที่เป็น Web Form อาจจะได้รับความนิยมน้อยลงไปแล้ว แต่สำหรับท่านที่ต้องดูแล และปรับปรุงระบบเก่าๆ ไม่สามารถเขียนขึ้นมาใหม่ทั้งหมดได้ ก็ยังสามารถนำเทคนิคนี้ไปปรับใช้กับระบบของตนเองได้ครับ