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ể tái sử dụng giúp giảm thời gian mà lập trình viên bỏ ra sau khi viết mã. Việc này chỉ cần thực hiện một lần và có thể 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 ra các điều khiển web. Các điều khiển này chứa mã có thể được tái sử dụng. Chúng có thể được sử dụng trong toàn bộ ứng dụng tùy theo yêu cầu.

Hãy cùng xem một ví dụ về cách chúng ta có thể tạo một đ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 đoạn văn bản được đề cập bên dưới: “Guru99 bài hướng dẫn” và “Bài 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.

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

Bước 2) 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.

1. 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.
2. Khi chúng ta nhấp vào tùy chọn “Web”, bạn sẽ thấy tùy chọn “Web Forms User Control”. Hãy nhấp vào tùy chọn này.
3. Sau đó, chúng tôi đặt tên cho Web Control, “Guru99Control”.
4. 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.

Sau đó bạn sẽ thấy “GuruĐã bổ sung "99Control" vào giải pháp.

Bước 3) 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 ta sẽ dựa trên cú pháp HTML thuần túy. Thêm đoạn mã sau vào 'GuruTệp '99Control.ascx'.

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

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

Code Giải trình:-

1. Trong tệp Web Control của chúng ta, trước tiên chúng ta tạo một phần tử bảng. Phần tử này sẽ được sử dụng để chứa 2 hàng văn bản hiển thị “Guru99 bài hướng dẫn” và “Bài hướng dẫn này dành cho ASP.Net.”
2. Tiếp theo, chúng ta định nghĩa hàng đầu tiên của bảng và đặt văn bản là “Guru99 bài hướng dẫn.”
3. 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 Ý: Hiện tại chúng ta không thể chạy đoạn mã này và hiển thị kết quả. Cách duy nhất để kiểm tra xem nó có hoạt động hay không là đưa nó vào ứng dụng của chúng ta (tệp aspx). Chúng ta sẽ xem xét điều này trong chủ đề tiếp theo.

Đăng ký các điều khiển 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 khiển này có thể được sử dụng để hiển thị hai dòng sau trong một biểu mẫu web:

• "Guru99 bài hướng dẫn”
• “Hướng dẫn này dành cho ASP.Net.”

Sau khi tạo xong 'control' tùy chỉnh, 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 (Demo.aspx). Đây là điều kiện tiên quyết để sử dụng bất kỳ control web tùy chỉnh nào trong ứng dụng ASP.Net.

Hãy cùng xem cách chúng ta có thể thực hiện điều này. Các bước dưới đây là phần tiếp theo của phần trước, trong đó chúng ta đã tạo ra đ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 biểu mẫu 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) Hãy đảm bảo bạn đang làm việc trên tệp demo.aspx. Chính trong tệp này, điều khiển người dùng web sẽ được đăng ký. Bạn có thể thực hiện điều 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 đoạn mã bên dưới trong biểu mẫu. Đây là đoạn mã mặc định được Visual Studio thêm vào khi một biểu mẫu web được thêm vào dự án ASP.Net. Đoạn mã mặc định bao gồm các bước cần thiết để đảm bảo rằng biểu mẫu có thể chạy như một biểu mẫu web ASP.Net trong trình duyệt.

Bước 2) Bây giờ chúng ta hãy thêm mã để đăng ký điều khiển người dùng. Ảnh chụp màn hình bên dưới cho thấy việc đăng ký điều khiển người dùng được thêm vào đoạn 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.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 Giải trình:-

1. Bước đầu tiên là đăng ký quyền điều khiển người dùng web. Quá trình này bao gồm các tham số cơ bản sau:
   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 này là Guru99Control.ascx.
   3. TagName và TagPrefix là các tên riêng biệt được đặt cho điều khiển. Điều này được thực hiện để chúng có thể được tham chiếu trong các trang HTML như một điều khiển HTML thông thường.
2. Tiếp theo, chúng ta tham chiếu đến điều khiển người dùng Web của mình thông qua TagPrefix:TagName đã được gán trước đó. TagPrefix:TagName là một chỉ báo cho biết chúng ta muốn sử dụng điều khiển web tùy chỉnh của mình. Khi trang được máy chủ web xử lý, bạn có thể thấy chúng ta đã sử dụng thẻ TWebControl:WebControl. Sau đó, nó sẽ xử lý 'Guru99Kiểm soát' cho phù hợp.
   1. Một ID tùy chọn được gán cho phần tử điều khiển "Header". Nói chung, nên gán ID cho một phần tử điều khiển HTML.
   2. Cuối cùng, thuộc tính runat=”server” đảm bảo rằng đ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ả các điều khiển tùy chỉnh) đều phải chạy trên máy chủ. Sau đó, đầu ra của chúng được gửi từ máy chủ đến máy khách và hiển thị trong 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 kết quả đầ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ý các điều khiển ASP.Net trên toàn cục trong tệp cấu hình web.config.

Đôi khi, bạn có thể muốn sử dụng các điều khiển người dùng trên nhiều trang trong một ứng dụng .Net. Trong trường hợp này, bạn không muốn phải đăng ký các điều khiển người dùng trên từng trang ASP.Net một.

• 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 một 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ý tài khoản của mình. Guru99Control trong tệp web.config.

Bước 1) Mở tệp web.config từ Solution Explorer 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>

Quá trình đăng ký bao gồm các bước nhỏ sau:

1. 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.
2. 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.
3. Tiếp theo, chúng ta đăng ký điều khiển người dùng với thẻ bổ sung. Các tham số còn lại là 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 mã liên quan đến việc đăng ký điều khiển. GuruThành phần 99. Nếu bạn không thực hiện bước này, thì 'GuruTệp '99Control.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" %>

<!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>

Sau khi thiết lập đoạn mã trên và chạy dự án bằng Visual Studio, bạn sẽ nhận được kết quả như 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ề cách thẻ này trông như thế nào đượ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à phát triển dựa trên 'Guru'99Control' đã được tạo ở các phần trước. Trong ví dụ này, chúng ta sẽ thêm một thuộc tính số nguyên đơn giản có tên 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ở GuruTệp 99Control.ascx. Thêm đoạn 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</td>
	</tr>
</table>

Code Giải trình:-

Thuộc tính `script runat=”server”` được sử dụng để chỉ ra rằng chúng ta đang thêm một số mã dành riêng cho .Net và mã này 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 ta thêm thuộc tính `MinValue` và gán 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.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>

LƯU Ý: Khi bạn chạy đoạn 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 trong giới hạn 100 ký tự.

Câu Hỏi Thường Gặp