Custom Control

 Nguy n Hà Giang

Nguyen Ha Giang

ễ

ộ

N i dung

 User control

ử ụ

 Ý nghĩa & cách s d ng

 Demo

 Custom control

ạ

 Cách t o & dùng custom control

 Demo

Nguyen Ha Giang

Custom control

 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

ớ

t k m t control m i

ế ế ộ  Custom server control cho phép thi ự ặ

ả ế

ằ b ng cách c i ti n control đã có ho c xây d ng control m i ớ

ế ợ

ạ ớ

i v i nhau và

 Composite control: k t h p các control l

ị

biên d ch ra file DLL

ạ ầ ủ ươ ấ ng

Nguyen Ha Giang

ứ ộ ề  Các lo i custom control đ u cung c p đ y đ ph ự ệ th c, thu c tính và s ki n

User control

ế ợ

 User control s d ng mô hình k t h p (composition model), có th ch a HTML và server control khác

ử ụ ể ứ

Application A

Application B

Control1.as cx

Page3.as px

Page2.aspx

Page1.aspx

Nguyen Ha Giang

User control

 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 Nguyen Ha Giang

ự ế ừ

ể

 User control không th request tr c ti p t

client.

User control

 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" %>

Nguyen Ha Giang

User control

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

ử ụ ộ ớ

 Language, AutoEventWireup, Inherits

directive cho web page nh ư

 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(); } }

Nguyen Ha Giang

User control

 S d ng User control

 Insert vào trong web page

ử ụ

ể

 S d ng tag 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

Minh hoa su dung Footer user control

Nguyen Ha Giang

User control

 Minh h a s d ng User Control

User control

Nguyen Ha Giang

ọ ử ụ

User control

 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

User control

ự ệ  S ki n

properties

Nguyen Ha Giang

User control

ủ Code behind c a user control

Nguyen Ha Giang

ạ ứ ươ ng th c cho user control

ộ  T o thu c tính & ph public string Content { get // lấy nội dung (label) của user control { return Label1.Text; } 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

 User control là gi

ậ

ề ế ợ ố k t h p ấ ố ố ệ i pháp thu n ti n khi mu n ộ vào chung m t kh i th ng nh t! ả nhi u web control

ế ợ  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 s 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

Nguyen Ha Giang ọ v i đ y đ tính năng h n.

ớ ầ ủ ơ

User control

 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

Nguyen Ha Giang

User control

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

ướ ạ

(cid:0)

ả

ọ

ộ

 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

Nguyen Ha Giang

User control

 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

Nguyen Ha Giang

User control

Nguyen Ha Giang

User control

 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

Nguyen Ha Giang

User control

 VS t

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

Nguyen Ha Giang

NumberTextbox trong default.aspx

User control

 Ch y demo trang default.aspx

User control: NumberTextBox

ổ

ế

t ý

ữ ệ

ậ ể ấ

ủ

ậ

ị

B sung thêm Label cho user control: NumberTextBox, Label này cho bi 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

Nguyen Ha Giang

ạ

User control

 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

 …

Nguyen Ha Giang

ỗ

 V i m i thông tin trên ph i t o các property t

ả ạ ớ ươ ứ ng ng, ể ấ ứ ể đ bên ngoài (là web page ch a user control) có th l y

ị

các giá tr này!

Custom control

 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.

Nguyen Ha Giang

Custom control

 Ta có th t o custom control t

ể ạ ừ ớ control có s nẵ , và l p

ứ ề ổ 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

ớ

thông qua đ i ươ

ứ

ố ng ể ng th c Render đ

t ph n modify HTML HtmlTextWriter đi kèm v i ph ự ế 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

ẽ Nguyen Ha Giang

Custom control

ạ

ổ

ớ

ủ ớ ơ ở ộ

ẽ

ấ

ọ

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("

" + caption + "

"); ủ // g i Render c a l p c s , n i dung c a textbox s xu t ra base.Render(writer); } }

Nguyen Ha Giang

Custom control

ư ệ ạ ử  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

Nguyen Ha Giang

Custom control

 B c 2: thay đ i l p c s m c đ nh t

ổ ớ ơ ở ặ ị ướ ừ WebControl

Nguyen Ha Giang

sang TextBox

Custom control

ướ  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

Nguyen Ha Giang

Custom control

 B c 4: Override l

ươ ủ ứ i ph ng th c Render c a Textbox,

Nguyen Ha Giang

ướ ổ ạ b sung thêm caption

Custom control

 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

ế ộ ể ạ

Nguyen Ha Giang

ư ệ ể ử ụ vào web page đ s d ng.

Custom control

 T o project demo s d ng custom control

ử ụ ạ

ể ư  Đ import custom control vào project ta có th làm nh

 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

ể sau:

ừ

ả

 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

Nguyen Ha Giang

Custom control

 Import custom control vào ToolBox

Nguyen Ha Giang

Custom control

 Custom control hi n th trên tool box nh m t control

ư ộ ể ị

Nguyen Ha Giang

chu nẩ

Custom control

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

ả

 Thi

Nguyen Ha Giang

ế ậ ủ ộ t l p thu c tính Caption c a custom control

Custom control

 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

– đ n năm

ế ề

ộ

ừ năm ữ ả 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 ]

Nguyen Ha Giang

Bài giảng Lập trình WebForm: Custom control - ThS. Nguyễn Hà Giang

Chủ đề:

Lập trình web

Custom Control

ộ

N i dung

ử ụ

ạ

Custom control

ầ ủ

ộ

ặ ằ b ng cách đ t vào trong

.ascx file

ớ

t k m t control m i

ế ế ộ  Custom server control cho phép thi ự ặ

ả ế

ằ b ng cách c i ti n control đã có ho c xây d ng control m i ớ

ế ợ

ạ ớ

i v i nhau và

ị

biên d ch ra file DLL

User control

Application A

Application B

Control1.as cx

Page3.as px

Page2.aspx

Page1.aspx

User control

ầ

ớ

ầ ử

ớ

ắ ầ

ớ

ủ

directive c a Page

ử ụ

ở ộ ầ  User control s d ng ph n m r ng ascx thay vì aspx Nguyen Ha Giang

ự ế ừ

ể

client.

User control

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

User control

ử ụ

ự ệ

ể  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

ử ụ

ể

ử ụ control <%@ Register TagPrefix=“HaG" TagName="Footer" Src="Footer.ascx" %>

ử ụ

Minh hoa su dung Footer user control

User control

User control

ể

ậ

control.

ộ  Thu c tính

ươ

ứ ng th c

ự ệ  S ki n

User control

User control

ế ợ  S d ng user control k t h p text box và validation

ử ụ control.

User control

ạ

ạ

User control

ả

ọ

ộ

New Item…

ọ

User control

ể