ตอน 38 Server Controls

ไปหน้าแรก | สารบัญ | Laploy.comระเบียนบทความ | บทความจากลาภลอย

เว็บไซต์นี้เป็นตัวอย่างเนื้อหาบางตอนในหนังสือ "เรียนรู้ด้วยตนเอง OOP C# ASP.NET" ครอบคลุม บทที่ 1 ถึงบทที่ 6 (ในหนังสือมี 21 บท) เนื้อหาในBlog อาจอาจแตกต่างจากในหนังสือเพราะเป็นเนื้อหาที่ยังไม่ได้ตรวจแก้ขัดเกลา (edit)

กดที่นี่เพื่อดูรายละเอียดเนื้อหาในแต่ละบท

กดที่นี่เพื่อไปยังเว็บบอร์ด ถาม-ตอบ 

 

 

Server Controls

หากท่านเคยเขียนโปรแกรม desktop ด้วย VB หรือภาษาใดๆ ที่เป็น Visual ใน Visual Studio ท่านคงจะพึงพอใจกับความสะดวก ในการสร้าง และกำหนดส่วนติดต่อกับผู้ใช้ต่างๆ บนหน้าจอ เช่นปุ่ม กรอบข้อความ กล่องรูปภาพ เพราะสามารถใช้วิธีลากแล้วหยอด และยังสามารถลด-เพิ่มขนาด ย้ายตำแหน่งได้โดยไม่ต้องเขียนโค้ด เพราะทำได้ง่ายเพียงแค่ลากเมาส์ไป-มาแล้วกดเลือก ส่วนติดต่อกับผู้ใช้ต่างๆ บนหน้าจอเหล่านี้รวมเรียกว่า Controls

ASP.NET สนับสนุนแนวคิดนี้ด้วยเช่นกัน และได้จัดเตรียม control มาตรฐานมาให้เรียกว่า Server control ซึ่งไม่แตกต่างจาก WinForm control มากนักเช่น text box, check box และปุ่มเป็นต้น control เหล่านี้ช่วยให้ผู้ใช้มีปฏิสัมพันธ์กับหน้าเว็บได้ และยังทำหน้าที่ส่งข้อมูลไปยัง server เมื่อเกิดการ postback อีกด้วย

ในภาษา HTML ก็มี text box, check box และ ปุ่มเช่นกัน เรียกว่า HTML form element ยกตัวอย่างเช่น text box ในภาษา HTML จะเขียนโค้ดว่า <input type=”text”> แม้จะดูคล้ายกัน แต่ server control ของ ASP.NET มีให้เลือกหลายชนิดกว่า และมีคุณสมบัติเพิ่มเติมมามากกว่า ทำให้ web app ที่ใช้ server control ทำงานได้พลิกแพลงกว่าการใช้ HTML form element เท่านั้น ยกตัวอย่างเช่น calendar control ที่ช่วยให้ผู้ใช้ป้อนวันเดือนปีได้สะดวก และ login control ที่ช่วยให้การสร้างหน้า login ทำได้ด้วยการลากและหยอด ASP.NET server control เหล่านี้เกิดจากการนำ HTML form element ชนิดต่างๆ มาผสมกัน

 

Event อันเกิดจาก Page และ Server control

การทำงานของ Event อันเกิดจาก Page และ Server control ใน ASP.NET แทบจะเหมือนกับการทำงานใน WinForm ยกตัวอย่างเช่น ผู้ใช้เปิดหน้าเว็บ (สมมุติว่าเป็นหน้าเว็บชื่อ ) เมื่อผู้ใช้กดปุ่ม (ซึ่งเป็น server control) หน้าเว็บ product.aspx จะถูก postback ไปยัง server และมี event เกิดขึ้น เราต้องเขียนโค้ดไว้ในไฟล์ product.aspx.cs เพื่อตอบสนองต่อ event นี้

วัฏจักรของหน้าเว็บก็ทำให้เกิด event ขึ้นด้วย เช่นเมื่อมันเริ่มทำงานจะมี event ชื่อ Page_Init หรือเมื่อมันถูกโหลดจะเกิด event Page_Load เปิดโอกาสให้เราใส่โค้ดที่ต้องการให้ทำงานเมื่อหน้าเว็บนั้นเริ่มขึ้น (อย่าลืมว่าหน้าเว็บจะถูกสร้างและเริ่มทำงานทุกครั้งของ round trip)

control แต่ละตัวอาจจะส่ง event ของมันเองได้ เช่นปุ่มมีจะมี event ชื่อ Click ส่วน control แบบ check box และ radio button จะมี event ชื่อ CheckedChanged และ drop-down list จะมี event ชื่อ SelectedIndexChanged

control พิเศษบางตัวอย่าง Calendar มี event ที่พิเศษกว่า control ทั่วไป เช่นเมื่อผู้ใช้กดปุ่มเปลี่ยนเดือน calendar control จะส่ง event ชื่อ VisibleMonthChanged ไปยัง server

 

เมื่อผู้ใช้คลิกเมาส์ web browser จะส่งข้อมูลแบบ http post ไปยัง server โปรแกรม ASP.NET (ที่รันอยู่ใน server) จะพบว่ามี event การคลิกและจะไปทำงานตามโค้ดใน method ที่เราเขียนเตรียมไว้ในไฟล์ aspx.cs (ตอนทำงานไฟล์นี้กลายเป็น .dll ไปแล้ว)

 

event ที่มีความถี่สูง

ASP.NET server control ส่วนมากจะสนับสนุน event เพียงไม่กี่อย่าง เราสามารถจัดการ event เหล่านี้ได้ด้วยการเขียนโค้ดฝั่ง server โดยอาศัยหลักการ round trip ทำให้หน้าเว็บทำงานได้ราวกับว่ามันเป็นโปรแกรมประยุกต์ใช้งาน (application software)

ASP.NET server control จะไม่ส่ง event ที่มีความถี่สูง ยกตัวอย่างเช่น event ที่เกิดจากการลากเมาส์ เพราะทุกครั้งที่มีการส่ง event จะต้องเกิด round trip เพื่อส่งข้อมูลไปยัง server หากมีการส่ง event ทุกครั้งที่ผู้ใช้ขยับเมาส์ การโหลดหน้าเว็บจะเกิดขึ้นถี่มากจนทำงานไม่ได้

อย่างไรก็ดีเราสามารถกำหนดให้ ASP.NET server control ส่ง event ที่มีความถี่สูงให้แก่ client side script ได้ เนื่องจากการทำงานของ client side script ไม่อาศัยการ postback/round trop เราจึงใช้ client side script จัดการกับ event ที่มีความถี่สูงได้

สรุปเรื่อง Server Control

  • Server control คือ control มาตรฐานของ ASP.NET ซึ่งไม่แตกต่างจาก WinForm control มากนักเช่น text box, check box และปุ่มเป็นต้น
  • Server control ทำงานได้พลิกแพลงกว่าการใช้ HTML form element
  • control แต่ละตัวอาจจะส่ง event ของมันเองได้
  • ASP.NET server control จะไม่ส่ง event ที่มีความถี่สูงไปยัง server

 

สถาปัตยกรรมของ ASP.NET

แม้ ASP.NET จะเปลี่ยนแปลงจาก ASP ไปมาก แต่ ASP.NET ยังคงลักษณะสำคัญบางอย่างของ ASP ไว้ เช่นเรายังสามารถเขียนโค้ดแทรกเข้าไปในหน้า .aspx โดยใช้ script delimiter <% %> ได้ (in-line code) ดังนั้นผู้ที่คุ้นเคยกับการพัฒนา web app ด้วย ASP ก็ยังคงทำงานตามแบบที่ตนเคยชินต่อไปได้

แม้ ASP.NET จะมีบางอย่างที่คล้าย ASP แต่ ASP.NET ไม่ใช่แค่การปรับรุ่นของ ASP อันที่จริงแล้วมันถูกออกแบบ และถูกสร้างขึ้นใหม่ทั้งหมด คุณลักษณะเด่นของ ASP.NET มีดังนี้

  • เป็นส่วนทำงานด้านอินเตอร์เน็ตของ .NET Framework
  • ช่วยให้เขียนโค้ดติดต่อกับ MS SQL Server ได้
  • ทำให้สร้างส่วนติดต่อกับผู้ใช้ได้ซับซ้อนมากขึ้น
  • สนับสนุนการแยกไฟล์โปรแกรมกับไฟล์ HTML ออกจากกัน (code-behind)
  • สนับสนุกการเขียนโปรแกรมแบบ event-driven
  • มี Server control ที่ทำงานกับ web browser ใดๆ ก็ได้
  • สามารถเก็บรักษาสถานะของ client ได้โดยใช้ ViewState
  • โค้ดจะถูกคอมไพล์ก่อน ทำให้มีประสิทธิภาพสูงขึ้น
  • มีส่วนประมวลภาษา .NET ทุกภาษา เช่น C# และ VB.NET
  • สร้าง WebForm ทำด้วย Visual Studio .NET ได้ง่าย

 

System.Web.UI Namespace

.NET Framework มี namespace เพื่อใช้กับ ASP.NET โดยเฉพาะคือ System.Web.UI ภายใน namespace นี้มีคลาส interface, enum และ delegate เพื่อใช้สำหรับงานที่เกี่ยวข้องกับการทำเว็บไซต์อยู่เป็นจำนวนมาก base class ใน namespace นี้ชื่อ Control ซึ่งเป็น base class ของ ASP.NET Server control ทั้งหลาย เช่น text box, check box และปุ่มเป็นต้น

คลาส Server control เหล่านี้ encapsulate ไว้ทั้งส่วนดำเนินการและส่วนติดต่อกับผู้ใช้ และมี property เหมือนๆ กันอยู่จำนวนหนึ่งคือ Controls, Context, ClientID, EnableViewState, ID, NamingContainer, Parent, Site, TemplateSourceDirectory, UniqueID, Visible และ ViewState

 

ASP.NET Page Class

ภายใน namespace System.Web.UI นอกจากจะมีคลาส Control แล้ว ยังมีคลาสที่สำคัญอีกคลาสหนึ่งคือ Page class เพื่อใช้สำหรับงานที่เกี่ยวข้องกับการทำหน้าเว็บ โดยหน้าเว็บแต่ละหน้าที่เราสร้างขึ้น (ไฟล์ .aspx และ .aspx.cs ในกรณีภาษา C#) จะเป็นคลาสๆ หนึ่ง ไฟล์ .aspx ทำหน้าที่เก็บส่วนแสดงผลและส่วนติดต่อกับผู้ใช้ ส่วนไฟล์ .aspx.cs จะเก็บโค้ดภาษา C# แบบ code-behind ทั้งสองไฟล์เป็น text file ธรรมดาที่เราสามารถเขียนขึ้นโดยใช้ text editor ทั่วๆ ไป เช่น Notepad ก็ได้ แต่ถ้าต้องการความสะดวกรวดเร็วควรใช้ Visual Studio.NET จะทำงานได้ง่ายขึ้นมาก

ไฟล์ทั้งสองจะถูกเก็บไว้ใน server โดยไม่เกิดการทำงาน หน้าเว็บจะถูกสร้างขึ้นแบบ run-time เมื่อมีผู้ใช้เรียกหา (โดยป้อนพิมพ์ URL หรือคลิกลิงค์มาจากแหล่งอื่น) โดยโปรแกรม ASP.NET จะนำโค้ดในไฟล์ทั้งสองมาคอมไพล์ให้เป็นคลาสเดียวกัน จากนั้นจะสร้าง instance ของคลาสเป็น page object และถูกนำไปบรรจุไว้ในหน่วยความจำ โดย page object ทำหน้าที่เป็นตัวเก็บ (container) ของ server control ทั้งหมดที่ปรากฏอยู่ในหน้าเว็บนั้น

 

หน้าเว็บใน ASP.NET เป็น object ตามบริบทของ OOP เพราะทุกหน้าล้วนเป็น instance ของคลาส(ภาษา C# ในกรณีที่พัฒนาด้วยภาษา C#) เป็นคลาสที่ inherit มาจากคลาสชื่อ page ดังนั้นทุกหน้าจึงมี method และ property อยู่จำนวนหนึ่งโดยปริยาย

เนื่องจากทุกๆ หน้าเว็บจะ inherit มาจาก page class ดังนั้นทุกหน้าเว็บจึงได้รับ method, property ทุกอย่างของ page class มาด้วย การทำงานของ ASP.NET จะตั้งอยู่บน Page class เป็นหลัก การรู้จักของคลาสนี้จึงมีประโยชน์ต่อการสร้างหน้าเว็บ ต่อไปนี้เป็นคำอธิบายโดยย่อเกี่ยวกับสมาชิกต่างๆ ของ page class

  • page class ประกอบด้วย object ที่เคยมีใน ASP เช่น Application, Session, Request, Response เป็นต้น
  • page class ประกอบด้วยกลุ่มของ Control ทำให้หน้าเว็บแต่ละหน้าสามารถใช้งาน control ชุดต่างๆ ได้
  • page class มี property ชื่อ IsPostBack ใช้ตรวจสอบการทำงานว่าเกิดจากการ postback หรือไม่
  • page class มี property ชื่อ User ใช้เก็บข้อมูลเกี่ยวกับผู้ใช้
  • page class มี property ชื่อ Cache ทำให้เราสามารถเขียนโค้ดเพื่อจัดการกับข้อมูลใน cache ได้
  • page class มี property ชื่อ FindControl ใช้เพื่อการหา control ภายในกลุ่ม control
  • page class มี property ชื่อ ViewState ใช้เพื่อจัดการกับข้อมูลสถานะของหน้าเว็บ
  • page class มี property ชื่อ ClearChildViewState ใช้เพื่อลบข้อมูลสถานะของ child control

ตอนต่อไป Code-Behind

Post a comment or leave a trackback: Trackback URL.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: