Bài giảng Lập trình web - Chương 1: Trang master và các điều khiển trong ASP.NET - Chu Thị Hường

LẬP TRÌNH WEB Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT TRANG MASTER VÀ CÁC ĐIỀU KHIỂN TRONG ASP.NET
Xây dựng trang Master.
Giới thiệu
Các phần tử trong trang Master
Tạo trang Master và content Lập trình tương tác với trang Master NỘI DUNG Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 2

Nhóm điều khiển trong ASP.NET:
Giới thiệu
Các điều khiển Web server
Các điều khiển Validation,
Các điều khiển HTML server.
Master Page là gì?
Xét kịch bản thiết kế một ứng dụng web gồm 20 trang.Tất cả các trang đều giống nhau về sự kết hợp màu sắc, MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 3 logos, menu, ...
Giả sử thiết kế của logo thay đổi:
Điều gì xảy ra?
Giải pháp gì?
Master Page là gì?
ASP.NET Master Pages giúp chúng ta tạo một template hoặc một layout thống nhất cho nhiều trang trong một ứng dụng Web. MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 4
Định nghĩa các tính năng chuẩn của một ứng dụng web trong trang Master
Các tính năng này có thể được lặp lại trên tất cả hoặc một nhóm các trang bằng cách kế thừa trang Master này.
Đặc điểm trang Master:
Trang Master có đuôi mở rộng .master và được nhận dạng bằng dẫn xuất @Master. Mỗi trang web được bao gồm hai phần: MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 5
Master Page
Content Pages
Các phần tử trong trang Master: Có 3 loại phần tử trong một trang Master :
Content Placeholders
Non editable regions MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 6
HTML Elements
Các phần tử trong trang Master:
Content Placeholders:
Là vùng có thể thay đổi được trên trang Master và ta có thể tùy biến được cho MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 7 mỗi trang.
Một trang Master có thể có nhiều hơn một Content Placeholders.
Điều khiển ContentPlaceholders cho phép tùy biến nội dung.
Các phần tử trong trang Master:
Vùng không thay đổi (Non editable regions): Là vùng không tùy biến được trên mỗi trang, chứa các phần MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 8 tử chung của các trang trong ứng dụng web.
Các phần tử này có thể là: Logos công ty, menu, copyright,
Các phần tử trong trang Master:
HTML Elements: Trang master chứa các phần tử HTML ở mức top như , , , MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 9 ,... Ngoài ra, các thẻ HTML còn dùng cho thiết kế các phần tử dùng chung.
Tạo trang Master MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 10
Thêm content cho trang Master: MASTER PAGES
Một trang Master phải có ít nhất một ContentPlaceHolder, tuy nhiên cũng có thể Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 11 có nhiều hơn một ContentPlaceHolder, bằng cách:
Cách 1: Sử dụng Design View
Thêm content cho trang Master:
Cách 2: Khai báo cú pháp MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 12
Tạo file content sử dụng trang Master: MASTER PAGES
Cách 1: Dùng cửa sổ Add New Item Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 13
Tạo file content sử dụng trang Master: MASTER PAGES
Cách 2:  Right Click lên trang Master.  Chọn Add Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 14 Content Page.
Tạo file content sử dụng trang Master:
Cách 3: Khai báo cú pháp MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 15
Lập trình tương tác với trang Master: MASTER PAGES Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 16 GiỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER
ASP.NET cung cấp nhiều nhóm điều khiển server khác nhau:
HTML Server controls
Web server controls Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 17
Navigation controls
Validation controls
Data controls
Login controls
User defined controls GIỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER
HTML Server controls
Là các lớp bọc các phần tử HTML chuẩn và có thêm tính năng tương tác phía server.
Chuyển thẻ HTML sang điều khiển HTML bằng cách thêm thuộc tính Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 18 runat="server“. Ví dụ: Tên đăng nhập Họ tên GiỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER
Web server controls (Web controls)
Là các lớp trùng lặp các chức năng của các phần tử HTML cơ bản, nhưng chúng có các tập thuộc tính Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 19 và phương thức có tính nhất quán, ý nghĩa giúp người pháp triển dễ dàng khai báo và truy cập. GiỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER
Web server controls (Web controls)
Web server controls có tất cả các tính năng của các điều khiển HTML server. Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 20 GiỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER
Validation controls
Kiểm tra tính hợp lệ của dữ liệu trên các điều khiển input. Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 21 GiỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER
Navigation controls
Là nhóm điều khiển được thiết kế hiển thị site map.
Cho phép điều hướng từ trang này sang trang khác. Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 22 GiỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER
Login controls
Cung cấp các điều khiển phục vụ cho việc xác thực người dùng. Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 23 GiỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER
Data controls
Là nhóm các điều khiển hỗ trợ truy xuất và hiển thị dữ liệu.
User defined controls
Là nhóm các điều khiển do người dùng định nghĩa, gồm hai loại: Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 24
User Controls
Custom controls ĐIỀU KHIỂN WEB SERVER
Đặc điểm của các điều khiển web server :
Tự động dò tìm trình duyệt
Sử dụng Template: Một số điều khiển Web Server cho phép người dùng định nghĩa thêm layout bằng cách sử dụng Template Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 25
Hỗ trợ các themes, cho phép định nghĩa nhất quán giao diện các điều khiển trên toàn bộ site. ĐIỀU KHIỂN WEB SERVER
Namespace System.Web.UI.WebControls
System.Web.UI.WebControls chứa các lớp cho phép tạo các điều khiển Web Server
Các lớp thuộc không gian miền này như Lable, Textbox, Button, ListBox, Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 26
Class WebControl thuộc không gian miền System.Web.UI.WebControls. Nó đóng vai trò lớp cơ sở cho hầu hết các điều khiển Web Server. ĐIỀU KHIỂN WEB SERVER
Lớp WebControl: Bảng sau là các thuộc tính, phương thức và các sự kiện thông thường được kế thừa cho các điều khiển dẫn xuất từ lớp này. Tên Mô tả AccessKey Property Chỉ định Key cho phép điều hướng nhanh đến Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 27 điều khiển. BackColor Property Chỉ định hoặc truy xuất màu nền của điều khiển Web Server ForeColor Property Chỉ định hoặc truy xuất ForeColor của điều khiển Web Server Height Property Chỉ định hoặc try xuất chiều cao của điều khiển. ĐIỀU KHIỂN WEB SERVER
Lớp WebControl: Tên Mô tả CssClass Chỉ định hoặc truy xuất đến tập CSS style gắn với điều khiển. ID Property Chỉ định hoặc truy xuất nhận dạng duy nhất được Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 28 gán cho điều khiển. Visible Property Chỉ định hoặc truy xuất giá trị Boolean gán cho điều khiển mà điều khiển có được hiển thị hay không. Width Property Chỉ định hoặc truy xuất độ rộng của điều khiển. Focus() method Thiết lập forcus cho điều khiển Load event Xuất hiện khi điều khiển được load trong bộ nhớ. ĐIỀU KHIỂN WEB SERVER
Các lớp Web server controls cơ bản: ASP.NET Tag Tên Class Key Label Text, AssociatedControlID TextBox AutoPostBack, Columns, MaxLength, ReadOnly, Rows, Text, TextMode, Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 29 TextChanged event Button Text, PostBackUrl, Click event Image AlternateText, ImageAlign, ImageUrl ImageButton AlternateText, ImageUrl, PostBackUrl, Click event HyperLink ImageUrl, NavigateUrl, Target, Text LinkButton Text, PostBackURL , Click event ĐIỀU KHIỂN WEB SERVER
Các lớp Web server controls cơ bản: ASP.NET Tag Tên Class Key Panel BackImageUrl, DefaultButton, GroupingText, HorizontalAlign, Scrollbars CheckBox AutoPostBack, Checked, Text, TextAlign, Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 30 CheckedChanged event RadioButton AutoPostBack, Checked, GroupName, Text, TextAlign, CheckedChanged event Table BackImageUrl, CellPadding, CellSpacing, GridLines, Rows (collection) TableCell ColumnSpan, HorizontalAlign, RowSpan, Text, VerticalAlign, TableRow Cells (collection), Horizontal/VerticalAlign ĐIỀU KHIỂN WEB SERVER
Các điều khiển List Control: ASP.NET Tag Tên Class Mô tả DropDownList Là danh sách dạng drop down các đối tượng ListBox Là tập hợp danh sách các đối Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 31 tượng CheckBoxList Các phần tử của nó được hoàn trả như các check boxes. RadioButtonList Các phần tử của nó được hoàn trả như các Radio button. BulletedList Cho danh sách các bullet hoặc number. ĐIỀU KHIỂN WEB SERVER
Các điều khiển List Control: Bảng sau chứa các thuộc tính của lớp ListControl Thuộc tính Mô tả AutoPostBack Nếu true, form tự động tạo posted back khi người dùng thay đổi lựa chọn hiện tại. Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 32 Items Trả về tập hợp các phần tử ListItem SelectedIndex Chỉ định hoặc truy xuất đến Index của phần tử có giá trị index nhỏ nhất trong danh sách các phần tử được chọn. SelectedItem Tả về tham chiếu đến ListItem đầu tiên trong danh sách lựa chọn. ĐIỀU KHIỂN WEB SERVER
Các điều khiển List Control: Bảng sau chứa các thuộc tính của lớp ListControl Thuộc tính Mô tả DataSource Chỉ định đối tượng chứa thông tn muốn hiển thị như DataSet, DataTable, collection... Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 33 DataMember Chỉ định bảng muốn sử dụng trong trường hợp DataSource chứa nhiều hơn một bảng. DataTextField Chỉ định trường muốn hiển thị đối với thuộc tính Text của mỗi Item.. DataValueField Chỉ định trường muốn gán cho thuộc tính Value trên mỗi phần tử Item ĐIỀU KHIỂN WEB SERVER
Ví dụ khai báo và sử dụng <asp:ListBox runat="server" ID="Listbox1" SelectionMode="Multiple" Rows="5"> Option 1 Option 2 Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 34 Option 1 Option 2 //Lập trình truy xuất đến phần tử được chọn. foreach (ListItem li in Listbox1.Items) { if (li.Selected) Response.Write(li.Text + ""); } ĐIỀU KHIỂN ĐiỀU HƯỚNG TRANG VÀ NÂNG CAO
Các điều khiển điều hướng trang:
Menu
TreeView
SiteMapPath. Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 35
Các điều khiển nâng cao:
ImageMap
FileUpload
View
MultiView ĐIỀU KHIỂN ĐIỀU HƯỚNG TRANG
Điều khiển SiteMapData Source: Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 36 ĐIỀU KHIỂN ĐIỀU HƯỚNG TRANG
Điều khiển Menu: Cho phép tạo menu trong hệ thống website. <asp:MenuItem Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 37 Text="Home“ Value="Home"> ĐIỀU KHIỂN ĐIỀU HƯỚNG TRANG
Điều khiển TreeView. Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 38 ĐIỀU KHIỂN ĐiỀU HƯỚNG TRANG
Các điều khiển nâng cao. ASP.NET Tag Key HotSpotMode, HotSpot, ImageURL, AlternateText, Click Event Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 39 AccessKey, PostBackValue, NavigateUrl, Radius, x, y, GetCoordinates method AccessKey, Coordinates, PostBackValue, GetCoordinates method, .. AccessKey, Left, Bottom, Right, Top PostBackValue, GetCoordinates method, ĐIỀU KHIỂN ĐIỀU HƯỚNG TRANG
Các điều khiển nâng cao. ASP.NET Tag Key HasFile, FileName, PostedFile, SaveAs Method Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 40 ActiveViewIndex , Views, SetActiveView Method, ActiveViewChanged Event ĐIỀU KHIỂN ĐIỀU HƯỚNG TRANG
Ví dụ khai báo và sử dụng <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Trang chủ" Value="Trangchu"> Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 41 ĐIỀU KHIỂN VALIDATION
Giới thiệu:
Xác nhận tính hợp lệ (Validation) là tiến trình xác định sự đúng đắn của thực thể được cung cấp.
Dữ liệu trước khi được chấp Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 42 nhận từ phía người dùng cần được kiểm tra tính hợp lệ:  Kiểu,  Giá trị,  Định dạng, ... ĐIỀU KHIỂN VALIDATION
Class BaseValidator: Các lớp điều khiển Validation nằm trong System.Web.UI.WebControls. Lớp BaseValidtor cung cấp như là một lớp cơ sở cho tất cả các điều khiển Validation. Thuộc tính Mô tả ControlToValidate Chỉ định hoặc truy xuất đến ID của điều khiển Web Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 43 Server cần kiểm tra tính hợp lệ. Display Chỉ định hoặc truy xuất đến cách thức hiển thị chuỗi thông báo lỗi trên điều kiển Validation. Có thể nhận các giá trị: None, Static, Dynamic ErrorMessage Chỉ định hoặc truy xuất chuỗi thông báo lỗi trên điều khiển Validtion khi tính hợp lệ không thỏa mãn. IsValid Chỉ định hoặc truy xuất giá trị (true, false) chỉ định xem dữ liệu Input có thỏa điều kiện hợp lệ hay không. ĐIỀU KHIỂN VALIDATION
Các điều khiển: Điều khiển Mô tả RequiredFieldValidator Đảm bảo người dùng nhập dữ liệu trên các điều khiển Input CompareValidator So sách giá trị của một điều khiển Input với một điều khiển Input khác hoặc với một giá trị hằng. Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 44 RangeValidator kiểm tra giá trị người dùng nhập vào có nằm trong phạm vi được chỉ định hay không? RegularExpressionValid ator Kiểm tra tính hợp lệ của giá trị trên điều khiển Input theo một khuôn mẫu của biểu thức. CustomValidator Kiểm tra tính hợp lệ của giá trị nhập trên điều khiển Input có hợp lệ theo một logic đã chỉ định hay không? ValidationSummary Dùng để xem lại các thông báo lỗi xuất hiện trên các điều khiển Validation khác. ĐIỀU KHIỂN VALIDATION
Các điều khiển: Điều khiển Key RequiredFieldValidator InitialValue, SetFocusOnError, Text, ErrorMessage, CompareValidator Operator, ValueToCompare, Text RangeValidator ErrorMessage, IsValid, MaximumValue , MinimumValue, Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 45 Text, Type,... RegularExpressionValid ator ControlToValidate, Display, ErrorMessage , Text , IsValid ValidationExpression CustomValidator ClientValidationFunction, ControlToValidate, ErrorMessage, ValidateEmptyText, ServerValidate Event ValidationSummary DisplayMode, HeaderText, ShowMessageBox , ShowSummary,... ĐIỀU KHIỂN VALIDATION
Thuộc tính Page.Isvalid:
Thuộc tính Page.IsValid dùng để truy xuất đến giá trị chỉ định sự kiểm tra tính hợp lệ của trang?
Thuộc tính này nhận giá trị True khi tất cả các điều khiển Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 46 Validation trên trang đều xác nhận thành công tính hợp lệ.
Dựa trên giá trị trả về của thuộc tính Page.IsValid để quyết định tiếp tục hay không tiến trình Post Back tới Server. ĐIỀU KHIỂN VALIDATION
Ví dụ sử dụng các điều khiển: <asp:RequiredFieldValidator ID="valPass" runat="server" ControlToValidate="txtPass" ErrorMessage="Chưa nhập Password">* Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 47 <asp:RegularExpressionValidator ID="valPassC" runat="server" ControlToValidate="txtPass" ValidationExpression="[a-zA-Z]\w{3,9}">* ĐIỀU KHIỂN HTML SERVER
Giới thiệu:
HTML Server Controls cung cấp để truy xuất vào các thuộc tính và tính chất của các thẻ HTML.
HTML Server Controls trong ASP.NET là tập Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 48 các điều khiển tương ứng các thẻ HTML, chúng được khai báo trên Web page bằng cách thêm thuộc tính runat=“Server”. ĐIỀU KHIỂN HTML SERVER
Không gian miền System.Web.UI.HtmlControls:
Gồm các lớp giúp cho việc tạo các điều khiển HTML Server.
Bao gồm nhiều lớp HtmlInputButton, HtmlImage, HtmlForm, HtmlTable,... Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 49
Dựa trên chức năng có thể được phân lớp thành các nhóm như container controls, Input controls và Image controls ĐIỀU KHIỂN HTML SERVER
Một số điều khiển HTML: Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 50 ĐIỀU KHIỂN HTML SERVER
Ví dụ sử dụng điều khiển HTML:
MarkUp code:
Programming code: HtmlInputText txtTextBox = new HtmlInputText(); Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 51 txtTextBox.ID = "txtFirstName"; txtTextBox.Value = "Chu Thị Hường"; txtTextBox.MaxLength = 10; txtTextBox.Size = 15; form1.Controls.Add(txtTextBox); THẢO LUẬN – CÂU HỎI Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 52
Thực hành các ví dụ
Thực hành sử dụng các điều khiển.
Xây dựng, thiết kế trang Master cho bài tập lớn được phân công BÀI TẬP Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 53