Bài giảng Lập trình Asp.Net - Phần 8: Custom Control - Nguyễn Hà Giang

Nguyễn Hà GiangCustom ControlNguyen Ha Giang1Nội dungUser controlÝ nghĩa & cách sử dụngDemoCustom controlCách tạo & dùng custom controlDemo2Nguyen Ha GiangCustom controlASP.NET có ba loại custom controlUser control cho phép reuse một phần của trang web bằng cách đặt vào trong .ascx fileCustom 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 DLLCác loại custom control đều cung cấp đầy đủ phương thức, thuộc tính và sự kiện3Nguyen Ha GiangUser controlUser control sử dụng mô hình kết hợp (composition model), có thể chứa HTML và server control khác4Nguyen Ha GiangPage2.aspxControl1.ascxPage1.aspxPage3.aspxApplication AApplication BUser controlTương tự như web form, user control được chia làm hai phầnPhầ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 formUser control bắt đầu với Control directive thay vì Page directive của PageUser control sử dụng phần mở rộng ascx thay vì aspxUser control không thể request trực tiếp từ client. 5Nguyen Ha GiangUser controlVí dụ một user control chứa một Label bên trong6Nguyen Ha GiangUser controlControl directive sử dụng cùng các thuộc tính với Page directive cho web page như Language, AutoEventWireup, InheritsCode behind cho user control này tương tự như web form.Sử dụng sự kiện UserControl.Load để add text vào label7Nguyen Ha Giangpublic partial class Footer : UserControl{ protected void Page_Load(Object sender, EventArgs e) { lblFooter.Text = “Time: "; lblFooter.Text += DateTime.Now.ToString(); }}User controlSử dụng User controlInsert vào trong web pageSử dụng tag Register directive để khai báo sử dụng controlKhai báo sử dụng user control 8Nguyen Ha GiangMinh hoa su dung Footer user control User controlMinh họa sử dụng User Control9Nguyen Ha GiangUser controlUser controlUser 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ư controlThuộc tínhPhương thứcSự kiện10Nguyen Ha GiangUser controlpropertiesUser controlTạo thuộc tính & phương thức cho user control11Nguyen Ha Giangpublic 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;}Code behind của user controlUser controlUser 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ộngKhông thể customize lại phần HTML thể hiện với user controlKhô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.12Nguyen Ha GiangUser controlDemo 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ệnTạo project DemoUserControlTạo User control tên NumberTextBox13Nguyen Ha GiangUser controlBước 2: Tạo User control tên NumberTextBoxKích chuột phải lên project chọn Add  New ItemChọn Templates là Web User Control14Nguyen Ha GiangĐặt tên user controlChọn user controlUser controlBước 3: Trong màn hình Design của user controlKéo thả TextBox và một Validation control kiểu CompareValidatorĐặt id của TextBox là txtContentĐặt id của CompareValidator là cvCheckNumberThiết lập thuộc tính cho cvCheckNumberErrorMessage: “Nhập giá trị số!”ControlToValidate: txtContentOperator: DataTypeCheckType: Integer15Nguyen Ha GiangUser control16Nguyen Ha GiangUser controlBướ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ụngKéo user control NumberTextbox vào Default.aspx17Nguyen Ha GiangDefault.aspxKéo thảUser controlVS tự động tạo tag Register và tag sử dụng User control NumberTextbox trong default.aspx18Nguyen Ha GiangUser controlChạy demo trang default.aspx19Nguyen Ha GiangUser control: NumberTextBoxBổ sung thêm Label cho user control: NumberTextBox, Label này cho biết ý nghĩa dữ liệu mà user nhập vàoBổ sung thêm property để lấy giá trị mà user nhập trong TextBox của User controlUser controlBài tậpTạo một user control ContactChứa các text box cho phép nhập các thông tinHọ tênCơ quanChức vụĐiện thoạiEmailVớ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!20Nguyen Ha GiangCustom controlCustom control được tạo giống như class. Tạo và sử dụng custom control theo dạng library classTạo ASP.NET Custom controlBiê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.21Nguyen Ha GiangCustom controlTa 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ệtCho phép thay đổi phần HTML render:Override phương thức renderViế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 HTMLSử 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 22Nguyen Ha GiangCustom control23Nguyen Ha Giangpublic 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); }}Custom controlDemo 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 boxBước 1: Tạo một project có template dạng: ASP.NET Server Control.Đặt tên cho Custom control là: MyServerControl24Nguyen Ha GiangCustom controlBước 2: thay đổi lớp cơ sở mặc định từ WebControl sang TextBox25Nguyen Ha GiangCustom controlBướ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 caption26Nguyen Ha GiangCustom controlBước 4: Override lại phương thức Render của Textbox, bổ sung thêm caption27Nguyen Ha GiangCustom controlBướ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.28Nguyen Ha GiangCustom controlTạ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 ToolBoxKích chuột phải lên toolbox Standard chọn Choose ItemsBrowse đến file DLL của custom controlTừ ToolBox kéo thả custom control vào web pageTrong sự kiện Load của web page, thiết lập lại caption của custom control29Nguyen Ha GiangCustom controlImport custom control vào ToolBox30Nguyen Ha GiangCustom controlCustom control hiển thị trên tool box như một control chuẩn31Nguyen Ha GiangCustom controlKéo thả custom control vào trang webThiết lập thuộc tính Caption của custom control32Nguyen Ha GiangCustom controlBài tậpTạo một custom control cho phép hiển thị thông tin bản quyền theo mẫu sauTrong đó 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ả]33Nguyen Ha Giang©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