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

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

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

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

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

ลองมาดูตัวอย่างว่าเราสามารถสร้างการควบคุมผู้ใช้เว็บใน ASP.Net ได้อย่างไร

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

เราจะสร้างการควบคุมเว็บ
มันจะถูกใช้เพื่อสร้างองค์ประกอบส่วนหัว
โดยจะมีข้อความที่กล่าวถึงด้านล่าง "บทช่วยสอน Guru99"บทช่วยสอนนี้มีไว้สำหรับ ASP.Net"

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

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

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

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

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

คุณจะเห็น “Guru99Control” ถูกเพิ่มเข้ามาในโซลูชั่น

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

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

คำอธิบายรหัส:-

ในไฟล์ Web Control ของเรา ขั้นแรกเราจะสร้างองค์ประกอบตาราง ใช้สำหรับเก็บข้อความ 2 แถวที่จะใช้แสดง

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

ต่อไป เราจะกำหนดแถวแรกของตารางและใส่ข้อความเป็น “Guru99 Tutorials”
จากนั้นเราจะกำหนดแถวที่สองของตารางและใส่ข้อความว่า “บทช่วยสอนนี้มีไว้สำหรับ ASP.Net”

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

การลงทะเบียนการควบคุมผู้ใช้บนเว็บฟอร์ม 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) ตอนนี้เรามาเพิ่มโค้ดของเราเพื่อลงทะเบียนการควบคุมผู้ใช้ ภาพหน้าจอด้านล่างแสดงการลงทะเบียนการควบคุมผู้ใช้กับโค้ดพื้นฐานข้างต้น

<%@ 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.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

คำอธิบายรหัส:-

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

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

ผลลัพธ์:-

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

การลงทะเบียนการควบคุม asp.net ทั่วโลกในไฟล์กำหนดค่าเว็บ config asp

บางครั้งอาจต้องการใช้การควบคุมผู้ใช้ในหลายเพจในแอปพลิเคชัน .Net ณ จุดนี้ คุณไม่ต้องการลงทะเบียนการควบคุมผู้ใช้บนเพจ 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' และลบบรรทัดควบคุมซึ่งมีการลงทะเบียนส่วนประกอบ Guru99 ออก หากคุณไม่ดำเนินการขั้นตอนนี้ ไฟล์ 'Guru99Control.ascx' จะถูกดำเนินการจากไฟล์ 'demo.aspx' แทนที่จะเป็นไฟล์ 'web.config'

<%@ 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.ore/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 คุณจะได้รับผลลัพธ์ด้านล่าง

ผลลัพธ์:-

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

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

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

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

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

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

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

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

ลองยกตัวอย่างง่ายๆ และสร้างจาก 'Guru99Control' ของเราที่สร้างขึ้นในส่วนก่อนหน้านี้

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

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

ขั้นตอน 1) เปิดไฟล์ Guru99Control.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
	</tr>
</table>

คำอธิบายรหัส:-

แอตทริบิวต์สคริปต์ runat=server ใช้เพื่อระบุว่าเรากำลังเพิ่มโค้ดเฉพาะของ Net และจำเป็นต้องรันบนเว็บเซิร์ฟเวอร์

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

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

!DOCTYPE html>
<html xmlns="http://www.w3.ore/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 ตัว

สรุป

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

ที่คุณอาจชอบ:

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

การลงทะเบียนการควบคุมผู้ใช้บนเว็บฟอร์ม ASP.NET

การลงทะเบียนการควบคุม asp.net ทั่วโลกในไฟล์กำหนดค่าเว็บ config asp

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

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

สรุป