Sử dụng User Control động trong trang ASP.NET

**longcheng** · 01-08-2007, 11:44 AM

http://my.opera.com/lovefinder/blog/...-trang-asp-net

1 Nêu vấn đề Ý tưởng như sau:
Tôi có 3 User Control (UC) là Menu, Welcome, Login và chỉ một trang default.aspx để xây dựng một ứng dụng web đơn giản.
UC Menu sẽ 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:

<div>HTML Code:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="Menu" ClassName="Menu" %>
<table style="width:780px; text-align:center; "bbcode_description">HTML Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="Menu.ascx" TagName="Menu" 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>User Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>Chào mừng bạn đến với User Control trong ASP.NET Tutorial

<div><uc1:Menu ID="Menu1" runat="server" /></div>
</div>
<asp:PlaceHolder runat="server" ID="Body"></asp:PlaceHolder>
</form>
</body>
</html>
</div>Hãy quan tâm đến đoạn code:

<div>HTML Code:
<asp:PlaceHolder runat="server" ID="Body"></asp:PlaceHolder>
</div>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 :

Mã:

protected void Page_Load(object sender, EventArgs e)    {        //HttpContext context = new HttpContext();        string module = null;                Control ct;                if (!IsPostBack)        {            module = Request.QueryString["mod"].ToString().Trim();            HtmlGenericControl gel = new HtmlGenericControl("div");            if (module == "Login")            {                                ct = Page.LoadControl("Login.ascx");                         }            else            {                                ct = Page.LoadControl("Welcome.ascx");                           }            gel.Controls.Add(ct);            Body.Controls.Add(gel);                 }    }

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:

<div>HTML Code:
module = Request.QueryString["mod"].ToString().Trim();
</div>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:

<div>HTML Code:
HtmlGenericControl gel = new HtmlGenericControl("div");
</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

<div>HTML Code:
ct = Page.LoadControl("Login.ascx");
ct = Page.LoadControl("Welcome.ascx");
</div>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.

6 Tổng kết
- Thực sự rất động, bạn hãy thử bắt tay vào thực hiện một lần để hiểu hơn nữa hiệu quả và giá trị của nó.

View more random threads:

**diemkhtr** · 01-08-2007, 01:00 PM

Lỗi gì đây mọi người?

**ngocha** · 01-08-2007, 02:58 PM

sao .aspx mà CodeFile lại .ascx.cs

**hoanganit19** · 02-08-2007, 03:33 PM

thanks nampt, bài viết khá hay.

hi ImX.WiR!
User Control có type là ascx

**sieumuanhanh** · 02-08-2007, 03:37 PM

[IMG]images/smilies/biggrin.png[/IMG] [IMG]images/smilies/biggrin.png[/IMG] [IMG]images/smilies/biggrin.png[/IMG]
tất nhiên là mình biết. đang nói cái lỗi của bạn nampt mà [IMG]images/smilies/biggrin.png[/IMG] .
bạn ý tạo file Default.aspx mà CodeFile từ 1 UC

**congdong3** · 26-11-2007, 10:23 AM

sai cái defaut.aspx và cái menu.ascx kìa, sửa lại đúng là ngon lành!

**duchungdhv** · 22-03-2009, 08:39 AM

xin chào bạn nampt tôi đã áp dụng đoạn mã của bạn để gọi các control như sau;
(file main.aspx và các control nhap.ascx, sua.ascx ,dsmonhoc.ascx)
Trong dsmonhoc tôi có 1 control gridview để hiển thị toàn bộ môn học.
trong main.aspx toi dùng PlaceHolder (ID=Plcapnhat)với đoạn mã lệnh viết trong main.aspx.cs như sau:

protected void Page_Load(object sender, EventArgs e)
{
this.Plcapnhat.Controls.Clear();

if (!IsPostBack)
{

module = Request.QueryString["sdh"].ToString().Trim();
if (module == "sdhsua")
{
ct = Page.LoadControl("~/Control/Sua.ascx");
}
if (module == "sdhnhap")
{
ct = Page.LoadControl("~/Control/Nhap.ascx");
}
if (module=="ds" )
{
ct = Page.LoadControl("~/Control/dsMonHoc.ascx");

}

this.Plcapnhat.Controls.Add(ct);
}

}
trong gridview của dsmonhoc tôi phân trang và có các cột edit và update,delete .
Khi click vào các trang 2,3.. của gridview và delete thì thông tin trên dsmonhoc.ascx không thấy hiển thị và khi vào lại thấy chưa xóa được.Tôi mới học nên chưa biết lỗi ở đâu xin bạn sửa giúp để hiển thị được thông tin ở các trang sau và xóa được dữ liệu

**mituot** · 22-07-2010, 05:48 PM

không biết có còn ai chú ý topic này nữa không nhưng không thấy ai giải đáp, hôm nay đúng lúc đụng đến vấn đề này mò mãi cũng xong .

khi sử dụng usercontrol động thì khó bind lại các dữ liệu vì nó chỉ load usercontrol mà ko load page vì vậy ở trong page_load của usercontrol bạn thêm vào EnableViewState = false;

**ichiase24h** · 26-01-2011, 08:36 AM

Bỏ dòng !IsPostBack

Mã:

if (!IsPostBack)
{
 
}
Control ctrl = Page.LoadControl("UserControl.ascx");
placeHolderMain.Controls.Add(ctrl);

Nếu có dòng đó thì khi click các server control như LinkButton, Button gì đó thì UserControl kia sẽ biến mất(không được load)

**thaychuathd** · 18-04-2011, 11:28 AM

Mình có 2 trang index.aspx vào Test.ascx
Trong Test.ascx mình có hàm

40px
thì sao khi load Test.ascx này vào trang index.aspx .Trong trang index.aspx mình muốn gọi hàm Ten được gán giá trị cho "ten" thì phải làm sao ?