Bài giảng Thiết kế và lập trình Website: Chương 5 - ThS. Dương Thành Phết

Chương 5 của bài giảng Thiết kế và lập trình Website giúp người học có những hiểu biết về các điều khiển trong ASP.Net. Chương này trình bày những nội dung cụ thể như: Tổng quan về các controls, HTML Control, Web Server Controls, Validation Controls, Web User controls, Master Pages, Data Controls. Mời các bạn tham khảo.

KHOA CAO ĐẲNG THỰC HÀNH THIẾT KẾ & LẬP TRÌNH WEBSITE (Chuyên ngành: Đồ Họa Đa Truyền Thông) Chương 5: CÁC ĐIỀU KHIỂN TRONG ASP.NET © Dương Thành Phết www.thayphet.net - phetcm@gmail.com NỘI DUNG Tổng quan controls HTML Control Web Server Controls Validation Controls Web User controls Master Pages Data Controls © Dương Thành Phết www.thayphet.net - phetcm@gmail.com TỔNG QUAN VỀ CÁC CONTROLS © Dương Thành Phết www.thayphet.net - phetcm@gmail.com HTML CONTROL  HTML Control tạo từ tag HTML tĩnh thường sử dụng lập trình phía client Khi sử dụng HTML Control để lập trình phía Server ta gán thuộc tính runat="Server" cho HTML Control gọi HTML Server Control HTML Control Toolbox © Dương Thành Phết www.thayphet.net - phetcm@gmail.com HTML CONTROL Để chuyển HTML Control thành HTML Server Control, ta chọn Run As Server Control từ menu ngữ cảnh gán thuộc tính runat=“Server” cho HTML Control © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB SERVER CONTROL Những lý nên sử dụng Standard Web Control: Đơn giản, tương tự Windows Form Controls Đồng nhất: Có thuộc tính giống  dễ tìm hiểu sử dụng Hiệu quả: Tự động phát sinh tag HTML theo loại Browser © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB SERVER CONTROL Thuộc tính Ý nghĩa (ID) Tên điều khiển Tên điều khiển AccessKey Ký tự để di chuyển nhanh đến điều khiển - phím nóng Attributes Tập hợp thuộc tính điều khiển HTML BackColor Màu điều khiển BorderColor Màu đường viền điều khiển BorderStyle Kiểu đường viền điều khiển BorderWidth Độ rộng đường viền CssClass Hình thức hiển thị điều khiển qua tên CSS Enabled Điều khiển có hiển thị hay khơng Mặc định True Font Font hiển thị cho điều khiển ForeColor Màu chữ hiển thị điều khiển Height Chiều cao điều khiển ToolTip Dòng chữ hiển thị rê chuột vào điều khiển Width Độ rộng điều khiển Bảng liệt kê thuộc tính chung Web control © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB SERVER CONTROL 3.1 Label Được sử dụng để hiển thị trình bày nội dung văn bản, chấp nhận hiển thị nội dung với tag HTML Ví dụ: lblA.Text = "Đây chuỗi văn thường"; lblB.Text ="Cịn chuỗi in đậm"; © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB SERVER CONTROL 3.2 TextBox Được dùng để nhập hiển thị liệu văn Các thuộc tính: Text: Nội dung chứa Textbox TextMode: SingleLine: Hiển thị nhập liệu dòng MultiLine: Hiển thị nhập liệu nhiều dòng Password: Hiển thị dấu * thay cho ký tự Rows: Số dịng hiển thị textbox có nhiều dịng Maxlength: Số ký tự tối đa nhập Wrap: Văn có phép tự động xuống dịng độ rộng textbox khơng đủ © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB SERVER CONTROL 3.3 Image Được dùng để hiển thị hình ảnh lên trang Web Các thuộc tính: ImageURL: Đường dẫn tập tin hình ảnh AlternateText: Chuỗi văn hiển thị thích ImageAlign: Vị trí hiển thị hình nội dung NotSet,Left, Middle,TextTop,Right 10 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.3 ĐIỀU KHIỂN REPEATER Giới thiệu: Như DataList & DataGrid, điều khiển Repeater dùng để hiển thị liệu Tuy nhiên phải tự thiết kế hình thức hiển thị thơng qua tag HTML 136 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.3 ĐIỀU KHIỂN REPEATER HeaderTemplate> Nội dung hiển thị cho tiêu đề Nội dung hiển thị cho mục liệu dòng lẻ Nội dung hiển thị cho mục liệu chẳn Nội dung hiển thị dòng liệu Nội dung hiển thị cho tiêu đề : 137 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.3 ĐIỀU KHIỂN REPEATER Ví dụ: Bước 1: Tạo điều khiển Repeater: rptChudesach vào trang Web Bước 2: Kết nối tạo nguồn liệu cho điều khiển từ Table Chude với cột: MaCD, Tenchude Bước 3: Chuyển trang Web qua dạng code HTM bổ sung tag sau: 138 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com Mã CĐ Tên CĐ 139 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW Giới thiệu: Hai điều khiển cho phép làm việc với trường liệu đơn thời điểm Thực chức xem, thay đổi, thêm hay xoá, di chuyển sang trang hay quay lại trang trước 140 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW  Detailview Hiển thị liệu với DetailView DetailView đưa hiển thị bảng()trong HTML để hiển thị liệu ghi Ví dụ: Trang XemthongtinKH.aspx 141 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW Sử dụng Fields với điều khiển DetailView DetailView hỗ trợ tất Field GridView : BoundField,CheckBoxField,CommandField,ButtonField, HyperLinkField, ImageField, TemplateField 142 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW Xử lý phân trang với điều khiển DetailView Để tạo phân trang định thuộc tính AllowPaging=”true” cho điều khiển DetailView Với thuộc tính định dạng thuộc nhóm: Pagersettings 143 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW Minh họa: Trong ví dụ liên kết liệu với Table Khachhang đưa vào BoundField CheckBoxField, điền liệu vào với thuộc tính DataField thiết đặt tiêu dề (HeaderText) Tạo phân trang trình bày góc bên phải 144 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW  Formview Hiển thị liệu với FormView FormView dùng để hiển thị liệu với điều khiển tùy biến cho liệu ghi Ví dụ: Trang XemthongtinNXB.aspx 145 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW Trình bày liệu sử dụng Edit Template Tạo FormView vào trang liên kết liệu Tại cửa sổ thiết kế chọn Edit Tempalte từ cửa sổ FormView Task 146 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW Thiết kế trình bày với Control điều khiển tương tự thiết kế DataList với điều khiển tùy biến 147 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW Xử lý phân trang với điều khiển FormView Để tạo phân trang định thuộc tính AllowPaging=”true” cho điều khiển Form Với thuộc tính định dạng thuộc nhóm: Pagersettings 148 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW Minh họa: Trong ví dụ liên kết liệu với Table NhaXuatBan đưa vào Label, điền liệu vào với thuộc tính Text cho File tương tứng, thiết đặt tiêu đề(HeaderText) Tạo phân trang trình bày phía trang 149 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com KHOA CAO ĐẲNG THỰC HÀNH Chương 5: CÁC ĐIỀU KHIỂN TRONG ASP.NET THE END 150 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com ... None, Vertical 44 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB SERVER CONTROL Ví dụ: Tạo trang sử dụng Panel Thiết kế: 45 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB... (Menu hướng ngang) 50 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB SERVER CONTROL Bổ sung nội dung vào view tương ứng 51 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com ... End Sub 24 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com WEB SERVER CONTROL Ví dụ: Tạo trang web click nút Đăng ký thị thơng tin chọn 25 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com