›
›

Bài giảng Thiết kế và lập trình Website - Chương 5: Các điều khiển trong ASP.Net - Dương Thành Phết

pdf 150 trang ngocly 330
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và lập trình Website - Chương 5: Các điều khiển trong ASP.Net - Dương Thành Phết", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_va_lap_trinh_website_chuong_5_cac_dieu_kh.pdf

Nội dung text: Bài giảng Thiết kế và lập trình Website - Chương 5: Các điều khiển trong ASP.Net - Dương Thành Phết

  1. 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 1 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  2. NỘI DUNG 1. Tổng quan về các controls 2. HTML Control 3. Web Server Controls 4. Validation Controls 5. Web User controls 6. Master Pages 7. Data Controls 2 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  3. 1. TỔNG QUAN VỀ CÁC CONTROLS 3 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  4. 2. HTML CONTROL  HTML Control được tạo ra từ các tag HTML tĩnh thường được 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 đó được gọi là HTML Server Control. 4 HTML Control trên Toolbox © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  5. 2. HTML CONTROL Để chuyển các HTML Control thành các HTML Server Control, ta chọn Run As Server Control từ menu ngữ cảnh hoặc gán thuộc tính runat=“Server” cho HTML Control 5 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  6. 3. WEB SERVER CONTROL Những lý do nên sử dụng Standard Web Control: Đơn giản, tương tự như Windows Form Controls. Đồng nhất: Có các thuộc tính giống nhau dễ tìm hiểu và sử dụng. Hiệu quả: Tự động phát sinh ra các tag HTML theo từng loại Browser 6 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  7. 3. WEB SERVER CONTROL Thuộc tính Ý nghĩa (ID) Tên của điều khiển. Tên của điều khiển là duy nhất. AccessKey Ký tự để di chuyển nhanh đến điều khiển - phím nóng. Attributes Tập hợp các thuộc tính của điều khiển HTML BackColor Màu nền của điều khiển. BorderColor Màu đường viền của điều khiển. BorderStyle Kiểu đường viền của điều khiển. BorderWidth Độ rộng của đường viền. CssClass Hình thức hiển thị của điều khiển qua tên CSS. Enabled Điều khiển có được hiển thị hay không. Mặc định là True. Font Font hiển thị cho điều khiển ForeColor Màu chữ hiển thị trên điều khiển Height Chiều cao của điều khiển ToolTip Dòng chữ sẽ hiển thị khi rê chuột vào điều khiển. Width Độ rộng của điều khiển. 7 Bảng liệt kê các thuộc tính chung của các Web control © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  8. 3. WEB SERVER CONTROL 3.1. Label Được sử dụng để hiển thị và trình bày nội dung văn bản, chấp nhận hiển thị nội dung với các tag HTML. Ví dụ: lblA.Text = "Đây là chuỗi văn bản thường"; lblB.Text =" Còn đây là chuỗi được in đậm "; 8 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  9. 3. WEB SERVER CONTROL 3.2 TextBox Được dùng để nhập và hiển thị dữ liệu văn bản. Các thuộc tính: Text: Nội dung chứa trong Textbox TextMode: SingleLine: Hiển thị và nhập liệu 1 dòng MultiLine: Hiển thị và nhập liệu nhiều dòng Password: Hiển thị dấu * thay cho các ký tự. Rows: Số dòng hiển thị nếu textbox có nhiều dòng. Maxlength: Số ký tự tối đa được nhập Wrap: Văn bản có được phép tự động xuống dòng khi độ rộng của textbox không đủ. 9 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  10. 3. 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 bản sẽ hiển thị chú thích. ImageAlign: Vị trí hiển thị giữa hình và nội dung. NotSet,Left, Middle,TextTop,Right 10 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  11. 3. WEB SERVER CONTROL 3.4. Button, ImageButton, LinkButton Mặc định là các nút Submit Button, khi được nhấn vào sẽ PostBack về Server. Các thuộc tính: - Text: Chuỗi văn bản hiển thị trên điều khiển. - CommandName: Tên lệnh được sử dụng trong sự kiện Command. - Ngoài những thuộc tính trên, điều khiển ImageButton còn có các thuộc tính ImageURL, ImageAlign và AlternateText như điều khiển Image. 11 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  12. 3. WEB SERVER CONTROL Ví dụ: Tạo trang web với các điều khiển: Label, Textbox, Button thực hiện chức năng tính toán như sau: Xử lý sự kiện: protected void btTinhtien_Click(object sender, EventArgs e) { int soluong=int.Parse(txtSoluong.Text ); int dongia=int.Parse(txtDongia.Text ); int Thanhtien=soluong * dongia; txtThanhtien.Text = Thanhtien.ToString(); } 12 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  13. 3. WEB SERVER CONTROL 3.5. HyperLink Được sử dụng để tạo ra các liên kết siêu văn bản. Các thuộc tính: ImageURL: Tập tin ảnh hiển thị trên điều khiển. Text: Nhãn văn bản hiển thị trên điều khiển. NavigateUrl: Đường dẫn cần liên kết đến. Target: Xác định cửa sổ sẽ hiển thị cho mối liên kết _blank: Hiển thị trang liên kết ở cửa sổ mới. _self: Hiển thị trang liên kết tại cửa sổ chứa liên kết _parent: Hiển thị trang liên kết ở frame cha. 13 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  14. 3. WEB SERVER CONTROL Ví dụ: Tạo trang web gồm 3 điều khiển Hyperlink 14 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  15. 3. WEB SERVER CONTROL 3.6. Listbox và DropdownList Là điều khiển hiển thị danh sách lựa chọn, có thể chọn một hoặc nhiều. Các thuộc tính: + AutoPostBack: Có tự động PostBack về Server khi chỉ số của mục chọn bị thay đổi. Mặc định False + Items: Tập chứa các mục chọn của điều khiển. thêm vào mục chọn qua thuộc tính ListItem Collection Editor. + Rows: Chiều cao của ListBox theo số dòng. + SelectionMode: Cách chọn các mục trong ListBox. Single: Chỉ chọn một mục có trong danh sách. Multiple: Cho phép chọn nhiều mục. 15 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  16. 3. WEB SERVER CONTROL Tập hợp Items Add: Thêm mục mới vào cuối danh sách Items.Add( ); Insert: Thêm mục mới vào danh sách tại một vị trí Items.Insert( , ); Count: Trả về số mục (Item) có trong danh sách. Items.Count; Remove: Xóa đối tượng Item tại ra khỏi danh sách. Items.Remove( ); RemoveAt: Xóa item tại vị trí index khỏi danh sách. Items.RemoveAt( ); Clear: Xóa tất cả Item có trong danh sách. Items.Clear(); 16 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  17. 3. WEB SERVER CONTROL Xử lý mục chọn Thuộc tính Selected của đối tượng Items[i] để kiểm tra xem mục thứ i đó có được chọn hay không. SelectedIndex: Cho biết chỉ số của mục được chọn. Trong trường hợp chọn nhiều mục SelectedIndex sẽ trả về chỉ số mục chọn đầu tiên. SelectedItem: Cho biết mục được chọn. Trong trường hợp chọn nhiều mục, SelectedItem sẽ trả về mục chọn đầu tiên. SelectedValue: Cho biết giá trị của mục được chọn. Trong trường hợp chọn nhiều mục, SelectedValue sẽ trả về giá trị mục chọn đầu tiên. 17 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  18. 3. WEB SERVER CONTROL Ví dụ: Tạo trang Web gồm 1 listbox, 2 label , 1 Button khi click nút chọn sẽ hiện tên các địa danh được chọn. 18 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  19. 3. WEB SERVER CONTROL Xử lý sự kiện: protected void Page_Load(. . . ) { if (!IsPostBack) { lstDiadanh.Items.Add("Vịnh Hạ Long"); lstDiadanh.Items.Add("Phan Thiết - Mũi Né"); lstDiadanh.Items.Add("Nha Trang"); . int n = lstDiadanh.Items.Count; lbSoDD.Text = n.ToString(); } } protected void btChon_Click(. . .) { lbDiadanh.Text = ""; for (int i = 0; i " + lstDiadanh.Items[i].Value; } 19 } © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  20. 3. WEB SERVER CONTROL 3.7. Checkbox, RadioButton Các thuộc tính Checked: Trạng thái của mục chọn (chọn hay không) TextAlign: Vị trí của điều khiển so với chuỗi văn bản. AutoPostBack: Có được tự động PostBack về Server khi các mục chọn bị thay đổi, mặc định là False. GroupName (RadioButton): Tên nhóm, thuộc tính này được sử dụng để nhóm các điều khiển RadioButton lại thành 1 nhóm. 20 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  21. 3. WEB SERVER CONTROL Ví dụ: Tạo trang web gồm Nhóm các RadioButton Giới tính, Thu nhập, Nhóm Checkbox Ngoại ngữ 21 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  22. 3. WEB SERVER CONTROL 3.8. CheckBoxList, RadioButtonList . Dùng để tạo ra một nhóm các CheckBox/Radio Button, Là điều khiển danh sách nên có thuộc tính Items chứa tập hợp các mục chọn như ListBox/DropDownList. . Các thao tác trên tập hợp Items, xử lý mục chọn cũng tương tự như ListBox/DropDownList. Tạo mới: Kéo thả RadioButtonList (Hoặc CheckbocList) vào Form Chọn Edit Items 22 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  23. 3. WEB SERVER CONTROL Các thuộc tính RepeatColumns: Số cột hiển thị. RepeatDirection: Hình thức hiển thị Vertical: Theo chiều dọc Horizontal: Theo chiều ngang AutoPostBack: Có được phép tự động PostBack về Server khi các mục chọn của điều khiển bị thay đổi. Mặc định là False. 23 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  24. 3. WEB SERVER CONTROL Ví dụ: Tạo trang web gồm Nhóm RadioButton Thu nhập Xử lý sự kiện: Private Sub rblThu_nhap_SelectedIndexChanged( ) lblThu_nhap.Text = "Bạn chọn thu nhập: " + rblThu_nhap.SelectedItem.Text; End Sub 24 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  25. 3. WEB SERVER CONTROL Ví dụ: Tạo trang web khi click nút Đăng ký thì hiện thị các thông tin được chọn. 25 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  26. 3. WEB SERVER CONTROL 3.9. Điều khiển Literal Tương tự như điều khiển Label, Literal được sử dụng để hiển thị chuỗi văn bản trên trang Web. Điểm khác biệt là khi thi hành, Literal không tạo thêm tag Html, còn Label sẽ tạo ra tag span (được sử dụng để lập trình ở phía client). 26 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  27. Ví dụ: Khi thiết kế. Lệnh xử lý: protected void Page_Load(object sender, EventArgs e) { Label1.Text=" Đây là chuỗi ký tự trong label "; Literal1.Text = " Đây là chuỗi ký tự trong Literial "; } Xem source: Đây là chuỗi ký tự trong label Đây là chuỗi ký tự trong Literial 27 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  28. 3. WEB SERVER CONTROL 3.10. Điều khiển AdRotator Được dùng để tạo ra các ảnh quảng cáo (tại 1 vùng sẽ có nhiều ảnh, xuất hiện theo tuần xuất), nó tự động thay đổi các hình ảnh mỗi khi có yêu cầu (PostBack về server). 28 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  29. 3. WEB SERVER CONTROL Thuộc tính AdvertisementFile: Tên tập tin dữ liệu (dưới dạng xml) cho điều khiển. Cú pháp của tập tin Advertisement (*.xml) Đường dẫn tập tin hình ảnh Đường dẫn liên kết Chuỗi văn bản Tooltip Từ khóa dùng để lọc hình ảnh Tần suất hiển thị của ảnh Lưu ý: Các giá trị có phân biệt chữ Hoa chữ thường 29 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  30. 3. WEB SERVER CONTROL Sự kiện AdCreated: Xảy ra khi điều khiển tạo ra các quảng cáo 30 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  31. 3. WEB SERVER CONTROL Ví dụ: Tạo mẫu Quangcao sử dụng điều khiển AdRotator Bước 1. Thiết kế giao diện Bước 2. Tạo tập tin dữ liệu: Quangcao.xml Sử dụng chức năng Add New Item từ thực đơn ngữ cảnh Chọn XML File trong hộp thoại Add New Item 31 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  32. 3. WEB SERVER CONTROL Nhập vào nội dung cho tập tin Quangcao.xml Pictures\Baihatviet.gif Web Nhạc bài hát việt Music 10 32 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  33. 3. WEB SERVER CONTROL Chuyển màn hình qua trang Data, nhập liệu trực tiếp: Click phải màn hình đang code chọn View Data Grid 33 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  34. 3. WEB SERVER CONTROL Bước 3. Thiết lập thuộc tính cho điều khiển adQuangcao AdvertisementFile: Quangcao.xml Target: _blank KeywordFilter: Không thiết lập (Hiển thị tất cả ảnh) Bước 4. Thi hành ứng dụng 34 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  35. 3. WEB SERVER CONTROL 3.11. Điều khiển Calendar Dùng để hiển thị và cập nhật dữ liệu kiểu ngày 35 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  36. 3. WEB SERVER CONTROL Thuộc tính DayHeaderStyle: Tiêu đề của các ngày trong tuần DayStyle: Các ngày trong điều khiển. NextPrevStyle: Tháng trước/sau của tháng đang chọn. SeleltedDayStyle: Ngày đang được chọn. TitleStyle: Tiêu đề của tháng được chọn TodayDayStyle: Ngày hiện hành (trên server). WeekendDayStyle: Các ngày cuối tuần (thứ 7, chủ nhật) OtherMonthDayStyle: Các ngày không nằm trong tháng hiện tại. SelectedDate: Giá trị ngày được chọn trên điều khiển 36 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  37. 3. WEB SERVER CONTROL Sự kiện SelectionChanged: Sự kiện này xảy ra khi chọn một ngày VisibleMonthChanged: Xự kiện xảy ra khi chọn một tháng 37 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  38. 3. WEB SERVER CONTROL Ví dụ: Tạo Calendard trên trang web Bước 1: Tạo Calendard vào trang Bước 2: Chọn mẫu định dạng: Click phải /Auto Format 38 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  39. 3. WEB SERVER CONTROL Xử lý sự kiện: protected void Page_Load(object sender, EventArgs e){ lbNgay.Text = "Hôm nay ngày " + DateTime.Today.ToString ("dd/MM/yyyy"); } protected void Calendar1_SelectionChanged1( . . . .) { lbThongbao.Text ="Bạn đang chọn " + Calendar1.SelectedDate.ToString("dd/MM/yyyy"); } 39 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  40. 3. WEB SERVER CONTROL 3.12. Điều khiển File Upload. Sử dụng Upload file từ chính ứng dụng Web. File sau khi Upload có thể lưu trữ ở 1 nơi nào đó trên webserver. Thuộc tính Ý nghĩa Enable Vô hiệu hoá điều khiển FileUpload. FileBytes Lấy nội dung file đã được upload như một mảng Byte. FileContent Lấy nội dung của file đã được upload theo dòng dữ liệu FileName Lấy tên file được Upload HasFile Trả về giá trị true khi File được Upload 40 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  41. 3. WEB SERVER CONTROL Các phương thức: Focus: Chuyển con trỏ đến điều khiển FileUpload. SaveAs: Cho phép lưu file được upload lên hệ thống. 41 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  42. 3. WEB SERVER CONTROL Ví dụ: Tạo điều khiển File Upload Thiết kế và tạo FileUpload vào trang Xử lý sự kiện: protected void Button1_Click(object sender, EventArgs e) { string sTenfile ; //Tách lấy tên tập tin sTenfile = FileUpload1.FileName; //Thực hiện chép tập tin lên thư mục Upload FileUpload1.SaveAs(MapPath("~/Upload/" + sTenfile)); lbThongbao.Text = "Đã upload thành công" ; } 42 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  43. 3. WEB SERVER CONTROL 3.13. Điều khiển Panel và PlaceHolder . Sử dùng để chứa các điều khiển khác. . Thuộc tính Visible= True thì các điều khiển chứa bên trong sẽ được hiển thị và ngược lại. Tuy nhiên, điều khiển Panel cho phép chúng ta kéo những điều khiển vào bên trong nó lúc thiết kế, còn điều khiển PlaceHolder thì không. 43 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  44. 3. WEB SERVER CONTROL Thuộc tính .DefaultButton: Định nghĩa button mặc định trong panel (sẽ được thực hiện khi nhấn Enter) .Direction: Thiết đặt hướng hiển thị nội dung được đưa ra trong panel:NotSet, LeftToRight, RightToLeft. .GroupingText: Trình bày Panel như 1 Fieldset với một chú giải riêng biệt. .HorizontalAlign: Chỉ ra hướng ngang thể hiện nội dung của panel:Center, Justify, Left, NotSet, Right. .ScrollBars: Hiển thị scrollbars khi nội dung trong panel vượt quá kích thước: Auto, Both, Horizontal, None, Vertical. 44 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  45. 3. 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
  46. 3. WEB SERVER CONTROL Xử lý sự kiện: protected void Page_Load(object sender, EventArgs e) { for (int i = 1; i < 100; i++) { buletnghenghiep.Items.Add("Nghề "+i.ToString()); } } protected void chkhtsothich_CheckedChanged(. . . .) { if (chksothich.Checked == true) panelsothich.Visible = true; else panelsothich.Visible = false; } protected void chkhtnghenghiep_CheckedChanged(. . . ) { if (chknghenghiep.Checked == true) panelnghenghiep.Visible = true; else panelnghenghiep.Visible = false; 46 } © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  47. 3. WEB SERVER CONTROL 3.14. Điều khiển hiển thị các trang – View và MultiView Cho phép ẩn hoặc hiện các phần khác nhau của trang Web, tiện ích khi tạo một TabPage để chia 1 trang web có độ dài lớn thành các phần để hiển thị. Điều khiển MultiView chứa đựng 1 hoặc nhiều điều khiển View. 47 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  48. 3. WEB SERVER CONTROL Thuộc tính . ActiveViewIndex: Lựa chọn điều khiển View được đưa ra hiển thị bằng chỉ số Index . Views: Cho phép lấy về tập hợp các điều khiển View chứa đựng trong điều khiển MultiView. Phương thức . GetActiveView: Cho phép lấy về thông tin của điều khiển View được lựa chọn. . SetActiveView: Cho phép thiết lập điều khiển View được hiển thị. Sự kiện . ActiveViewChanged:Khi điều khiển View được 48 chọn © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  49. 3. WEB SERVER CONTROL Ví dụ: Tạo trang sử dụng MultiView Thiết kế: Tạo 1 Multiview1 gồm 3 View (View1 View2, View3) Tạo Control Menu1 gồm 3 Tab (Tab1, Tab2, Tab3) Tạo Control Menu vào Form 49 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  50. 3. WEB SERVER CONTROL Chọn Edit Menu Item Lần lượt khái báo các nhãn (Text) là: Tab 1, Tab 2, Tab 3 và các giá trị (Value) tương ứng là: 0 , 1, 2 Thuộc tính Orientation: Horizaltal (Menu hướng ngang) 50 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  51. 3. WEB SERVER CONTROL Bổ sung nội dung vào các view tương ứng 51 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  52. 3. WEB SERVER CONTROL Xử lý sự kiện: void Menu1_MenuItemClick(object sender, MenuEventArgs e){ int index = int.Parse(e.Item.Value); MultiView1.ActiveViewIndex = index; } void Page_Load(object sender, EventArgs e){ if (!IsPostBack){ MultiView1.ActiveViewIndex = 0; } } 52 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  53. 4. CÁC ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU-VALIDATION 4.1 Giới thiệu chung 4.2. Điều khiển Required Field Validator 4.3. Điều khiển Compare Validator 4.4. Điều khiển Range Validator 4.5. Điều khiển Regular Expression Validator 4.6. Điều khiển Custom Validator 4.7. Điều khiển Validation Summary 53 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  54. 4.1. GIỚI THIỆU CHUNG 54 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  55. 4.1. GIỚI THIỆU CHUNG Mỗi khi PostBack về Server, trang Web luôn kiểm tra tính hợp lệ dữ liệu (nếu có yêu cầu khi thiết kế). Nếu dữ liệu không hợp lệ (bỏ trống, vi phạm miền giá trị, mật khẩu nhập lại không đúng, ), trang web sẽ không thể 55 PostBack về Server. © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  56. 4.1. GIỚI THIỆU CHUNG Trang Dangky.htm với ngôn ngữ HTML & Javascript Khó khăn trong thiết kế và lập trình (trên 100 dòng code) 56 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  57. 4.1. GIỚI THIỆU CHUNG Trang Dangkythanhvien.aspx với MS Visual studio chỉ còn là quan tâm đến các thuộc tính cần khai báo 57 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  58. 4.2. ĐIỀU KHIỂN REQUIRED FIELD VALIDATOR Công dụng: Dùng để kiểm tra giá trị trong điều khiển phải được nhập. Để kiểm tra ràng buộc khác rỗng (Not null) Thuộc tính: 58 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  59. 4.3. ĐIỀU KHIỂN COMPARE VALIDATOR Công dụng: Để so sánh giá trị của điều khiển với giá trị của điều khiển khác hoặc một giá trị được xác định trước. Sử dụng điều khiển này để kiểm tra ràng buộc miền giá trị, kiểu dữ liệu, liên thuộc tính. 59 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  60. 4.3. ĐIỀU KHIỂN COMPARE VALIDATOR Thuộc tính: . ControlToCompare: Tên điều khiển cần so sánh. . ValueToCompare: Giá trị để so sánh . Operator: Qui định phép so sánh (=, >, >=, ), kiểm tra kiểu dữ liệu ( DataTypeCheck) . Type: Qui định kiểu dữ liệu để kiểm tra hoặc so sánh(String, Integer, Double, Date, Currency) 60 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  61. 4.4. ĐIỀU KHIỂN RANGE VALIDATOR Công dụng: Để kiểm tra giá trị trong điều khiển có nằm trong đoạn [min-max] (kiểm tra ràng buộc miền giá trị). 61 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  62. 4.4. ĐIỀU KHIỂN RANGE VALIDATOR Thuộc tính: - MinimumValue: Giá trị nhỏ nhất. - MaximumValue: Giá trị lớn nhất. - Type: Xác định kiểu để kiểm tra dữ liệu. Có thể thực hiện kiểm tra trên các kiểu: String, Integer, Double, Date, Currency 62 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  63. 4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR Công dụng: Để kiểm tra giá trị của điều khiển phải theo mẫu được qui định trước như: địa chỉ email, số điện thoại, mã vùng, số chứng minh thư, 63 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  64. 4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR Thuộc tính: ValidationExpression: Qui định mẫu kiểm tra dữ liệu 64 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  65. 4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR Bảng mô tả các ký hiệu sử dụng trong Validation Expression 65 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  66. 4.6. ĐIỀU KHIỂN CUSTOM VALIDATOR Công dụng: Điều khiển này cho phép bạn tự viết hàm xử lý kiểm tra lỗi. Sự kiện: ServerValidate: Đặt các xử lý kiểm tra dữ liệu trong sự kiện này. Việc kiểm tra này được thực hiện ở Server. Ví dụ: Xử lý kiểm tra dữ liệu nhập tại điều khiển txtSoA có phải là số chẵn hay không. 66 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  67. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY Công dụng: Để hiển thị ra bảng lỗi - tất cả các lỗi hiện có trên trang Web. Nếu điều khiển nào có dữ liệu không hợp lệ, chuỗi thông báo lỗi - giá trị thuộc tính ErrorMessage của Validation Control sẽ được hiển thị. Nếu giá trị của thuộc tính ErrorMessage không được xác định, thông báo lỗi đó sẽ không được xuất hiện trong bảng lỗi 67 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  68. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY Thuộc tính: - HeaderText: Dòng tiêu đề của thông báo lỗi - ShowMessageBox: Qui định bảng thông báo lỗi có được phép hiển thị như cửa sổ MessageBox hay không. - ShowSummary: Qui định bảng thông báo lỗi có được phép hiển thị hay không. 68 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  69. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY Ví dụ: Tạo trang Dangkykhachang Sử dụng các điều khiển ValidateControl để kiểm tra dữ liệu nhập trên các điều khiển có trong hồ sơ đăng ký khách hàng. 69 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  70. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY 70 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  71. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY Thuộc tính Text của các điều khiển kiểm tra dữ liệu đều là: (*) 71 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  72. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY Xử lý sự kiện: Private Sub butDang_ky_Click( ) lblThong_bao.Text = "Đăng ký thành công"; End Sub 72 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  73. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY Các thông báo lỗi xuất hiện qua hộp thoại khi dữ liệu nhập không hợp lệ: 73 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  74. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY Nếu tất cả đều hợp lệ 74 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  75. 5. WEB USER CONTROLS 5.1 Giới thiệu Khi kết hợp các control để tạo thành một control mới gọi là Web user control (UC)  Sử dụng UC cũng giống như sử dụng thủ tục, hàm khả năng tái sử dụng UC trên các trang web  Phần mở rộng của UC là: .ascx 75 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  76. 5. WEB USER CONTROLS 5.2 Tạo và sử dụng User control Tạo mới User control:  Tạo mới 1 Web user control  Thiết kế giống như thiết kế 1 trang aspx Chọn: Web User Control Đặt tên: *.ascx 76 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  77. 5. WEB USER CONTROLS Sử dụng User control:  Kéo và thả UC vào trang aspx, lúc đó trang aspx sẽ xuất hiện tag 77 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  78. 6. MASTER PAGES 6.1 Giới thiệu  Master pages cho phép tạo 1 bố cục nhất quán trên các trang web trong cùng 1 website (tương tự template)  Nội dung thể hiển trên trình duyệt là sự kết hợp giữa trang .master -master page và trang .aspx (hoặc .ascx) - content page  Master page là tập tin có phần mở rộng .master  Thao tác thiết kế: Giống như trang aspx, nhưng phải bổ sung ít nhất một điều khiển ContentPlaceHolder 78 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  79. 6. MASTER PAGES Master page Content page Trang kết quả 79 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  80. 6. MASTER PAGES 6.2 Tạo trang Master  Bước 1: Tạo mới Item chọn icon Master Page và đặt tên trang: *.master 80 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  81. 6. MASTER PAGES  Bước 2: Thiết kế bố cục chung (có thể sử dụng User control) và bổ sung ContentplaceHolder vào trang master 81 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  82. 6. MASTER PAGES 6.3 Sử dụng trang Master  Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng trang master 82 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  83. 6. MASTER PAGES  Bước 2: Thiết kế bổ sung nội dụng trên trang *.aspx (có thể kéo các User control vào) 83 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  84. 7. ĐIỀU LIÊN KẾT DỮ LIỆU–DATA SOURCE CONTROL 7.1 Điều khiển kết nối cơ sở dữ liệu 7.2 Điều khiển liên kết cơ sở dữ liệu 84 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  85. 7.1. ĐIỀU KHIỂN KẾT NỐI CSDL–DATA SOURCE CONTROL  Là các điều khiển dùng để chứa nguồn dữ liệu được rút trích từ các hệ QT CSDL như: Access, SQLServer, XML, Ocracle . . .  Có các điều khiển Data-Source sau: SQLDataSource, Access Data Source, XML Data Source, . . . 85 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  86. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE  Dùng để kết nối CSDL trong các hệ quản trị CSDL SQLServer, Ocracle Server, . . .  Chọn đối tượng CSDL như Table, View, Procedure hay câu lệnh SQL và khai báo điều kiện lọc (Where) với nhiều cách như: Giá trị định sẳn, đối tượng Session, Request.Form, Request.QueryString . . . Tạo kết nối Kéo điều khiển SQLDataSource từ Tollbox vào trang Chọn Conigure Data Source 86 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  87. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Nếu trước đó đã tạo kết nối thì chọn kết nối đã có. Ngược lại để tạo mới kết nối thì chọn New Connection Tạo kết nối CSDL mới 87 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  88. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE  Chọn QTCSDL (Microsoft SQLServer)  Chọn Continue để tiếp tục 88 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  89. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Khai báo các thông số cho kết nối Chọn Hệ QT CSDL Chọn Tên Server Chọn thông tin đăng nhập Chọn tên CSDL Đồng ý kết nối Kiểm tra kết nối 89 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  90. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Đặt tên cho kết nối Tên kết nối 90 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  91. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Xác định nguồn dữ liệu từ Table, View hay câu lệnh SQL có thể chỉ định điều kiện lọc dữ liệu, sắp xếp hay các chỉ định vcho xử lý thêm, xoá, sửa Xác định nguồn dữ liệu Từ câu lệnh SQL hay Từ Table, View Xác định điều kiện Chỉ định sắp xếp Các lệnh thê, xoá, sửa 91 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  92. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE  Chọn Test Query để kiểm tra kết quả nguồn dữ liệu.  Chọn Finish để hòan thành 92 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  93. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Điều khiển SQL DataSource và tham số Request.QueryString Để lọc dữ liệu theo điều kiện thì giá trị tham số có thể được gán trực tiếp thông qua đối tượng Request.Querystring (Truyền tham số qua liên kết) Khi click vào liên kết trang có địa chỉ kèm theo tham số dạng: 93 . . ./SachNXB.aspx?MaNXB=3 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  94. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Thực hiện: Tạo trang NhaXB.aspx là danh mục nhà xuất bản Chọn Edit Column từ GiridView Task 94 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  95. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 95 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  96. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Với các thuộc tính:  HeaderText: Nhãn tiêu đề cột  Text: Nhãn hiện thị trong tất cả các ô  DatTextField: Giá trị từ 1 field chỉ định trong nguồn DL  DataNavigateUrlFields: Danh mục tên các tham số ghi cách nhau bởi dấu ,  DataNavigateUrlFormatting: Địa chỉ trang liên kết kèm tham số dạng: ~/SachNXB.aspx?MaNXB={0} Giá trị tham số ghi dưới dạng chỉ số các tham số được khai báo trong DataNavigateUrlFields bắt đầu là 0 và cách nhau dấu , 96 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  97. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Tạo trang hiện thị dữ liệu với nguồn dữ liệu có tham số qua liên kết (Request.QueryString). Xác định nguồn dữ liệu, sau đó chọn Where để chỉ định điều kiện 97 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  98. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Columns: Tên cột làm điều kiện Operator: Toán tử so sánh Source: Loại tham số (QueryString) QueryString field: Tên tham số đã truyền 98 Chọn Add để chấp nhận thêm tham số © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  99. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Columns: Tên cột làm điều kiện Operator: Toán tử so sánh Source: Loại tham số (QueryString) QueryString field: Tên tham số đã truyền 99 Chọn Add để chấp nhận thêm tham số © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  100. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Thi hành xem kết quả 100 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  101. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Điều khiển SQL DataSource và tham số Request.Form Để lọc dữ liệu trong nguồn dữ liệu theo điều kiện với giá trị tham số là giá trị trên form. Thực hiện: Tạo trang Lietkesach.aspx gồm: 1 Textbox thuộc tính ID: MaNXB 1 Button thuộc tính PostbackURL: ~/Lietkesach.aspx (Chính trang thiết kế) Tạo SqlDataSource với nguồn dữ liệu: 101 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  102. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Tạo SqlDataSource với nguồn dữ liệu như sau: 102 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  103. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE  Columns: Tên cột làm điều kiện  Operator: Toán tử so sánh  Source: Loại tham số (Form)  Form field: Tên tham số đã truyền (Tên Textbox) 103  Chọn Add để chấp nhận thêm tham số © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  104. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Điều khiển SQL DataSource và tham số là các Controls Có thể khai báo tham số trong điều khiển SqlDataSource mà giá trị được lấy từ điều khiển trình chủ. Ví dụ thiết kế trang SachtheoCD.aspx thực hiện liệt kê danh mục sách có chủ đề được chọn từ điều khiển DropdownList 104 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  105. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Thực hiện Thiết kế Dropdownlist (ddlChude) từ Table Chude Đặt thuộc tính ID: ddlChude DataSourceID: SqlDataSource1 DataTextField: TenCD (Field hiện thị) AutoPostBack: True DataValuefield: MaCD (Field để truyền tham số) 105 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  106. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE GridView (GridView1) Với nguồn dữ liệu từ Table Sach Và tham số điều kiện (Where) 106 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  107. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE  Columns: Tên cột làm điều kiện  Operator: Toán tử so sánh  Source: Loại tham số (Control)  ControlID: Tên tham số đã truyền 107  Chọn Add để chấp nhận thêm tham số © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  108. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Điều khiển SQL DataSource và Procedure Ta có thể sử dụng điều khiển kết nối CSDL SqlDatasource để truy cập gọi Stored Procedure trong CSDL SQL Server. Ví dụ: Ta có Procedure Sachtheogia liệt kê các quyển sách với điều kiện Giá từ 2 tham số là Giatu và Giaden Create Proc Sachtheogia @Giatu int, @Giaden Int as Select * From sach Where Dongia Between @Giatu and @Giaden 108 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  109. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Khi cấu hình cho điều khiển SQLDataSource Chọn loại nguồn dữ liệu là từ Procedure 109 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  110. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Chọn tên Procedure 110 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  111. 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Xác định giá trị cho các tham số của Procedure 111 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  112. 7.1.2 ĐIỀU KHIỂN ACCESS DATASOURCE  Dùng để kết nối với cơ sở dữ liệu Access MDB).  Thực hiện Tạo AccessDataSource từ thanh Toolbox. Chọn Configure Data Source . . .: Để thực hiện kết nối 112 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  113. 7.1.2 ĐIỀU KHIỂN ACCESS DATASOURCE Xác định nguồn dữ liệu và điều kiện tham số như SQLData Source 113 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  114. 7.1.3 ĐIỀU KHIỂN XMLDATASOURCE  Điều khiển XMLDataSource được sử dụng để kết nối CSDL định dạng XML.  Thực hiện: Tạo tập tin XML (DSSinhvien). 114 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  115. 7.1.3 ĐIỀU KHIỂN XMLDATASOURCE Tạo XMLDataSource từ Toolbox. Chọn Configure Data Source . . .: Để thực hiện kết nối 115 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  116. 7.1.3 ĐIỀU KHIỂN XMLDATASOURCE Chọn tập tin XML.  Chọn OK để hoàn tất 116 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  117. 7.2. ĐIỀU KHIỂN LIÊN KẾT CƠ SỞ DỮ LIỆU 7.2.1 Gridview 7.2.2 DataList 7.2.3 Repeater 7.2.4 Detailview & FormView 117 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  118. 7.2.1 GRIDVIEW  Giới thiệu: - GridView là một điều khiển khá linh hoạt và hiệu quả trong việc hiển thị, định dạng và thao tác với dữ liệu. - Cho phép thực hiện sắp xếp dữ liệu, phân trang với sự hỗ trợ khá tốt của Visual .Net trong quá trình thiết kế. 118 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  119. 7.2.1 GRIDVIEW  Tạo GridView vào trang Kéo Control GridView vào trang 119 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  120. 7.2.1 GRIDVIEW  Định dạng tự động Chọn những mẫu định dạng có sẳn Gridview bằng cách Chọn Auto Format từ khung Gridview Task 120 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  121. 7.2.1 GRIDVIEW  Kết nối nguồn dữ liệu Thực hiện kết nối nguồn dữ liệu với cơ sở dữ liệu SQLServer, Access, XML. . Tại mục Choose Data Source: New Data Source (Hoặc chọn Datasource đã được tạo trước đó) Ghi chú: Tạo Datasource như được trình bày trước 121 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  122. 7.2.1 GRIDVIEW Thi hành xem kết quả: 122 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  123. 7.2.1 GRIDVIEW Thêm cột Trong cửa sổ Gridview Task chọn : Add New Column  Chọn Loại field : BoundField  Tiêu đề côt : Header Text  Tên field dữ liệu: DataField  Ok hòan thành 123 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  124. 7.2.1 GRIDVIEW  Hiệu chỉnh các cột Trong cửa sổ Gridview Task chọn : Edit Column 124 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  125. 7.2.1 GRIDVIEW AvailableFields: Chọn lọai Field liên kết dữ liệu BoundField: Cột dạng Textbox. Checkbox Field: Cột dạng Checkbox. Hyperlink Field: Cột dạng liên kết. Button Field: Cột dạng nút lệnh CommandField: Cột dạng nút lệnh được thiết kế sẵn Select: Nút lệnh chọn dòng dữ liệu Edit, Cancel, Update: Các nút cập nhật d.liệu Delete: Nút lệnh xóa dòng dữ liệu TemplateField: Cột do người dùng tự thiết kế. 125 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  126. 7.2.1 GRIDVIEW BoundColumn properties: Thông tin chi tiết cho các cột HeaderText, Footer Text: Tiêu đề trên/dưới của cột Header Image: Hình hiển thị trên tiêu đề cột. Sort Expression: Biểu thức sắp xếp của cột. Visible: Qui định cột có được hiển thị hay không. DataField: Qui định tên field dữ liệu cần hiển thị. Data formatting expression: Biểu thức định dạng {0: }. Vd: {0:000.00}, {0:0.##} {0:dd/MM/yyyy}, {0:hh/mm/ss tt} Convert this Field into a Template Column: Chuyển cột hiện hành thành cột dạng Template Column. 126 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  127. 7.2.1 GRIDVIEW  Thiết lập các thuộc tính định dạng lưới Chọn GridView Properties - ShowHeader/ShowFooter: Hiện / Ẩn Phần đầu và chân của GridView 127 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  128. 7.2.1 GRIDVIEW - HeaderStyle/FooterStyle: Định dạng dòng Header/Footer 128 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  129. 7.2.1 GRIDVIEW - RowStyleAlternatingRowStyle: Định dạng dòng dữ liệu lẽ/chẵn: 129 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  130. 7.2.1 GRIDVIEW - AlowPaging : Phân trang Page size:Qui định số dòng/trang Possition: Qui định vị trí hiển thị của bộ nút di chuyển. Mode: Qui định hình thức hiển thị của bộ nút di chuyển. 130 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  131. 7.2.1 GRIDVIEW - AllowSorting: Sắp xếp 131 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  132. 7.2.2 ĐIỀU KHIỂN DATALIST  Giới thiệu: Như điều khiển Gridview, điều khiển DataList được sử dụng để hiển thị dữ liệu. Tuy nhiên, đối với DataList, chúng ta phải tự thiết kế hình thức hiển thị dữ liệu (giống như Template Column của GridView) 132 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  133. 7.2.2 ĐIỀU KHIỂN DATALIST Một số thuộc tính cần chú ý RepeatDirection: Qui định hướng hiển thị dữ liệu oHorizontal: Hiển thị dữ liệu theo chiều ngang oVertical: Hiển thị dữ liệu theo chiều đứng RepeatColumns: Qui định số cột hiển thị 133 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  134. 7.2.2 ĐIỀU KHIỂN DATALIST - Thiết kế hình thức hiển thị cho DataList cũng tương tự như thiết kế cho cột Template Column của GridView - Chọn Edit Template từ thực đơn ngữ cảnh để thực hiện thiết kế hình thức hiển thị cho DataList. 134 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  135. 7.2.2 ĐIỀU KHIỂN DATALIST Ghi chú: Để công việc thiết kế được dễ dàng, thực hiện thiết kế ở bên ngoài điều khiển DataList. Sử dụng Table để định vị trí các điều khiển. Sau khi thiết kế hoàn tất, kéo kết quả vào vị trí hiển thị trong DataList. 135 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  136. 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ị dữ liệu. Tuy nhiên phải tự thiết kế hình thức hiển thị thông qua các tag HTML. 136 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  137. 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 các mục dữ liệu dòng lẻ. Nội dung hiển thị cho các mục dữ liệu chẳn. Nội dung hiển thị giữa các dòng dữ liệu Nội dung hiển thị cho tiêu đề dưới. : 137 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  138. 7.2.3 ĐIỀU KHIỂN REPEATER Ví dụ: Bước 1: Tạo mới điều khiển Repeater: rptChudesach vào trang Web Bước 2: Kết nối và tạo nguồn dữ liệu cho điều khiển từ Table Chude với các cột: MaCD, Tenchude Bước 3:. Chuyển trang Web qua dạng code HTM bổ sung các tag sau: 138 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  139. Mã CĐ Tên CĐ 139 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  140. 7.2.4 DETAILVIEW & FORMVIEW Giới thiệu: Hai điều khiển này cho phép làm việc với một trường dữ liệu đơn tại mỗi thời điểm. Thực hiện được chức năng xem, thay đổi, thêm mới hay xoá, di chuyển sang trang tiếp theo hay quay lại trang trước. 140 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  141. 7.2.4 DETAILVIEW & FORMVIEW  Detailview Hiển thị dữ liệu với DetailView DetailView được đưa ra hiển thị như 1 bảng( )trong HTML để hiển thị dữ liệu 1 bản ghi. Ví dụ: Trang XemthongtinKH.aspx 141 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  142. 7.2.4 DETAILVIEW & FORMVIEW Sử dụng Fields với điều khiển DetailView DetailView hỗ trợ tất cả các Field như GridView : BoundField,CheckBoxField,CommandField,ButtonField, HyperLinkField, ImageField, TemplateField 142 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  143. 7.2.4 DETAILVIEW & FORMVIEW Xử lý phân trang với điều khiển DetailView Để tạo phân trang chỉ định thuộc tính AllowPaging=”true” cho điều khiển DetailView. Với các 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
  144. 7.2.4 DETAILVIEW & FORMVIEW Minh họa: Trong ví dụ liên kết dữ liệu với Table Khachhang đưa vào 5 BoundField và một CheckBoxField, điền dữ liệu vào với thuộc tính DataField và thiết đặt tiêu dề (HeaderText). Tạo phân trang và trình bày tại góc trên bên phải. 144 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  145. 7.2.4 DETAILVIEW & FORMVIEW  Formview Hiển thị dữ liệu với FormView FormView dùng để hiển thị dữ liệu với các điều khiển tùy biến cho dữ liệu một bản ghi. Ví dụ: Trang XemthongtinNXB.aspx 145 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  146. 7.2.4 DETAILVIEW & FORMVIEW Trình bày dữ liệu sử dụng Edit Template Tạo FormView vào trang và liên kết dữ 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
  147. 7.2.4 DETAILVIEW & FORMVIEW Thiết kế trình bày với các Control điều khiển tương tự như khi thiết kế DataList với các điều khiển tùy biến 147 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  148. 7.2.4 DETAILVIEW & FORMVIEW Xử lý phân trang với điều khiển FormView Để tạo phân trang chỉ định thuộc tính AllowPaging=”true” cho điều khiển Form. Với các 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
  149. 7.2.4 DETAILVIEW & FORMVIEW Minh họa: Trong ví dụ liên kết dữ liệu với Table NhaXuatBan đưa vào 4 Label, điền dữ liệu vào với thuộc tính Text cho các File tương tứng, thiết đặt tiêu đề(HeaderText). Tạo phân trang và trình bày tại phía dưới giữa trang 149 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  150. 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