1 Custom Control

Nội dung
2

 User control
 Ý nghĩa & cách sử dụng
 Demo
 Custom control
 Cách tạo & dùng custom control
 Demo
 Custom control
3

 ASP.NET có ba loại custom control

 User control cho phép reuse một phần của trang web bằng
cách đặt vào trong .ascx file
 Custom server control cho phép thiết kế một control mới
bằng cách cải tiến control đã có hoặc xây dựng control mới
 Composite control: kết hợp các control lại với nhau và
biên dịch ra file DLL
 Các loại custom control đều cung cấp đầy đủ phương
thức, thuộc tính và sự kiện
 User control
4

 User control sử dụng mô hình kết hợp (composition

model), có thể chứa HTML và server control khác

Control1.ascx Application A Application B

Page3.aspx

Page2.aspx

Page1.aspx
 User control
5

 Tương tự như web form, user control được chia làm hai
phần
 Phần HTML với các control tag (.ascx file)
 Code behind file với phần xử lý (.cs)
 User control có cùng sự kiện như một đối tượng Page
(như Load và PreRender)
 Sự khác nhau giữa user control và web form
 User control bắt đầu với Control directive thay vì Page
directive của Page
 User control sử dụng phần mở rộng ascx thay vì aspx
 User control không thể request trực tiếp từ client.
 User control
6

 Ví dụ một user control chứa một Label bên trong

<%@ Control Language="C#" AutoEventWireup="true"

CodeFile="Footer.ascx.cs" Inherits="Footer" %>

<asp:Label id="lblFooter" runat="server" />

 User control
7

 Control directive sử dụng cùng các thuộc tính với Page

directive cho web page như
 Language, AutoEventWireup, Inherits
 Code behind cho user control này tương tự như web form.
 Sử dụng sự kiện UserControl.Load để add text vào label

public partial class Footer : UserControl

{
protected void Page_Load(Object sender, EventArgs e)
{
lblFooter.Text = “Time: ";
lblFooter.Text += DateTime.Now.ToString();
}
}
 User control
8

 Sử dụng User control

 Insert vào trong web page
 Sử dụng Register directive để khai báo sử dụng control

<%@ Register TagPrefix=“HaG" TagName="Footer"

Src="Footer.ascx" %>

 Khai báo sử dụng user control

<h1>Minh hoa su dung Footer user control</h1><hr />

<br /><br />
<HaG:Footer id="Footer1" runat="server" />
 User control
9

 Minh họa sử dụng User Control

User control
 User control
10

 User control bao bọc các thành phần bên trong.

 Do đó page không thể truy cập các control trong user
control.
 Tuy nhiên user control có tính chất tương tự như control
 Thuộc tính
 Phương thức
 Sự kiện
 User control
11

 Tạo thuộc tính & phương thức cho user control

public string Content
{
get // lấy nội dung (label) của user control
{
return Label1.Text;
Code behind của user control
}
set // thiết lập nội dung cho user control
{
Label1.Text = value;
}
}
public void SetContent(string str)
{
// thiết lập nội dung cho label
Label1.Text = str;
}
 User control
12

 User control là giải pháp thuận tiện khi muốn kết hợp
nhiều web control vào chung một khối thống nhất!
 Sử dụng user control kết hợp text box và validation control.
 Hạn chế của User control khi muốn bổ sung hoặc mở
rộng
 Không thể customize lại phần HTML thể hiện với user
control
 Không thể chia xẻ user control với những ứng dụng khác.
 Đa số người lập trình chọn cách tạo custom web control
với đầy đủ tính năng hơn.
 User control
13

 Demo tạo user control có text box yêu cầu phải nhập giá
trị số
 Các bước thực hiện
 Tạo project DemoUserControl
 Tạo User control tên NumberTextBox
 User control
14

 Bước 2: Tạo User control tên NumberTextBox

 Kích chuột phải lên project chọn Add => New Item…
 Chọn Templates là Web User Control
Chọn user control

Đặt tên user control

 User control
15

 Bước 3: Trong màn hình Design của user control

 Kéo thả TextBox và một Validation control kiểu
CompareValidator
 Đặt id của TextBox là txtContent
 Đặt id của CompareValidator là cvCheckNumber
 Thiết lập thuộc tính cho cvCheckNumber
 ErrorMessage: “Nhập giá trị số!”
 ControlToValidate: txtContent
 Operator: DataTypeCheck
 Type: Integer
 User control
16
 User control
17

 Bước 4: sử dụng user control trong web page

 Để sử dụng user control trong web page, ta có thể kéo thả
user control vào trang web cần sử dụng
 Kéo user control NumberTextbox vào Default.aspx

Kéo thả

Default.aspx
 User control
18

 VS tự động tạo tag Register và tag sử dụng User control

NumberTextbox trong default.aspx
 User control
19

 Chạy demo trang default.aspx

User control: NumberTextBox

Bổ sung thêm Label cho user control: NumberTextBox, Label này cho biết ý
nghĩa dữ liệu mà user nhập vào
Bổ sung thêm property để lấy giá trị mà user nhập trong TextBox của User
control
 User control
20

 Bài tập
 Tạo một user control Contact
 Chứa các text box cho phép nhập các thông tin
 Họ tên
 Cơ quan
 Chức vụ
 Điện thoại
 Email
 …
 Với mỗi thông tin trên phải tạo các property tương ứng, để bên
ngoài (web page chứa user control) có thể lấy các giá trị này!
 Custom control
21

 Custom control được tạo giống như class.

 Tạo và sử dụng custom control theo dạng library class
 Tạo ASP.NET Custom control
 Biên dịch thành DLL
 Import trong ứng dụng web (kéo thả, code) và sử dụng
custom control như lớp thư viện bình thường
 Cho phép reuse trong nhiều web app khác nhau.
 Custom control
22

 Ta có thể tạo custom control từ lớp control có sẵn, và bổ

sung thêm nhiều chức năng.
 Ví dụ: tạo một Text box với định dạng đặc biệt
 Cho phép thay đổi phần HTML render:
 Override phương thức render
 Viết phần bổ sung HTML thông qua đối tượng
HtmlTextWriter đi kèm với phương thức Render để output
trực tiếp HTML
 Sử dụng từ khóa base để gọi phương thức của lớp cơ sở
 Đảm bào việc bổ sung sẽ không thay thế code mặc định
 Custom control
23

public class TitledTextBox : TextBox {

private string caption;
public string Caption
get { return caption; }
set { caption= value; }
}
protected override void Render(HtmlTextWriter writer) {
// tạo bổ sung tag HTML với caption
writer.Write("<h1>" + caption + "</h1>");
// gọi Render của lớp cơ sở, nội dung của textbox sẽ xuất ra
base.Render(writer);
}
}
 Custom control
24

 Demo cách tạo custom control dạng thư viện và sử dụng

trong ứng dụng khác.
 Phần demo này tạo một custom control dạng TextBox, có
bổ sung một caption cho text box
 Bước 1: Tạo một project có template dạng: ASP.NET
Server Control.
 Đặt tên cho Custom control là: MyServerControl
 Custom control
25

 Bước 2: thay đổi lớp cơ sở mặc định từ WebControl sang

TextBox
 Custom control
26

 Bước 3:
 Tạo biến thành viên kiểu chuỗi chứa caption của textbox.
 Tạo property cho chuỗi caption
 Custom control
27

 Bước 4: Override lại phương thức Render của Textbox,

bổ sung thêm caption
 Custom control
28

 Bước 5: Build project, kết quả là file DLL

 Đây là dạng file thư viện liên kết động, ta có thể import
vào web page để sử dụng.
 Custom control
29

 Tạo project demo sử dụng custom control

 Để import custom control vào project ta có thể làm như
sau:
 Import custom control vào ToolBox
 Kích chuột phải lên toolbox Standard chọn Choose Items…
 Browse đến file DLL của custom control
 Từ ToolBox kéo thả custom control vào web page
 Trong sự kiện Load của web page, thiết lập lại caption của
custom control
 Custom control
30

 Import custom control vào ToolBox

 Custom control
31

 Custom control hiển thị trên tool box như một control
chuẩn
 Custom control
32

 Kéo thả custom control vào trang web

 Thiết lập thuộc tính Caption của custom control
 Custom control
33

 Bài tập
 Tạo một custom control cho phép hiển thị thông tin bản
quyền theo mẫu sau

©Copyright [từ năm – đến năm] [tác giả]. All rights reserved
®[tác giả] giữ bản quyền nội dung trên website này

 Trong đó có 3 thuộc tính cho phép bổ sung từ bên ngoài của

custom control
 [từ năm], [đến năm] và [tác giả]