Thiết kế và lập trình website - Chương 5: Các điều khiển trong asp.net

1 Chương 5: CÁC ĐIỀU KHIỂN TRONG ASP.NET © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 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) 2 NỘI DUNG © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 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 3 1. TỔNG QUAN VỀ CÁC CONTROLS © 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. © Dương Thành Phết HTML Control trên Toolbox www.thayphet.net - phetcm@gmail.com 5 Để 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 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2. HTML CONTROL 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 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 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 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. www.thayphet.net - phetcm@gmail.com 3. WEB SERVER CONTROL 8 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"; © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 3. WEB SERVER CONTROL 9 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 đủ. © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 3. WEB SERVER CONTROL 10 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 11 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 12 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: www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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(); } 3. WEB SERVER CONTROL 13 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 14 Ví dụ: Tạo trang web gồm 3 điều khiển Hyperlink www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 15 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 16 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(); www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 17 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 18 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 19 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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.Count - 1; i ++) { if (lstDiadanh.Items[i].Selected) lbDiadanh.Text += "" + lstDiadanh.Items[i].Value; } } 3. WEB SERVER CONTROL 20 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 21 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ữ www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 22 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 23 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 3. WEB SERVER CONTROL 24 Ví dụ: Tạo trang web gồm Nhóm RadioButton Thu nhập www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 3. WEB SERVER CONTROL 25 Ví dụ: Tạo trang web khi click nút Đăng ký thì hiện thị các thông tin được chọn. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 26 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). www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 27 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Ví dụ: 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"; } Khi thiết kế. Xem source: Đây là chuỗi ký tự trong label Đây là chuỗi ký tự trong Literial 28 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). www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 29 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 3. WEB SERVER CONTROL 30 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Sự kiện AdCreated: Xảy ra khi điều khiển tạo ra các quảng cáo 3. WEB SERVER CONTROL 31 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 3. WEB SERVER CONTROL 32 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 3. WEB SERVER CONTROL 33 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 3. WEB SERVER CONTROL 34 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 3. WEB SERVER CONTROL 35 3.11. Điều khiển Calendar Dùng để hiển thị và cập nhật dữ liệu kiểu ngày www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 36 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 37 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 38 Ví dụ: Tạo Calendard trên trang web www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Bước 1: Tạo Calendard vào trang Bước 2: Chọn mẫu định dạng: Click phải /Auto Format 3. WEB SERVER CONTROL 39 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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"); } 3. WEB SERVER CONTROL 40 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 3. WEB SERVER CONTROL 41 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 42 Ví dụ: Tạo điều khiển File Upload www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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" ; } 3. WEB SERVER CONTROL 43 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 44 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 3. WEB SERVER CONTROL 45 Ví dụ: Tạo trang sử dụng Panel www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Thiết kế: 3. WEB SERVER CONTROL 46 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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; } 3. WEB SERVER CONTROL 47 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 3. WEB SERVER CONTROL 48 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 chọn 3. WEB SERVER CONTROL 49 Ví dụ: Tạo trang sử dụng MultiView www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 3. WEB SERVER CONTROL 50 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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) 3. WEB SERVER CONTROL 51 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Bổ sung nội dung vào các view tương ứng 3. WEB SERVER CONTROL 52 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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; } } 3. WEB SERVER CONTROL 53 4. CÁC ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU-VALIDATION www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 54 4.1. GIỚI THIỆU CHUNG www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 55 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ể PostBack về Server. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 4.1. GIỚI THIỆU CHUNG 56 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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) 4.1. GIỚI THIỆU CHUNG 57 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 4.1. GIỚI THIỆU CHUNG 58 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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: 59 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 60 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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) 4.3. ĐIỀU KHIỂN COMPARE VALIDATOR 61 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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ị). 62 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 4.4. ĐIỀU KHIỂN RANGE VALIDATOR 63 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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ư, 64 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Thuộc tính: ValidationExpression: Qui định mẫu kiểm tra dữ liệu 4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR 65 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Bảng mô tả các ký hiệu sử dụng trong Validation Expression 4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR 66 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 67 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 68 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY 69 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY 70 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY 71 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Thuộc tính Text của các điều khiển kiểm tra dữ liệu đều là: (*) 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY 72 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Xử lý sự kiện: Private Sub butDang_ky_Click() lblThong_bao.Text = "Đăng ký thành công"; End Sub 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY 73 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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ệ: 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY 74 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Nếu tất cả đều hợp lệ 4.7. ĐIỀU KHIỂN VALIDATION SUMMARY 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 76 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Chọn: Web User Control Đặt tên: *.ascx 5. WEB USER CONTROLS 77 Sử dụng User control:  Kéo và thả UC vào trang aspx, lúc đó trang aspx sẽ xuất hiện tag www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 5. WEB USER CONTROLS 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  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 79 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Master page Content page Trang kết quả 6. MASTER PAGES 80 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 6. MASTER PAGES 81  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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 6. MASTER PAGES 82 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 6. MASTER PAGES 83  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) www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 6. MASTER PAGES 84 7. ĐIỀU LIÊN KẾT DỮ LIỆU–DATA SOURCE CONTROL www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 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, . . . www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 . . . www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Tạo kết nối Kéo điều khiển SQLDataSource từ Tollbox vào trang Chọn Conigure Data Source  87 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 88 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  Chọn QTCSDL (Microsoft SQLServer)  Chọn Continue để tiếp tục 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 89 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Chọn Hệ QT CSDL Khai báo các thông số cho kết nối Chọn Tên Server Chọn thông tin đăng nhập Chọn tên CSDL Kiểm tra kết nối Đồng ý kết nối 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 90 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Đặt tên cho kết nối Tên kết nối 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 91 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 92 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  Chọn Test Query để kiểm tra kết quả nguồn dữ liệu.  Chọn Finish để hòan thành 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 93 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Đ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: . . ./SachNXB.aspx?MaNXB=3 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 94 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 95 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 96 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 , 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 97 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 98 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 Chọn Add để chấp nhận thêm tham số 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 99 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 Chọn Add để chấp nhận thêm tham số 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 100 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Thi hành xem kết quả 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 101 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Đ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: 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 102 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Tạo SqlDataSource với nguồn dữ liệu như sau: 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 103 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  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)  Chọn Add để chấp nhận thêm tham số 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 104 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Đ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 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 105 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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ố) 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 106 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết GridView (GridView1) Với nguồn dữ liệu từ Table Sach Và tham số điều kiện (Where) 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 107 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  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  Chọn Add để chấp nhận thêm tham số 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 108 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Đ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 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 109 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Khi cấu hình cho điều khiển SQLDataSource Chọn loại nguồn dữ liệu là từ Procedure 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 110 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Chọn tên Procedure 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 111 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Xác định giá trị cho các tham số của Procedure 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 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. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Chọn Configure Data Source . . .: Để thực hiện kết nối 113 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Xác định nguồn dữ liệu và điều kiện tham số như SQLData Source 7.1.2 ĐIỀU KHIỂN ACCESS DATASOURCE 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). www.thayphet.net - phetcm@gmail.com © Dương Thành Phết <Sinhvien MaSV="SV01" HotenSV="Trần Văn Nam" Diachi="123 Trần Hưng Đạo, Q5" Email="nam@gmail.com" /> <Sinhvien MaSV="SV02" HotenSV="Nguyễn Thị Lý" Diachi="45 Hai Bà Trưng, Q1" Email="lythi@yahoo.com" /> <Sinhvien MaSV="SV03" HotenSV="Nguyễn Thị Bình" Diachi="31 Lý Thường Kiệt,TB" Email="kiet@gmail.com"/> 115 Tạo XMLDataSource từ Toolbox. www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Chọn Configure Data Source . . .: Để thực hiện kết nối 7.1.3 ĐIỀU KHIỂN XMLDATASOURCE 116 Chọn tập tin XML.  Chọn OK để hoàn tất www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 7.1.3 ĐIỀU KHIỂN XMLDATASOURCE 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 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 118 7.2.1 GRIDVIEW www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  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ế. 119 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  Tạo GridView vào trang Kéo Control GridView vào trang 7.2.1 GRIDVIEW 120 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  Đị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 7.2.1 GRIDVIEW 121 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  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 7.2.1 GRIDVIEW 122 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Thi hành xem kết quả: 7.2.1 GRIDVIEW 123 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.1 GRIDVIEW 124 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  Hiệu chỉnh các cột Trong cửa sổ Gridview Task chọn : Edit Column 7.2.1 GRIDVIEW 125 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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ế. 7.2.1 GRIDVIEW 126 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Convert this Field into a Template Column: Chuyển cột hiện hành thành cột dạng Template Column. 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} 7.2.1 GRIDVIEW 127 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  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 7.2.1 GRIDVIEW 128 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết - HeaderStyle/FooterStyle: Định dạng dòng Header/Footer 7.2.1 GRIDVIEW 129 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết - RowStyleAlternatingRowStyle: Định dạng dòng dữ liệu lẽ/chẵn: 7.2.1 GRIDVIEW 130 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết - 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. 7.2.1 GRIDVIEW 131 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết - AllowSorting: Sắp xếp 7.2.1 GRIDVIEW 132 7.2.2 ĐIỀU KHIỂN DATALIST www.thayphet.net - phetcm@gmail.com © Dương Thành Phết  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) 133 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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ị 7.2.2 ĐIỀU KHIỂN DATALIST 134 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết - 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. 7.2.2 ĐIỀU KHIỂN DATALIST 135 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 7.2.2 ĐIỀU KHIỂN DATALIST 136 7.2.3 ĐIỀU KHIỂN REPEATER www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 137 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. : 7.2.3 ĐIỀU KHIỂN REPEATER 138 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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: 7.2.3 ĐIỀU KHIỂN REPEATER 139 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết Mã CĐ Tên CĐ 140 7.2.4 DETAILVIEW & FORMVIEW www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 141  Detailview www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.4 DETAILVIEW & FORMVIEW 142 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.4 DETAILVIEW & FORMVIEW 143 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.4 DETAILVIEW & FORMVIEW 144 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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. 7.2.4 DETAILVIEW & FORMVIEW 145  Formview www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.4 DETAILVIEW & FORMVIEW 146 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.4 DETAILVIEW & FORMVIEW 147 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.4 DETAILVIEW & FORMVIEW 148 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.4 DETAILVIEW & FORMVIEW 149 www.thayphet.net - phetcm@gmail.com © Dương Thành Phết 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 7.2.4 DETAILVIEW & FORMVIEW 150 Chương 5: CÁC ĐIỀU KHIỂN TRONG ASP.NET © Dương Thành Phết www.thayphet.net - phetcm@gmail.com KHOA CAO ĐẲNG THỰC HÀNH THE END.