การควบคุม ASP.NET: ตรวจสอบBox, RadioButton, รายการBox

การเพิ่มการควบคุม ASP.Net ให้กับเว็บฟอร์ม

ASP.Net มีความสามารถในการเพิ่มส่วนควบคุมลงในฟอร์ม เช่น กล่องข้อความและป้ายกำกับ

มาดูส่วนควบคุมอื่นๆ ที่มีให้ใช้งานสำหรับ Web Forms และคุณสมบัติทั่วไปบางประการของส่วนควบคุมเหล่านั้นกัน

ในตัวอย่างของเรา เราจะสร้างแบบฟอร์มหนึ่งซึ่งจะมีฟังก์ชันการทำงานต่อไปนี้

1. ความสามารถสำหรับผู้ใช้ในการป้อนชื่อของเขา
2. มีตัวเลือกให้เลือกเมืองที่ผู้ใช้พักอาศัยอยู่
3. ความสามารถสำหรับผู้ใช้ในการป้อนตัวเลือกสำหรับเพศ
4. ตัวเลือกในการเลือกหลักสูตรที่ผู้ใช้ต้องการเรียนรู้ จะมีให้เลือกทั้งสองอย่าง C# และ ASP.Net

มาดูรายละเอียดการควบคุมแต่ละรายการกัน มาเพิ่มเพื่อสร้างแบบฟอร์มด้วยฟังก์ชันที่กล่าวมาข้างต้น

ขั้นตอน 1) ขั้นตอนแรกคือเปิด Forms Designer สำหรับเว็บฟอร์มสาธิต เมื่อคุณทำเช่นนี้แล้ว คุณจะสามารถลากตัวควบคุมจากกล่องเครื่องมือไปยัง เว็บฟอร์ม.

เพื่อเปิดแบบฟอร์มเว็บ Designer:

• คลิกขวาที่ไฟล์ Demo.aspx ใน Solution Explorer แล้ว...
• เลือกตัวเลือกเมนู ดูตัวออกแบบ

เมื่อคุณทำตามขั้นตอนข้างต้นแล้ว คุณจะเห็น Form Designer ของคุณดังที่แสดงด้านล่าง

ต่อไปเรามาเริ่มเพิ่มส่วนควบคุมทีละส่วนกันเลย

การควบคุมฉลาก

ตัวควบคุมป้ายกำกับ (Label) ใช้สำหรับแสดงข้อความหรือข้อความเตือนความจำแก่ผู้ใช้บนแบบฟอร์ม โดยปกติแล้วตัวควบคุมป้ายกำกับจะใช้ร่วมกับตัวควบคุมอื่นๆ ตัวอย่างที่พบได้ทั่วไปคือการเพิ่มป้ายกำกับไว้ข้างๆ ตัวควบคุมกล่องข้อความ (Textbox) ป้ายกำกับจะช่วยบอกผู้ใช้ว่าควรกรอกอะไรลงในกล่องข้อความนั้น มาดูวิธีการใช้งานด้วยตัวอย่างด้านล่างกัน เราจะใช้ป้ายกำกับชื่อ 'name' ซึ่งจะใช้ร่วมกับตัวควบคุมกล่องข้อความที่จะเพิ่มในส่วนถัดไป

ขั้นตอน 1) ขั้นตอนแรกคือลากตัวควบคุม 'ป้ายกำกับ' จากกล่องเครื่องมือไปยังแบบฟอร์มเว็บ ดังแสดงในภาพด้านล่าง

ขั้นตอน 2) เมื่อเพิ่มฉลากแล้ว ให้ทำตามขั้นตอนต่อไปนี้

1. ไปที่หน้าต่างคุณสมบัติโดยคลิกขวาที่ตัวควบคุมป้ายกำกับ
2. เลือกตัวเลือกเมนู คุณสมบัติ (Properties)

ขั้นตอน 3) จากหน้าต่างคุณสมบัติ ให้เปลี่ยนค่าของคุณสมบัติ Text เป็น Name

ในทำนองเดียวกัน ให้เปลี่ยนค่าคุณสมบัติ ID ของตัวควบคุมเป็น lblName ด้วยการระบุ ID ที่มีความหมายให้กับตัวควบคุม จะง่ายต่อการเข้าถึงในระหว่างขั้นตอนการเขียนโค้ด นี่แสดงไว้ด้านล่าง

เมื่อคุณทำการเปลี่ยนแปลงข้างต้นเสร็จแล้ว คุณจะเห็นผลลัพธ์ดังต่อไปนี้

ผลลัพธ์:-

คุณจะเห็นว่าป้ายชื่อปรากฏบนเว็บฟอร์ม

กล่องข้อความ

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

ขั้นตอน 1) ขั้นตอนแรกคือการลากตัวควบคุมกล่องข้อความจากกล่องเครื่องมือไปยังแบบฟอร์มเว็บ ดังแสดงในภาพด้านล่าง

ด้านล่างนี้คือตัวอย่างที่จะปรากฏในโปรแกรมออกแบบฟอร์มหลังจากเพิ่มตัวควบคุม Textbox ลงในแบบฟอร์มแล้ว

ขั้นตอน 2) เมื่อเพิ่ม Textbox แล้ว คุณต้องเปลี่ยนคุณสมบัติ ID

• ไปที่หน้าต่างคุณสมบัติโดยคลิกขวาที่ตัวควบคุมกล่องข้อความ แล้ว...
• เลือกคุณสมบัติ จากนั้น
• เปลี่ยนค่าคุณสมบัติ ID ของช่องข้อความให้เป็น txtName

เมื่อคุณทำการเปลี่ยนแปลงข้างต้นแล้ว คุณจะเห็นผลลัพธ์ต่อไปนี้

ผลลัพธ์:-

กล่องรายการ

Listbox ใช้เพื่อแสดงรายการของไอเท็มบนแบบฟอร์มบนเว็บ มาดูกันว่าเราจะนำไปใช้งานได้อย่างไรด้วยตัวอย่างที่แสดงด้านล่าง เราจะเพิ่ม Listbox ลงในแบบฟอร์มเพื่อจัดเก็บตำแหน่งเมืองต่างๆ

ขั้นตอน 1) ขั้นตอนแรกคือการลากตัวควบคุมกล่องรายการ (List Box) จากกล่องเครื่องมือไปยังแบบฟอร์มเว็บ ดังแสดงในภาพด้านล่าง

ขั้นตอน 2) เมื่อคุณลากลิสต์บ็อกซ์ไปที่ฟอร์มแล้ว เมนูด้านข้างจะปรากฏขึ้น ในเมนูนี้ ให้เลือกเมนู 'แก้ไขรายการ'

ขั้นตอน 3) ตอนนี้คุณจะพบกล่องโต้ตอบซึ่งคุณสามารถเพิ่มรายการลงในกล่องรายการได้

1. คลิกที่ปุ่มเพิ่มเพื่อเพิ่มรายการ
2. ตั้งชื่อให้กับค่าข้อความของรายการในลิสต์ – ในกรณีของเราคือ มุมไบ ทำซ้ำขั้นตอนที่ 1 และ 2 เพื่อเพิ่มรายการสำหรับเมืองมังกาลอร์และไฮเดอราบัด
3. คลิกที่ปุ่มตกลง

ขั้นตอน 4) ไปที่หน้าต่างคุณสมบัติ แล้วเปลี่ยนค่าคุณสมบัติ ID ของตัวควบคุมเป็น lstLocation

เมื่อคุณทำการเปลี่ยนแปลงข้างต้นเสร็จแล้ว คุณจะเห็นผลลัพธ์ดังต่อไปนี้

ผลลัพธ์:-

จากผลลัพธ์ คุณจะเห็นได้อย่างชัดเจนว่า Listbox ถูกเพิ่มเข้าไปในฟอร์มแล้ว

ปุ่มวิทยุ

ปุ่มตัวเลือกใช้เพื่อแสดงรายการรายการที่ผู้ใช้สามารถเลือกได้ เรามาดูกันว่าเราจะนำไปใช้ได้อย่างไรด้วยตัวอย่างที่แสดงด้านล่าง เราจะเพิ่มปุ่มตัวเลือกสำหรับตัวเลือกชาย/หญิง

ขั้นตอน 1) ขั้นตอนแรกคือลากตัวควบคุม 'radiobutton' จากกล่องเครื่องมือไปยังแบบฟอร์มเว็บ (ดูภาพด้านล่าง) ตรวจสอบให้แน่ใจว่าได้เพิ่มปุ่มวิทยุ 2 ปุ่ม ปุ่มหนึ่งสำหรับตัวเลือก 'ชาย' และอีกปุ่มหนึ่งสำหรับ 'หญิง'

ขั้นตอน 2) เมื่อเพิ่ม Radiobutton แล้ว ให้เปลี่ยนคุณสมบัติ 'ข้อความ'

• ไปที่หน้าต่างคุณสมบัติโดยคลิกที่ 'การควบคุมปุ่มวิทยุ'
• เปลี่ยนคุณสมบัติข้อความของปุ่มตัวเลือกเป็น 'ชาย'
• ทำซ้ำขั้นตอนเดิมเพื่อเปลี่ยนเป็น 'เพศหญิง'
• นอกจากนี้ ให้เปลี่ยนคุณสมบัติ ID ของตัวควบคุมที่เกี่ยวข้องเป็น rdMale และ rdFemale

เมื่อคุณทำการเปลี่ยนแปลงข้างต้นเสร็จแล้ว คุณจะเห็นผลลัพธ์ดังต่อไปนี้

ผลลัพธ์:-

จากผลลัพธ์ คุณจะเห็นได้อย่างชัดเจนว่ามีการเพิ่มปุ่มตัวเลือก (radio button) ลงในแบบฟอร์มแล้ว

ช่องทำเครื่องหมาย

ช่องทำเครื่องหมาย (Checkbox) ใช้สำหรับแสดงรายการตัวเลือกที่ผู้ใช้สามารถเลือกได้หลายตัวเลือก มาดูวิธีการใช้งานโดยใช้ตัวอย่างด้านล่างกัน เราจะเพิ่มช่องทำเครื่องหมาย 2 ช่องลงในแบบฟอร์มเว็บของเรา ช่องทำเครื่องหมายเหล่านี้จะให้ตัวเลือกแก่ผู้ใช้ว่าต้องการเรียนรู้หรือไม่ C# หรือ ASP.Net

ขั้นตอน 1) ขั้นตอนแรกคือลากตัวควบคุมช่องทำเครื่องหมาย (checkbox) จากกล่องเครื่องมือไปยังแบบฟอร์มเว็บ ดังแสดงในภาพด้านล่าง

ขั้นตอน 2) เมื่อเพิ่มช่องทำเครื่องหมายแล้ว ให้เปลี่ยนคุณสมบัติ ID ของช่องทำเครื่องหมาย

• ไปที่หน้าต่างคุณสมบัติโดยการคลิกที่ตัวควบคุมกล่องกาเครื่องหมาย
• เปลี่ยนคุณสมบัติ ID ของตัวควบคุมที่เกี่ยวข้องเป็น 'chkC' และ 'chkASP'

นอกจากนี้ ให้เปลี่ยนคุณสมบัติข้อความของตัวควบคุม Checkbox เป็น 'C#' ทำแบบเดียวกันสำหรับตัวควบคุม Checkbox อื่น และเปลี่ยนเป็น 'ASP.Net'

1. เปลี่ยนค่าคุณสมบัติ ID ของช่องทำเครื่องหมายเป็น 'chkASP'

2. เปลี่ยนค่าคุณสมบัติ ID ของช่องทำเครื่องหมายเป็น chkC

เมื่อคุณทำการเปลี่ยนแปลงข้างต้นเสร็จแล้ว คุณจะเห็นผลลัพธ์ดังต่อไปนี้

ผลลัพธ์:-

จากผลลัพธ์ คุณจะเห็นได้อย่างชัดเจนว่ามีการเพิ่มช่องทำเครื่องหมาย (Checkboxes) ลงในแบบฟอร์มแล้ว

ปุ่ม

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

ขั้นตอน 1) ขั้นตอนแรกคือลากตัวควบคุมปุ่มจากกล่องเครื่องมือไปวางบนแบบฟอร์มเว็บ ดังแสดงในภาพด้านล่าง

ขั้นตอน 2) เมื่อเพิ่มปุ่มแล้ว ให้ไปที่หน้าต่างคุณสมบัติโดยคลิกที่ปุ่มควบคุม เปลี่ยนคุณสมบัติข้อความของตัวควบคุมปุ่มเป็นส่ง นอกจากนี้ ให้เปลี่ยนคุณสมบัติ ID ของปุ่มเป็น 'btnSubmit'

เมื่อคุณทำการเปลี่ยนแปลงข้างต้นเสร็จแล้ว คุณจะเห็นผลลัพธ์ดังต่อไปนี้

ผลลัพธ์:-

จากผลลัพธ์ คุณจะเห็นได้อย่างชัดเจนว่าปุ่มถูกเพิ่มลงในแบบฟอร์มแล้ว

ตัวจัดการเหตุการณ์ใน ASP.Net

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

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

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

ขั้นตอน 1) ขั้นแรก คุณต้องดับเบิลคลิกปุ่มบนแบบฟอร์มเว็บ ซึ่งจะทำให้แสดงรหัสเหตุการณ์สำหรับปุ่มใน Visual Studio

Visual Studio จะเพิ่มอีเวนต์ btnSubmit_Click โดยอัตโนมัติเมื่อคุณดับเบิ้ลคลิกปุ่มในโปรแกรมออกแบบฟอร์มเว็บ

ขั้นตอน 2) ตอนนี้เรามาเพิ่มโค้ดลงในเหตุการณ์ส่งเพื่อแสดงค่าในกล่องข้อความชื่อและตำแหน่งที่ผู้ใช้เลือกกัน

protected void btnSubmit_Click(object sender, EventArgs e)
{
	Response.Write(txtName.Text + "<br/>");

	Response.Write(lstLocation.SelectedItem.Text + "<br/>");

	lblName.Visible = false;
	txtName.Visible = false;
	lstLocation.Visible = false;
	chkC.Visible = false;
	chkASP.Visible = false;
	rdFemale.Visible = false;
	btnSubmit.Visible = false;
}

Code คำอธิบาย:-

1. โค้ดบรรทัดด้านบนทำสิ่งที่ง่ายที่สุด คือรับค่าจากช่องข้อความ Name และส่งไปยังฝั่งไคลเอ็นต์ผ่านอ็อบเจ็กต์ Response ดังนั้นหากคุณต้องการป้อนสตริง “Guruถ้าใส่ "99" ในช่องข้อความชื่อ ค่าของ txtName.Text จะเป็น 'Guru99 '.
2. บรรทัดโค้ดถัดไปจะดึงค่าที่เลือกจากลิสต์บ็อกซ์โดยใช้คุณสมบัติ 'lstLocation.SelectedItem.Text' จากนั้นจะเขียนค่านี้กลับไปยังไคลเอ็นต์โดยใช้เมธอด Response.Write
3. สุดท้ายนี้ เราจะทำให้ส่วนควบคุมทั้งหมดในฟอร์มมองไม่เห็น หากเราไม่ทำเช่นนี้ ส่วนควบคุมทั้งหมดรวมถึงค่าที่ป้อนจะแสดงพร้อมกัน โดยปกติแล้ว เมื่อผู้ใช้ป้อนข้อมูลทั้งหมดในฟอร์ม เช่น ชื่อ สถานที่ เพศ ฯลฯ หน้าถัดไปที่แสดงให้ผู้ใช้เห็นควรมีเฉพาะข้อมูลที่ยังไม่ได้ป้อนเท่านั้น ผู้ใช้ไม่ต้องการเห็นส่วนควบคุมชื่อ เพศ และสถานที่อีกครั้ง แต่ ASP.Net ไม่ทราบเรื่องนี้ ดังนั้นโดยค่าเริ่มต้น มันจะแสดงส่วนควบคุมทั้งหมดอีกครั้งเมื่อผู้ใช้คลิกปุ่มส่ง ดังนั้น เราจึงต้องเขียนโค้ดเพื่อให้แน่ใจว่าส่วนควบคุมทั้งหมดถูกซ่อนไว้ เพื่อให้ผู้ใช้เห็นเฉพาะผลลัพธ์ที่ต้องการเท่านั้น

เมื่อคุณทำการเปลี่ยนแปลงข้างต้นเสร็จแล้ว คุณจะเห็นผลลัพธ์ดังต่อไปนี้

ผลลัพธ์:-

ในหน้าจอ Output ให้ทำตามขั้นตอนต่อไปนี้:

1. ระบุชื่อของ Guruใส่เลข 99 ในช่องข้อความชื่อ
2. เลือกสถานที่จากรายการในแถบแสดงตัวเลือก "บังกาลอร์"
3. คลิกที่ปุ่มส่ง

เมื่อคุณทำตามขั้นตอนนี้แล้ว คุณจะเห็น 'Guru99 และตำแหน่งที่ตั้ง 'บังกาลอร์' ปรากฏบนหน้าเว็บ

คำถามที่พบบ่อย