บทช่วยสอนเว็บฟอร์ม ASP.NET: ตัวอย่างการควบคุมผู้ใช้

⚡ สรุปอย่างชาญฉลาด

ASP.NET Web Forms User Controls ช่วยให้คุณสร้างส่วนประกอบ UI ที่นำกลับมาใช้ซ้ำได้เพียงครั้งเดียว และใช้งานได้ในหลายหน้า บทความนี้แสดงวิธีการสร้าง User Control ลงทะเบียน User Control ในแต่ละหน้าและในไฟล์ web.config รวมทั้งวิธีการเพิ่มคุณสมบัติสาธารณะ (public properties)

♻️ นำมาใช้ใหม่ Code: ผู้ใช้ควบคุมการจัดรูปแบบและตรรกะของแพ็กเกจเพียงครั้งเดียวเพื่อนำไปใช้ซ้ำในแอปพลิเคชันต่างๆ
🛠️ สร้างการควบคุม: เพิ่ม Web Forms User Control (.ascx) ใน Visual Studio และเพิ่มโค้ด HTML ลงไป
📝 ลงทะเบียนที่เพจ: ใช้คำสั่ง Register ร่วมกับ Src, TagName และ TagPrefix เพื่อใช้งานบนหน้าเว็บเดียว
🌍 ลงทะเบียนทั่วโลก: เพิ่มคอนโทรลดังกล่าวไว้ในส่วน pages/controls ในไฟล์ web.config เพื่อใช้งานในทุกหน้าเว็บ
🔧 ทรัพย์สินสาธารณะ: แสดงคุณสมบัติเช่น MinValue เพื่อให้หน้าเว็บสามารถกำหนดค่าพฤติกรรมของตัวควบคุมได้

อ่านเพิ่มเติม

ใน ASP.Net สามารถสร้างโค้ดที่นำมาใช้ซ้ำได้ รหัสที่นำมาใช้ซ้ำสามารถใช้ได้ในหลายที่โดยไม่จำเป็นต้องเขียนโค้ดอีกครั้ง

โค้ดที่นำกลับมาใช้ซ้ำได้ช่วยลดเวลาที่นักพัฒนาใช้ในการเขียนโค้ดลงได้ เพราะสามารถเขียนเพียงครั้งเดียวและนำไปใช้ซ้ำได้หลายที่

สร้างการควบคุมผู้ใช้ใน ASP.Net

ASP.Net มีความสามารถในการสร้าง Web controls ซึ่ง controls เหล่านี้มีโค้ดที่สามารถนำมาใช้ซ้ำได้ สามารถนำไปใช้ในส่วนต่างๆ ของแอปพลิเคชันได้ตามความต้องการ

เรามาดูตัวอย่างวิธีการสร้าง Web User Control ใน ASP.Net กันครับ

ในตัวอย่างของเรา:

เราจะสร้างการควบคุมเว็บ
มันจะถูกใช้เพื่อสร้างองค์ประกอบส่วนหัว
จะมีข้อความดังต่อไปนี้: “Guruข้อความ "99 Tutorials" และ "This Tutorial is for ASP.Net" ปรากฏขึ้น

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

ขั้นตอน 1) ขั้นตอนแรกคือการสร้างการควบคุมผู้ใช้เว็บและเพิ่มลงในโซลูชัน Visual Studio ของเรา

ไปที่ Solution Explorer ใน Visual Studio แล้วคลิกขวาที่ Solution DemoApplication
เลือกเมนูรายการ เพิ่ม -> รายการใหม่

ขั้นตอน 2) ขั้นตอนต่อไป เราต้องเลือกตัวเลือกในการสร้างตัวควบคุมผู้ใช้บนเว็บ

ในกล่องโต้ตอบโครงการ เราจะเห็นตัวเลือกต่างๆ สำหรับการสร้างส่วนประกอบประเภทต่างๆ คลิกตัวเลือก "เว็บ" ทางด้านซ้ายมือ
เมื่อเราคลิกตัวเลือก “เว็บ” คุณจะเห็นตัวเลือก “การควบคุมผู้ใช้แบบฟอร์มเว็บ” ให้คลิกตัวเลือกนี้
จากนั้นเราจึงตั้งชื่อให้กับ Web Control ว่า “Guru99Control”
สุดท้าย ให้คลิกปุ่ม 'เพิ่ม' เพื่อให้ Visual Studio เพิ่มการควบคุมผู้ใช้เว็บลงในโซลูชันของเรา

จากนั้นคุณจะเห็น “Guruมีการเพิ่ม “99Control” เข้าไปในโซลูชันแล้ว

ขั้นตอน 3) ตอนนี้ถึงเวลาเพิ่มโค้ดที่กำหนดเองลงในส่วนควบคุมผู้ใช้บนเว็บแล้ว โค้ดของเราจะใช้ไวยากรณ์ HTML ล้วนๆ เพิ่มโค้ดต่อไปนี้ลงใน 'Guruไฟล์ '99Control.ascx'

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code คำอธิบาย:-

ในไฟล์ Web Control ของเรา ขั้นแรกเราจะสร้างองค์ประกอบตารางขึ้นมา ซึ่งจะใช้สำหรับเก็บข้อความ 2 แถวที่จะแสดงผลว่า “Guruมีข้อความว่า “99 Tutorials” และ “This Tutorial is for ASP.Net.”
ถัดไป เราจะกำหนดแถวแรกของตารางและใส่ข้อความว่า “Guru99 บทเรียน”
จากนั้นเราจะกำหนดแถวที่สองของตารางและใส่ข้อความว่า “บทช่วยสอนนี้มีไว้สำหรับ ASP.Net”

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

การลงทะเบียน User Control บนแบบฟอร์มเว็บ ASP.NET

ในส่วนก่อนหน้านี้ เราได้เห็นวิธีการสร้างตัวควบคุมเว็บแบบกำหนดเอง ซึ่งสามารถใช้แสดงข้อความสองบรรทัดต่อไปนี้ในแบบฟอร์มเว็บได้:

"Guru99 บทเรียน”
“บทช่วยสอนนี้มีไว้สำหรับ ASP.Net”

เมื่อสร้าง 'คอนโทรล' แบบกำหนดเองเสร็จแล้ว เราจำเป็นต้องนำไปใช้ในเว็บแอปพลิเคชันของเรา ขั้นตอนแรกคือการลงทะเบียนคอมโพเนนต์ในแอปพลิเคชันของเรา (Demo.aspx) นี่คือข้อกำหนดเบื้องต้นในการใช้เว็บคอนโทรลแบบกำหนดเองใดๆ ในแอปพลิเคชัน ASP.Net

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

ขั้นตอน 1) โปรดตรวจสอบให้แน่ใจว่าคุณกำลังทำงานกับไฟล์ demo.aspx ไฟล์นี้จะเป็นที่ที่ตัวควบคุมผู้ใช้เว็บจะถูกลงทะเบียน คุณสามารถทำได้โดยการดับเบิ้ลคลิกที่ไฟล์ demo.aspx ใน Solution Explorer ของโซลูชัน .NET ของคุณ

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

ขั้นตอน 2) ต่อไปเราจะเพิ่มโค้ดเพื่อลงทะเบียน User Control ภาพหน้าจอด้านล่างแสดงการลงทะเบียน User Control ที่เพิ่มเข้าไปในโค้ดพื้นฐานด้านบน

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Code คำอธิบาย:-

ขั้นตอนแรกคือการลงทะเบียนส่วนควบคุมผู้ใช้บนเว็บ ซึ่งประกอบด้วยพารามิเตอร์พื้นฐานดังต่อไปนี้:
1. คำสำคัญ 'ลงทะเบียน' ใช้เพื่อลงทะเบียนการควบคุมผู้ใช้เว็บ
2. พารามิเตอร์ Src ใช้สำหรับกำหนดชื่อของคอนโทรล ซึ่งในกรณีของเราคือ Guru99Control.ascx.
3. TagName และ TagPrefix คือชื่อเฉพาะที่กำหนดให้กับตัวควบคุม เพื่อให้สามารถอ้างอิงถึงตัวควบคุมเหล่านี้ในหน้า HTML ได้เหมือนกับตัวควบคุม HTML ทั่วไป
ถัดไป เราจะอ้างอิงถึงตัวควบคุมผู้ใช้เว็บของเราผ่านทาง TagPrefix:TagName ที่กำหนดไว้ก่อนหน้านี้ TagPrefix:TagName เป็นตัวบ่งชี้ว่าเราต้องการใช้ตัวควบคุมเว็บแบบกำหนดเองของเรา เมื่อเว็บเซิร์ฟเวอร์ประมวลผลหน้าเว็บ คุณจะเห็นว่าเราได้ใช้แท็ก TWebControl:WebControl แล้ว จากนั้นระบบจะประมวลผล 'Guru'99Control' ตามนั้น
1. สามารถกำหนด ID ให้กับส่วนควบคุม "Header" ได้ ซึ่งโดยทั่วไปแล้ว การกำหนด ID ให้กับส่วนควบคุม HTML ถือเป็นแนวปฏิบัติที่ดี
2. สุดท้ายนี้ คุณสมบัติ `runat=”server”` ช่วยให้มั่นใจได้ว่าคอนโทรลจะทำงานบนเว็บเซิร์ฟเวอร์ สำหรับคอนโทรล ASP.Net ทั้งหมด นี่คือคุณสมบัติเริ่มต้น คอนโทรล ASP.Net ทั้งหมด (รวมถึงคอนโทรลที่กำหนดเอง) ต้องทำงานบนเซิร์ฟเวอร์ จากนั้นผลลัพธ์จะถูกส่งจากเซิร์ฟเวอร์ไปยังไคลเอนต์และแสดงผลในเบราว์เซอร์ตามลำดับ

เมื่อโค้ดข้างต้นถูกตั้งค่า และโปรเจ็กต์ถูกดำเนินการโดยใช้ Visual Studioคุณจะได้ผลลัพธ์ด้านล่าง

ผลลัพธ์:-

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

การลงทะเบียนคอนโทรล ASP.Net ทั่วโลกในไฟล์การกำหนดค่า web.config

บางครั้งเราอาจต้องการใช้ User Control ในหลายๆ หน้าของแอปพลิเคชัน .Net ในกรณีนี้ เราคงไม่อยากลงทะเบียน User Control ในแต่ละหน้าของ ASP.Net ซ้ำๆ

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

ด้านล่างนี้คือภาพรวมของโค้ดเริ่มต้นในไฟล์ web.config ส่วนที่ไฮไลต์คือส่วนกรอบเป้าหมาย

มาดูกันว่าเราจะลงทะเบียนได้อย่างไร Guru99Control ในไฟล์ web.config

ขั้นตอน 1) เปิดไฟล์ web.config จาก Solution Explorer โดยการดับเบิ้ลคลิกที่ไฟล์

เมื่อคุณเปิดไฟล์ web.config คุณอาจเห็นการกำหนดค่าดังต่อไปนี้ 'web.config' จะถูกเพิ่มโดย Visual Studio โดยอัตโนมัติเมื่อสร้างโปรเจ็กต์ นี่คือการกำหนดค่าพื้นฐานที่จำเป็นในการทำให้โปรเจ็กต์ ASP.Net ทำงานได้อย่างถูกต้อง

ขั้นตอน 2) ตอนนี้มาลงทะเบียนส่วนประกอบของเราในไฟล์ web.config เราจำเป็นต้องเพิ่มบรรทัดด้านล่างสำหรับสิ่งนั้น

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" />
		</controls>
	</pages>
	</system.web>
</configuration>

ขั้นตอนการลงทะเบียนประกอบด้วยขั้นตอนย่อยดังต่อไปนี้:

เพิ่มแท็กที่เรียกว่า - หมายความว่าการกำหนดค่าทั้งหมดสำหรับการควบคุมจะใช้ได้กับเพจ ASP.Net ทั้งหมดในโซลูชัน
ที่ แท็กหมายความว่าคุณกำลังเพิ่มการกำหนดค่าสำหรับการควบคุมผู้ใช้
จากนั้นเราลงทะเบียนตัวควบคุมผู้ใช้ด้วยแท็กเพิ่มเติม พารามิเตอร์ที่เหลือ ได้แก่ tagPrefix, tagName และ src ยังคงเหมือนเดิม

ขั้นตอน 3) อย่าลืมไปที่หน้า 'demo.aspx' และลบโค้ดบรรทัดที่ลงทะเบียนไว้สำหรับคอนโทรลนั้นออก Guruส่วนประกอบที่ 99 หากคุณไม่ดำเนินการขั้นตอนนี้ 'Guruไฟล์ '99Control.ascx' จะถูกเรียกใช้งานจากไฟล์ 'demo.aspx' แทนที่จะเป็นไฟล์ 'web.config'

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

เมื่อตั้งค่าโค้ดข้างต้นเสร็จแล้ว และรันโปรเจ็กต์โดยใช้ Visual Studio คุณจะได้รับผลลัพธ์ดังต่อไปนี้

ผลลัพธ์:-

ข้อความเอาท์พุตแสดงว่าการควบคุมผู้ใช้เว็บดำเนินการได้สำเร็จ

การเพิ่มคุณสมบัติสาธารณะให้กับการควบคุมเว็บ

คุณสมบัติ (Property) คือคู่คีย์-ค่าที่เชื่อมโยงกับตัวควบคุมใดๆ ลองยกตัวอย่างง่ายๆ ดู แท็ก HTML ภาพหน้าจอแสดงลักษณะของแท็กอยู่ด้านล่าง

<html>
<body>
	<div style="color:#0000FF">

		Demo Form

	</div>
</body>
</html>

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

<div style="color:#0000FF">

ดังนั้นแอตทริบิวต์สีจึงเป็นเพียงคู่คีย์-ค่าที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับแท็ก ในกรณีข้างต้น ชื่อคีย์คือ 'style' และค่าคีย์คือ 'color:#0000FF'

ในทำนองเดียวกัน สำหรับการควบคุมผู้ใช้ คุณสามารถสร้างคุณสมบัติของคุณเองที่อธิบายการควบคุมได้

ลองยกตัวอย่างง่ายๆ และต่อยอดจาก 'Guruเราได้สร้าง '99Control' ไว้แล้วในส่วนก่อนหน้านี้ ในตัวอย่างนี้ เราจะเพิ่มคุณสมบัติแบบจำนวนเต็มอย่างง่ายๆ ที่เรียกว่า MinValue ค่านี้จะแสดงถึงจำนวนอักขระขั้นต่ำในข้อความที่แสดงใน User Control

มาทำตามขั้นตอนที่กล่าวถึงด้านล่างเพื่อให้สิ่งนี้เกิดขึ้น

ขั้นตอน 1) เปิด Guruไฟล์ 99Control.ascx เพิ่มโค้ดสำหรับเพิ่มคุณสมบัติ MinValue เข้าไป

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code คำอธิบาย:-

แอตทริบิวต์ `script runat=”server”` ใช้เพื่อระบุว่าเรากำลังเพิ่มโค้ดเฉพาะของ .Net และโค้ดนั้นจำเป็นต้องรันบนเว็บเซิร์ฟเวอร์ ซึ่งจำเป็นสำหรับการประมวลผลคุณสมบัติใดๆ ที่เพิ่มลงในตัวควบคุมผู้ใช้ จากนั้นเราเพิ่มคุณสมบัติ `MinValue` และกำหนดค่าเริ่มต้นเป็น 0

ขั้นตอน 2) ตอนนี้เรามาอ้างอิงคุณสมบัตินี้ในไฟล์ demo.aspx ของเรา สิ่งที่เรากำลังทำตอนนี้คือเพียงอ้างอิงคุณสมบัติ MinValue และกำหนดค่าใหม่เป็น 100

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100" />
	</form>
</body>
</html>

หมายเหตุ: เมื่อคุณรันโค้ดนี้ จะไม่มีผลลัพธ์ใดๆ แสดงออกมา เนื่องจากผลลัพธ์มีขนาดต่ำกว่า 100 ตัวอักษร

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

ใช่แล้ว ผู้ช่วย AI สามารถสร้างมาร์กอัป .ascx, โค้ดเบื้องหลัง และคำสั่ง Register จากคำอธิบายของส่วนประกอบที่นำกลับมาใช้ใหม่ได้ Revตรวจสอบค่า TagPrefix, TagName และ Src ที่สร้างขึ้นเพื่อให้แน่ใจว่าตรงกับโปรเจ็กต์ของคุณ

ส่วนหนึ่ง AI สามารถช่วยแปลง User Control (.ascx) ให้เป็น ASP.NET Core Razor Component หรือ Partial View และระบุความแตกต่างในโมเดลได้ การย้ายข้อมูลยังคงต้องมีการทดสอบด้วยตนเอง เนื่องจากเฟรมเวิร์กจัดการสถานะและเหตุการณ์แตกต่างกัน

ไฟล์ User Control (.ascx) สร้างขึ้นจาก Control ที่มีอยู่แล้ว สร้างได้ง่าย แต่ผูกติดอยู่กับโปรเจกต์เดียว ในขณะที่ Custom Control จะถูกคอมไพล์เป็นไฟล์ DLL สร้างยากกว่า แต่สามารถนำกลับมาใช้ซ้ำได้ในหลายโปรเจกต์ และมีอยู่ใน Toolbox

ลงทะเบียนเฉพาะในหน้าเดียวเมื่อใช้คอนโทรลนั้นในหน้านั้นหน้าเดียวเท่านั้น ลงทะเบียนในไฟล์ web.config เมื่อใช้คอนโทรลนั้นในหลายหน้า เพื่อหลีกเลี่ยงการเขียนคำสั่ง Register ซ้ำในทุกหน้า

บทช่วยสอนเว็บฟอร์ม ASP.NET: ตัวอย่างการควบคุมผู้ใช้

สร้างการควบคุมผู้ใช้ใน ASP.Net

การลงทะเบียน User Control บนแบบฟอร์มเว็บ ASP.NET

การลงทะเบียนคอนโทรล ASP.Net ทั่วโลกในไฟล์การกำหนดค่า web.config

การเพิ่มคุณสมบัติสาธารณะให้กับการควบคุมเว็บ

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

สรุปโพสต์นี้ด้วย:

ลงทะเบียนเพื่อรับจดหมายข่าว

สร้างการควบคุมผู้ใช้ใน ASP.Net

การลงทะเบียน User Control บนแบบฟอร์มเว็บ ASP.NET

บทความที่เกี่ยวข้อง

การลงทะเบียนคอนโทรล ASP.Net ทั่วโลกในไฟล์การกำหนดค่า web.config

การเพิ่มคุณสมบัติสาธารณะให้กับการควบคุมเว็บ

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

สรุปโพสต์นี้ด้วย:

ลงทะเบียนเพื่อรับจดหมายข่าว