Ngôn ngữ ASP.NET - Web User Control
Web User Control trong ASP.NET
MS Visual Studio .NET cung cấp rất nhiều các điều khiển để phát triển ứng dụng gọi là điều khiển nội tại (Instrict control). Ngoài ra, nó còn cung cấp cho chúng ta khả năng tự xây dựng các điều khiển tùy biến, nếu các điều khiển hiện hành không đáp ứng được yêu cầu thiết kế trang web với những chức năng riêng biệt.
Thí dụ: Nếu ứng dụng của bạn cần chiếc máy tính (Calculator) ở rất nhiều trang thì giải pháp tốt nhất là nên tạo một điều khiển Calculator riêng thay việc kết hợp các điều khiển truyền thống, khi đó ta có thể sử dụng điều khiển này trong toàn bộ ứng dụng.
Đề mục này sẽ hướng dẫn cách tạo và sử dụng điều khiển do người dùng tự xây dựng hay còn gọi là điều khiển tùy biến (Web User Controls).
Thực chất của User Control (UC) chính là một "trang con", trong đó có thể chứa bất kỳ nội dung nào (trừ các thẻ <HTML> <BODY>,<FORM>, vì một trang chỉ có duy nhất một lần xuất hiện các thẻ này) . "Trang con" này sau đó có thể được khai báo vào các trang khác để sử dụng. Khi muốn cập nhật nội dung ở tất cả các trang, ta chỉ việc sửa đổi duy nhất UC ban đầu. Khả năng này của ASP.NET giúp chúng ta xây dựng ứng dụng nhanh hơn, dễ bảo trì hơn.
Mỗi một UC được đặt trong một trang có phần mở rộng là *.ascx. File này có đặc điểm là không truy cập trực tiếp từ trình duyệt mà chỉ được chèn vào các trang aspx. Nội dung trang User Control được khai báo với thẻ <%@ Control ..%> như sau :
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits=" WebUserControl " %>
Các lớp User Control kế thừa tử System.Web.UI.UserControl, hình bên dưới cho thấy sự thừa kế của hai đối tượng Page (trang .aspx) và User Control (trang .ascx).
Bước 1: Vào Visual Studio
- Right click vào project trong Solution Explorer
- Chọn Add New Item…
- Chọn Web User Control
- Đặt tên là UCFooter.ascx
- Click Add
Thiết kế User Control cũng như thiết kế 1 Web Form có thể có các control khác và HTML tag. Vì ở đây làm trang Footer nên chỉ ghi nhận 1 vài thông tin
HTML Source Footer.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCFooter.ascx.cs" Inherits="UCFooter" %>
<table style="color:Yellow;background-color:Gray">
<tr>
<td align="center"> Copyright ©2015 hiepsiit.com</td>
</tr>
<tr>
<td align="center"> Created by:hiepsiit.com </td>
</tr>
</table>
Bước 2: Cách Sử Dụng User Control
Có 2 cách:
- Kéo và thả UC vào trang aspx. Lúc đó, trang aspx sẽ xuất hiện tag định hướng <%@ Register … %>
- Cấu hình trong tập tin web.config
<system.web>
<pages>
<controls>
<add tagPrefix="tiếp đầu ngữ của tag" tagName="tên tag"
src="<tên tập tin>.ascx"/>
</controls>
</pages>
</system.web>
// Khai báo trong web.config
<controls >
<add tagPrefix="Cuoitrang" tagName="FOOTER"
src="UCFooter.ascx"/>
</controls>
//Sử dụng trên trang aspx:
<Cuoitrang:FOOTER ID="FOOTER1" runat="server" />
Chuyển qua chế độ Design
Tại Solution Explorer chọn User Control UCFooter.ascx kéo thả vào Web Form
Lúc này phía trên cùng của Web Form sẽ tự động xuất hiện dòng lệnh khai báo đăng ký sử dụng User Control
<%@ Register src="UCFooter.ascx" tagname="UCFooter" tagprefix="uc1" %>
và tại vị trí đặt User Control trên Web Form sẽ có dòng lệnh
<uc1:UCFooter ID="UCFooter1" runat="server" />
HTML Source của Web Form
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserControl_Sample.aspx.cs" Inherits="UserControl_Sample" %>
<%@ Register src="UCFooter.ascx" tagname="UCFooter" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>UserControl in ASP.Net | code30s.com</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:UCFooter ID="UCFooter1" runat="server" />
</div>
</form>
</body>
</html>
Load động User Controls
- Khi nào load động UC
- Trong một trang aspx có yêu cầu sử dụng nhiều UC trên cùng một vị trí của trang
- Bài toán thường gặp: Khi chuỗi tham số của đối tượng Request thay đổi
- Các bước thực hiện: trên trang .aspx
- Tạo điều khiển Panel
- Vào sự kiện Page_Load, viết đoạn code sau: