Hướng dẫn về biểu mẫu web ASP.NET: Ví dụ về điều khiển người dùng

Trong ASP.Net, có thể tạo mã có thể sử dụng lại. Mã tái sử dụng có thể được sử dụng ở nhiều nơi mà không cần phải viết lại mã.

Mã có thể sử dụng lại giúp giảm lượng thời gian mà nhà phát triển sử dụng sau khi viết mã. Nó có thể được thực hiện một lần và tái sử dụng ở nhiều nơi.

Tạo điều khiển người dùng trong ASP.Net

ASP.Net có khả năng tạo các điều khiển Web. Các điều khiển này chứa mã có thể được sử dụng lại. Nó có thể được sử dụng trên các ứng dụng theo yêu cầu.

Chúng ta hãy xem một ví dụ về cách chúng ta có thể tạo điều khiển người dùng web trong ASP.Net

Trong ví dụ của chúng tôi,

Chúng ta sẽ tạo một điều khiển web.
Nó sẽ được sử dụng để tạo thành phần tiêu đề.
Nó sẽ chứa văn bản được đề cập bên dưới.”Hướng dẫn Guru99”Hướng dẫn này dành cho ASP.Net”

Hãy làm việc với ứng dụng web hiện tại của chúng tôi được tạo trong các phần trước. Hãy làm theo các bước dưới đây để tạo điều khiển người dùng Web.

Bước 1) Bước đầu tiên là tạo một trình điều khiển người dùng web và thêm nó vào Giải pháp Visual Studio của chúng tôi.

Vào Solution Explorer trong Visual Studio và nhấp chuột phải vào DemoApplication Solution
Chọn mục menu Thêm-> Mục mới

Bước 2) Trong bước tiếp theo, chúng ta cần chọn tùy chọn tạo điều khiển người dùng web

Trong hộp thoại dự án, chúng ta có thể thấy nhiều tùy chọn khác nhau để tạo các loại thành phần khác nhau. Nhấp vào tùy chọn “Web” ở phía bên trái.
Khi chúng tôi nhấp vào tùy chọn “Web”, bạn sẽ thấy tùy chọn cho “Kiểm soát người dùng biểu mẫu web”. Bấm vào tùy chọn này.
Sau đó, chúng tôi đặt tên cho Điều khiển Web “Guru99Control”.
Cuối cùng, nhấp vào nút 'Thêm' để cho phép Visual Studio thêm chức năng điều khiển người dùng web vào giải pháp của chúng ta.

Bạn sẽ thấy “Guru99Control” được thêm vào giải pháp.

Bước 4) Bây giờ là lúc thêm mã tùy chỉnh vào điều khiển người dùng Web. Mã của chúng tôi sẽ dựa trên cú pháp HTML thuần túy. Thêm mã sau vào tệp 'Guru99Control.ascx'

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

Giải thích mã: -

Trong tệp Điều khiển Web, trước tiên chúng tôi tạo một thành phần bảng. Điều này sẽ được sử dụng để giữ 2 hàng văn bản sẽ được sử dụng để hiển thị

“Hướng dẫn Guru99” và
“Hướng dẫn này dành cho ASP.Net.”

Tiếp theo, chúng tôi xác định hàng đầu tiên của bảng và đặt văn bản là “Hướng dẫn Guru99”.
Sau đó, chúng tôi xác định hàng thứ hai của bảng và đặt văn bản là “Hướng dẫn này dành cho ASP.Net”.

LƯU Ý: Bây giờ chúng tôi không thể thực thi mã này và hiển thị kết quả. Cách duy nhất để xem điều này có hiệu quả hay không là đưa nó vào ứng dụng của chúng tôi (tệp aspx). Chúng ta sẽ thấy điều này trong chủ đề tiếp theo.

Đăng ký Kiểm soát Người dùng trên biểu mẫu web ASP.NET

Trong phần trước, chúng ta đã thấy cách tạo một điều khiển web tùy chỉnh. Điều này có thể được sử dụng để hiển thị hai dòng sau trong một biểu mẫu web

“Hướng dẫn của Guru99”
“Hướng dẫn này dành cho ASP.Net.”

Sau khi 'điều khiển' tùy chỉnh được tạo, chúng ta cần sử dụng nó trong ứng dụng web của mình. Bước đầu tiên là đăng ký thành phần trong ứng dụng của chúng tôi (Demo.aspx). Đây là điều kiện tiên quyết để sử dụng trong mọi điều khiển web tùy chỉnh trong ứng dụng ASP.Net.

Hãy xem làm thế nào chúng ta có thể đạt được điều này. Các bước dưới đây là sự tiếp nối của phần trước. Trong phần trước, chúng tôi đã tạo điều khiển tùy chỉnh của mình. Trong phần này, chúng ta sẽ sử dụng điều khiển trong Demo.aspx hình thức web.

Đầu tiên, chúng ta sẽ đăng ký 'điều khiển' tùy chỉnh của mình vào tệp Demo.aspx.

Bước 1) Đảm bảo rằng bạn đang làm việc trên tệp demo.aspx. Trong tệp này, điều khiển người dùng web sẽ được đăng ký. Có thể thực hiện việc này bằng cách nhấp đúp vào tệp demo.aspx trong Solution explorer của giải pháp .Net của bạn.

Khi bạn nhấp đúp vào biểu mẫu, bạn có thể sẽ thấy mã bên dưới trong biểu mẫu. Đây là mã mặc định được Visual Studio thêm vào khi biểu mẫu web được thêm vào dự án ASP.Net.

Mã mặc định bao gồm các bước được yêu cầu để đảm bảo rằng biểu mẫu có thể chạy dưới dạng biểu mẫu web ASP.Net trong trình duyệt.

Bước 2) Bây giờ hãy thêm mã của chúng tôi để đăng ký kiểm soát người dùng. Ảnh chụp màn hình bên dưới hiển thị việc đăng ký quyền kiểm soát của người dùng đối với mã cơ bản ở trên.

<%@ 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>

Giải thích mã: -

Bước đầu tiên là đăng ký quyền kiểm soát người dùng web. Điều này bao gồm các thông số cơ bản dưới đây
1. Từ khóa 'Đăng ký' được sử dụng để đăng ký quyền kiểm soát người dùng web.
2. Tham số src được sử dụng để xác định tên của điều khiển, trong trường hợp của chúng tôi là Guru99Control.ascx.
3. Tên thẻ và Tiền tố thẻ là các tên riêng lẻ được đặt cho điều khiển. Điều này được thực hiện để họ có thể tham chiếu trong các trang HTML như một điều khiển HTML thông thường.
Tiếp theo, chúng tôi tham chiếu quyền kiểm soát người dùng Web của mình thông qua TagPrefix:TagName đã được chỉ định trước đó. TagPrefix:TagName là chỉ báo cho biết chúng tôi muốn sử dụng điều khiển web tùy chỉnh của mình. Khi trang được xử lý bởi máy chủ web, bạn có thể thấy chúng tôi đã sử dụng thẻ TWebControl:WebControl. Sau đó, nó sẽ xử lý 'Guru99Control' tương ứng. Trong ví dụ của chúng tôi, đó là TWebControl:WebControl.
1. Một ID tùy chọn được cấp cho việc kiểm soát “Tiêu đề”. Nói chung, đây là một cách thực hành tốt để cung cấp ID cho điều khiển HTML.
2. Cuối cùng, thuộc tính runat=server để điều khiển sẽ chạy trên máy chủ web. Đối với tất cả các điều khiển ASP.Net, đây là thuộc tính mặc định. Tất cả các điều khiển ASP.Net (bao gồm cả điều khiển tùy chỉnh) phải được chạy trên máy chủ. Đầu ra của chúng sau đó được gửi từ máy chủ đến máy khách và hiển thị trên trình duyệt tương ứng.

Khi mã trên được đặt và dự án được thực thi bằng cách sử dụng Visual Studio. Bạn sẽ nhận được đầu ra dưới đây.

Đầu ra: -

Thông báo đầu ra hiển thị trong trình duyệt cho thấy điều khiển người dùng web đã được thực thi thành công.

Đăng ký điều khiển asp.net trên toàn cầu trong tệp cấu hình web asp

Đôi khi người ta có thể muốn sử dụng các điều khiển của người dùng trên nhiều trang trong ứng dụng .Net. Tại thời điểm này, bạn không muốn tiếp tục đăng ký quyền kiểm soát người dùng trên mỗi trang ASP.Net.

Trong .Net, bạn có thể thực hiện đăng ký trong tệp 'web.config'.
Tệp web.config là tệp cấu hình chung được sử dụng bởi tất cả các trang web trong dự án .Net.
Nó chứa các chi tiết cấu hình cần thiết cho dự án web ASP.Net. Ví dụ, một cấu hình phổ biến trong tệp web.config là tham số khung mục tiêu.
Tham số này được sử dụng để xác định phiên bản .Net framework được ứng dụng sử dụng.

Dưới đây là ảnh chụp nhanh mã mặc định trong tệp web.config. Phần được đánh dấu là phần khung mục tiêu.

Hãy xem cách chúng ta có thể đăng ký Guru99Control trong tệp web.config.

Bước 1) Mở tệp web.config từ trình khám phá giải pháp bằng cách nhấp đúp vào tệp.

Khi bạn mở tệp web.config, bạn có thể thấy cấu hình bên dưới. 'web.config' được Visual Studio tự động thêm vào khi dự án được tạo. Đây là cấu hình cơ bản cần thiết để dự án ASP.Net hoạt động bình thường.

Bước 2) Bây giờ hãy đăng ký thành phần của chúng tôi trong tệp web.config. Chúng ta cần thêm các dòng dưới đây cho điều đó.

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

Việc đăng ký bao gồm các bước phụ dưới đây

Thêm một thẻ có tên . Điều đó có nghĩa là tất cả cấu hình cho các điều khiển sẽ được áp dụng cho tất cả các trang ASP.Net trong giải pháp.
Các thẻ có nghĩa là bạn đang thêm cấu hình cho điều khiển người dùng.
Sau đó, chúng tôi đăng ký quyền kiểm soát người dùng bằng thẻ bổ sung. Các thông số còn lại của tagPrefix, tagName và src vẫn giữ nguyên như trước.

Bước 3) Hãy nhớ truy cập trang 'demo.aspx' và xóa các dòng để kiểm soát, trong đó có đăng ký thành phần Guru99. Nếu bạn không thực hiện bước này thì tệp 'Guru99Control.ascx' sẽ được thực thi từ tệp 'demo.aspx' thay vì tệp '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>

Mã ở trên được thiết lập và dự án được thực thi bằng Visual Studio. Bạn sẽ nhận được kết quả bên dưới.

Đầu ra: -

Thông báo đầu ra cho thấy điều khiển người dùng web đã được thực thi thành công.

Thêm thuộc tính công khai vào điều khiển web

Thuộc tính là một cặp khóa-giá trị được liên kết với bất kỳ điều khiển nào. Hãy lấy một ví dụ đơn giản Thẻ HTML. Ảnh chụp màn hình về giao diện của thẻ được hiển thị bên dưới.

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

Thẻ 'div' được sử dụng để tạo một phần trong tài liệu HTML. Thẻ 'div' có một thuộc tính được gọi là thuộc tính kiểu. Điều này có thể được sử dụng để tạo kiểu khác cho văn bản được hiển thị trong thẻ div. Thông thường bạn sẽ thấy mã cho thẻ div như bên dưới.

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

Vì vậy, thuộc tính màu không gì khác ngoài cặp khóa-giá trị cung cấp thêm thông tin về chính thẻ đó. Trong trường hợp trên, tên khóa là 'style' và giá trị khóa là 'color:#0000FF'.

Tương tự, đối với các điều khiển của người dùng, bạn có thể tạo các thuộc tính của riêng mình để mô tả điều khiển.

Hãy lấy một ví dụ đơn giản và xây dựng dựa trên 'Guru99Control' được tạo trong các phần trước.

Trong ví dụ của chúng tôi, chúng tôi sẽ thêm một thuộc tính số nguyên đơn giản gọi là MinValue. Giá trị này sẽ đại diện cho số ký tự tối thiểu trong văn bản được hiển thị trong điều khiển người dùng.

Hãy thực hiện các bước được đề cập dưới đây để thực hiện điều này.

Bước 1) Mở tệp Guru99Control.ascx. Thêm mã để thêm thuộc tính 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>

Giải thích mã: -

Thuộc tính script runat=server được sử dụng để chỉ ra rằng chúng tôi đang thêm một số mã cụ thể.Net và nó cần được chạy trên máy chủ web.

Điều này là cần thiết để xử lý bất kỳ thuộc tính nào được thêm vào điều khiển người dùng. Sau đó, chúng tôi thêm thuộc tính MinValue của mình và đặt cho nó giá trị mặc định là 0.

Bước 2) Bây giờ hãy tham chiếu thuộc tính này trong tệp demo.aspx của chúng tôi. Tất cả những gì chúng ta đang làm bây giờ chỉ là tham chiếu thuộc tính MinValue và gán giá trị mới là 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>

LƯU Ý: – Khi bạn chạy mã này, nó sẽ không hiển thị bất kỳ kết quả nào. Điều này là do đầu ra nằm dưới giới hạn 100 ký tự.

Tổng kết

ASP.Net có khả năng tạo điều khiển người dùng. Điều khiển người dùng được sử dụng để có mã được sử dụng nhiều lần trong một ứng dụng. Kiểm soát người dùng sau đó có thể được sử dụng lại trên ứng dụng.
Kiểm soát người dùng cần phải được đăng ký trên trang ASP.Net trước khi có thể sử dụng.
Để sử dụng quyền kiểm soát của người dùng trên tất cả các trang trong một ứng dụng, hãy đăng ký nó vào tệp web.config.
Các thuộc tính cũng có thể được thêm vào điều khiển của người dùng web.

Bạn có thể thích:

Tạo điều khiển người dùng trong ASP.Net

Đăng ký Kiểm soát Người dùng trên biểu mẫu web ASP.NET

Đăng ký điều khiển asp.net trên toàn cầu trong tệp cấu hình web asp

NHỮNG BÀI VIẾT LIÊN QUAN

Thêm thuộc tính công khai vào điều khiển web

Tổng kết