phattrienweb

1 Nêu vấn đề Ý tưởng như sau:
Tôi có 3 User Control (UC) là Menu, Welcome, Login và chỉ một trang default.aspx để xây dựng một ứng dụng web đơn giản.
UC Menu sẽ chứa 2 link: Home, Login
UC Welcome : Chứa nội dung chính của trang
UC Login: Chứa form login
Vậy làm thế nào để khi mới vào trang default.aspx chúng ta sẽ có một trang gồm menu và phần home. Khi nhấp vào link login, thì form login sẽ được thay thế cho phần home.

2 Thiết kế
* Có UC Login.ascx đơn giản như sau:

* UC Menu.ascx như sau:
HTML Code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="Menu" ClassName="Menu" %>

     
Home
     
Login
 

Trang default.aspx sẽ được thiết kế như sau:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Src="Menu.ascx" TagName="Menu" TagPrefix="uc1" %>                 
     
Chào mừng bạn đến với User Control trong ASP.NET Tutorial
         
         

     
          
  

Hãy quan tâm đến đoạn code:

Tôi sẽ nói với bạn nó hoạt động như thế nào sau khi ta xem code ở phần Page_Load của trang Default.aspx.cs :

3 Giải thích hoạt động

* Trong Page_Load() của trang default.aspx :
- Khởi tạo một biến kiểu string là module nhằm mục đích lưu giữ tham số module mà người dùng request đến các trang.
- Khai báo một biến kiểu Control là ct;
- Câu lệnh:

module = Request.QueryString["mod"].ToString().Trim();

Nhằm mục đích lấy vào giá trị tham số “mod” được truyền thông qua địa chỉ url. Và vì là demo và mục đích là vận hành việc sử dụng control động nên tôi đã lược bỏ việc bắt và xử lý lỗi.
- Dòng tiếp theo:

HtmlGenericControl gel = new HtmlGenericControl("div");

Khởi tạo một biến gel kiểu là HtmlGenericControl đưa vào tham số “div” nhằm mục đích khi ta add biến này vào trang nó sẽ tương ứng với việc ta khởi tạo một thẻ div trong trang html vậy.
- Lệnh kiểm tra if … else … tiếp theo kiểm tra giá trị của biến module, từ đó sẽ load các UC nào tương ứng với request từ phía client.
- 2 câu lệnh

ct = Page.LoadControl("Login.ascx"); ct = Page.LoadControl("Welcome.ascx");

sẽ có tác dụng load các UC tương ứng lên trang.
- Lệnh
gel.Controls.Add(ct);
có chức năng đưa UC đã được load ở bước trước vào giữa thẻ .
- Và cuối cùng:
Body.Controls.Add(gel);
Đây mới là bước để đưa các công đoạn mà ta đã làm lên trang. Như tôi đã lưu ý ở phía trên, ở đây Body chính là ID của PlaceHolder mà ta đã đặt trong mã Html của trang.
Điều này có ý nghĩa gì?
+ Bất cứ khi nào bạn muốn đặt (muốn UC hiển thị) ở đâu, hãy để vào đó một PlaceHolder, đặt tên (ID) cho nó. Tiếp theo load UC lên và add vào trang. Nó sẽ hiển thị đúng chỗ đó.

4 Hoạt động
* Mở Browser và gõ vào địa chỉ trang để xem :
http://localhost/UserControls/Default.aspx?mod=home
Home.ascx được Load
* Bấm vào Login:
Login.ascx được Load
* Kết luận:
- Khi nhấn vào nút login, phần nội dung welcome đã được thay thế bởi bởi phần login. Nghĩa là các control đã được hiển thị đúng với yêu cầu từ phía client.

5 Nhận xét và Mở rộng
Lợi điểm của phương pháp sử dụng UC so với các trang aspx thông thường:
+ Khả năng reuse cao
+ Giảm tối đa việc viết các trang aspx. Việc liên kết trang sẽ được thay thế bằng việc gọi các module tương ứng.
+ Dễ sửa đổi code
+ Dễ phân quyền cho user, tùy theo quyền mà các US sẽ được nạp vào trang tương ứng.
Mở rộng:
- Bạn có thể dùng phương pháp này để xây dựng một ứng dụng như forum, bán hàng, hoặc lớn hơn là một portal chẳng hạn. Đặc điểm chung của các ứng dụng đó là chúng có rất nhiều module, nhiều chức năng khác nhau, và hiển thị theo quyền truy cập. Nếu viết theo các trang aspx thông thường. Bạn sẽ phải mất nhiều thời gian cho việc kéo thả, thậm chí là copy & paste cho các phần chung như header, footer, hay menu chính.
- Thay vào đó bạn hãy thực hiện phân quyền, load các role tương ứng và các UC cũng lần lượt hiển thị cho các bạn với các chức năng tương ứng. Tất nhiên phương thức xử lý các UC cũng khác đi một chút so với demo. Nhưng ý tưởng chung là vậy.