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

Chia sẻ: Nhân Chi Sơ | Ngày: | Loại File: PPTX | Số trang:33

Thêm vào BST

Báo xấu

85
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Trong bài giảng này cung cấp cho người học những kiến thức về User control và Custom control. Nội dung chính trong bài gồm có: Ý nghĩa & cách sử dụng User control, Demo, cách tạo & dùng custom control, demo. Mời các bạn cùng tham khảo để biết thêm các nội dung chi tiết.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

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

1 Custom Control  Nguyễn Hà Giang Nguyen Ha Giang
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
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
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.as Application A Application B cx Page3.as px Page2.aspx Page1.aspx Nguyen Ha Giang
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 Nguyen Ha Giang
User control 6  Ví dụ một user control chứa một Label bên trong Nguyen Ha Giang
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
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
User control 9  Minh họa sử dụng User Control User control Nguyen Ha Giang
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 User control  Sự kiện properties Nguyen Ha Giang
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 { Code behind 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; } Nguyen Ha Giang
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 Nguyen ọ Giang ạo custom web control n cách t Ha
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
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
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
User control 16 Nguyen Ha Giang
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
User control 18  VS tự động tạo tag Register và tag sử dụng User control NumberTextbox trong default.aspx Nguyen Ha Giang
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
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 Nguyen Haải t ạo các property tương ứng, Giang