Bài giảng Custom Control - Nguyễn Hà Giang

Nội dung text: Bài giảng Custom Control - Nguyễn Hà Giang

1. 1 Custom Control Nguyễn Hà Giang Nguyen Ha Giang
2. 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 Nguyen Ha Giang
3. 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 Nguyen Ha Giang
4. 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 Nguyen Ha Giang
5. 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. Nguyen Ha Giang
6. User control 6  Ví dụ một user control chứa một Label bên trong Nguyen Ha Giang
7. 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(); } } Nguyen Ha Giang
8. User control 8  Sử dụng User control  Insert vào trong web page  Sử dụng tag Register directive để khai báo sử dụng control  Khai báo sử dụng user control Minh hoa su dung Footer user control Nguyen Ha Giang
9. User control 9  Minh họa sử dụng User Control User control Nguyen Ha Giang
10. 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 properties Nguyen Ha Giang
11. 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; } Nguyen Ha Giang
12. 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 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 với đầy đủ tính năng hơn. Nguyen Ha Giang
13. 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 Nguyen Ha Giang
14. 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 Nguyen Ha Giang
15. 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 Nguyen Ha Giang
16. User control 16 Nguyen Ha Giang
17. 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 Nguyen Ha Giang
18. User control 18  VS tự động tạo tag Register và tag sử dụng User control NumberTextbox trong default.aspx Nguyen Ha Giang
19. 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 Nguyen Ha Giang
20. 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 (là web page chứa user control) có thể lấy các giá trị này! Nguyen Ha Giang
21. 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. Nguyen Ha Giang
22. 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 modify 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 Nguyen Ha Giang
23. 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(" " + 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
24. 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 Nguyen Ha Giang
25. Custom control 25  Bước 2: thay đổi lớp cơ sở mặc định từ WebControl sang TextBox Nguyen Ha Giang
26. 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 Nguyen Ha Giang
27. Custom control 27  Bước 4: Override lại phương thức Render của Textbox, bổ sung thêm caption Nguyen Ha Giang
28. 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. Nguyen Ha Giang
29. 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 Nguyen Ha Giang
30. Custom control 30  Import custom control vào ToolBox Nguyen Ha Giang
31. Custom control 31  Custom control hiển thị trên tool box như một control chuẩn Nguyen Ha Giang
32. 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 Nguyen Ha Giang
33. 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ả] Nguyen Ha Giang