Giáo trình Phát triển Web nâng cao - Bài 3: Server Control

Nội dung text: Giáo trình Phát triển Web nâng cao - Bài 3: Server Control

1. Bài 3: SERVER CONTROL 3.1. Html Server control 3.2. Web Server control 3.3. Client-Side Callback
2. 3.1 HTML Server Control • Khái niệm • Cách tạo • Thứ bậc • Các sự kiện • Xử lý dữ liệu
3. Khái niệm • HTML control là các đoạn mã dùng tạo các điều khiển trên giao diện • HTML control thường chỉ được sử lý ngay tại Web Browser ( , , ) • Các HTML control có thể được xử lý ngay tại phía server bằng cách chuyển chúng thành các HTML server control
4. Ví dụ Các điều khiển giao diện function Tinh() { var x, y; x = parseInt(document.getElementById("txtA").value); y = parseInt(document.getElementById("txtB").value); document.getElementById("txtTong").value = x + y; } Nhập số A: Nhập số B: Tổng là:
5. Cách tạo • Cú pháp: • Ví dụ: • Tất cả HTML Server Control phải được đặt trong tag với thuộc tính runat = “server”
6. • Hệ thống thứ bậc của HTML Server Controls System.Object System.Web.UI.Control HtmlControl HtmlImage HtmlContainerControl HtmlInputControl HtmlForm , HtmlGenericControl HtmlInputFile , HtmlInputHidden HtmlSelect HtmlInputImage HtmlTable HtmlInputRadioButton HtmlTableCell , HtmlInputText HtmlTableRow HtmlInputButton HtmlTextArea HtmlInputCheckBox type=checkbox> HtmlButton
7. Các sự kiện • Sự kiện: – onServerClick – onServerChange – onStartSelect, • Cú pháp:
8. Xử lý dữ liệu từ HTML Server • Cú pháp: controlfield_id.Value • Ví dụ: Các điều khiển giao diện public void btnsend_Serverclick(object sender, System.EventArgs e) { Response.Write("Hello " + txtA.Value); } Nhập ten:
9. Xử lý dữ liệu từ HTML Server • Lưu ý: Đối với DIV, SPAN thì phải dùng thuộc tính .innerHTML để xử lý • Ví dụ: Các điều khiển giao diện public void btnsend2_Serverclick(object sender, System.EventArgs e) { MySpan.InnerHtml="Xin chao " + txtB.Value; } Nhập ten 2:
10. Thẻ Span & Div • Thẻ : – Là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả – Dùng để nhóm một khối phần tử • Thẻ : – Cũng là một thẻ trung hòa – Dùng để nhóm một hoặc nhiều khối phần tử
11. Ví dụ Không có gì quý hơn độc lập tự do Hà Nội Đà Nẳng TP Hồ Chí Minh Quảng Nam Quảng Ngãi Bình Định
12. 3.2 Web server control • Khái niệm • Cách tạo • Thứ bậc • Các Control cơ bản • Các Control đặt biệt
13. Khái niệm • Web server control là những tag đặc biệt của ASP.NET • Các control này được xử lý trên Server và đòi hỏi phải có thuộc tính runat= “server” • Web server control tồn tại bên trong không gian tên System.Web.UI.WebControls
14. Cách tạo • Cú pháp: • Ví dụ:
15. Hệ thống thứ bậc của Web Server Control System.Object System.Web.UI.Control Repeater Xml WebControl AdRotator LinkButton Image BaseDataList ListControl ImageButton DataGrid RadioButtonList Label CheckBoxList DataList BaseValidator DropDownList Button BaseCompareValidator ListBox Calendar CompareValidator Panel CheckBox RangeValidator Table RadioButton CustomValidator TableCell HyperLink RegularExpressionValidator TableHeaderCell TextBox RequiredFieldValidator TableRow ValidationSummary
16. Các Control cơ bản • Label • Textbox • Button • CheckBox • Radio • Image • Hyperlink • List Controls group • Table • BulletedList
17. Label • Dùng hiển thị văn bản trên trình duyệt • Thuộc tính: – ID: tên cho label – Khác: Tự nghiên cứu • Ví dụ:
18. TextBox • Dùng để nhập liệu hoặc hiển thị văn bản chỉ đọc • Thuộc tính : – AutoPostBack: có 2 giá trị True và False khi một hành động trên trang web bẩy một sự kiện – TextMode: SingleLine, MultiLine, Pass – Value: Gán giá trị – ReadOnly: Dữ liệu không thay đổi – Khác: Tự nghiên cứu • Sự kiện: Tự nghiên cứu
19. Button • Thường sử dụng để submit form • Phân loại: – Button – LinkButton – ImageButton • Sự kiện – Onclick() – OnserverClick()
20. Button
21. CheckBox • Các thuộc tính: o Type "checkbox" o Id tên checkbox o Text Nhãn o Checked .Checked = True/False o Item[n].Selected .Item[n].Selected=True/False o SelectedItem . SelectedItem o SelectedValue . SelectedValue o SelectedIndex . SelectedIndex • Sự kiện: – Onclick() – Onserverclick ()
22. CheckBox Bạn chọn màu   Đỏ   Xanh
23. protected void btnSubmit_Click(object sender, EventArgs e) { string maudachon = " "; if (maudo.Checked) { maudachon = "Đỏ "; } if (mauxanh.Checked) { maudachon = "Xanh "; } if ((maudo.Checked) && (mauxanh.Checked)) { maudachon = "Đỏ Xanh "; } if (Page.IsPostBack) { lbltext.InnerHtml = “Bạn chọn màu: " + maudachon; } }
24. RadioButton • Thuộc tính: o Type "RadioButton" o Id tên RadioButton o Text Nhãn o Checked .Checked = True/False o SelectedItem . SelectedItem o SelectedValue . SelectedValue o SelectedIndex . SelectedIndex • Sự kiện – onClick() – onCheckedChanged()
25. image • Type: Image • ImageUrl : Địa chỉ của hình cần hiển thị • AlternateText: Dòng văn bản hiển thị khi hình không có sẳn • ImageAlign: Canh vị trí tương đối của hình so với văn bản trên trang • Height: Chiều cao Xem thêm ImageButton PostBackUrl • Width: Chiều rộng • ToolTip: Thông báo khi rà mouse
26. HyperLink • ImageUrl: Đường dẫn đến hình cần hiển thị (nếu dùng thuộc tính này thì hyperlink có tác dụng giống như Imagebutton) • NavigateUrl: Địa chỉ URL cần link đến • Text: Chuỗi văn bản chỉ mục liên kết hiển thị trên trình duyệt • Target: Chỉ cửa sổ hiển thị trang đích
27. ListControl • DropDownList • ListBox • CheckBoxList • RadioButtonList
28. ListControl ListBox DropDownList CheckBoxList RadioButtonList Quảng Ngãi Đà Nẳng Item: có thể được tạo theo cách Coding hoặc Design Items.Count: trả về số phần tử trong listControls Items.Add(ListItem): thêm phần tử vào listControls Items.Remove(ListItem): xoá phần tử khỏi ListControl Items.Clear(): Xoá tất cả các phần tử. Items[i].Selected: trả về true hoặc false.
29. Thuộc tính và sự kiện • SelectedIndex: trả về chỉ số của phần tử được chọn • SelectedItem: trả về phần tử được chọn. • SelectedValue: trả về giá trị được chọn. • Sự kiện: SelectedIndexChaged
30. Dữ liệu cho ListControl • DataSource: thiết lập giá trị từ DataSource như DataTable,DataSet,Array,Collection,DataView • DataTextField: thiết lập phần tử text từ DataSource • DataValueField: thiết lập giá trị phần tử từ DataSource • DataBind(): binding data vào ListControl
31. Table • Table: Hiển thị thông tin dưới dạng dòng và cột. • Table control cho phép xây dựng các bảng động bằng mã lệnh sử dụng các thuộc tính tập hợp Table Rows và Table Cells • Tạo Table : Disgin hoặc Code ASP ControlHTML HTMLControl Table TableRow TableHeaderCell TableCell
32. ASP ControlHTML Cột 1 Cột 2 Cột 3 c1 c2
33. HTMLControl cột 1 Cột 2 Cột 3            
34. BulletedList
35. Các Control đặt biệt • Panel • FileUpload • Calendar • AdRotator • Validation • Wizard
36. Panel • Được dùng như ContainerControl đối với các control khác • Thi hành nhiều chức năng: Kiểm soát các control chứa trong Panel Control • Được dẫn xuất từ lớp Webcontrol
37. FileUpload • Dùng thực hiện upload file lên server • Các thuộc tính: – FileName: Tên file được upload lên – Hasfile: True/False tồn tại file không – FileBytes: Mảng bytes chứa nội dung file upload – PostedFile.Filename: Đường dẫn đầy đủ của file – PostedFile.ContentType: Loại File (.doc, .mdb, ) – PostedFile.ContentLength: Kích thước của File. • Các phưong thức: – SaveAs: Lưu file upload vào 1 thư mục bất kỳ – MapPath(): Trả về đường dẫn ảo của web server – PathGetExtension(): Trả về pahàn mở rộng của file
38. Ví dụ lblfile.Text = FileUpload1.PostedFile.FileName.ToString(); lbltype.Text = FileUpload1.PostedFile.ContentType.ToString(); lblsize.Text = FileUpload1.PostedFile.ContentLength.ToString(); string filename; filename = FileUpload1.PostedFile.FileName.ToString(); FileUpload1.PostedFile.SaveAs(Server.MapPath("")+"\\bai2.3"+filename); Nên viết Code Bihind
39. Calendar • Cú pháp: • Các thuộc tính: – DayNameFormat: Định dạng – FirstDayOfWeek: Quy định ngày đầu tuần – SelectedDate: Lấy về hoặc thiết đặt cho ngày lựa chọn – .SelectedDate. ; – .SelectedDate. .ToString();
40. AdRotator • Ý nghĩa: Dùng quảng cáo trên trang web • Thuộc tính: – ImageUrl: URL của hình ảnh cần được hiển thị – NavigateUrl: URL của trang web phải chuyển đến control khi có sự kiện click. – AlternateText: Dòng văn bản hiển thị khi hình không có sẳn – Keyword: loại quảng cáo – AdvertisementFile: file.xml – Height – Width
41. Image/hinh1.gif Alt Text
42. Validation • RequiredFieldValidator • Range Validator • RegularExpressionValidator • CompareValidator • CustomValidator • ValidationSummary
43. RequiredFieldValidator • Ý nghĩa: Yêu cầu người dùng phải nhập liệu • Cú pháp:
44. Range Validator • Ý nghĩa: – Kiểm tra giới hạn nhập liệu – Giá trị nhập phải nằm trong khoảng giới hạn: • giới hạn này có thể được đưa vào lúc thiết kế • hoặc so sánh với các control khác trên trang web • Cú pháp:
45. RegularExpressionValidator • Ý nghĩa: – Kiểm tra dữ liệu nhập với khuôn biểu thức mẫu (RegularExpression) đã được định nghĩa trước – Visual Studio .NET cung cấp các khuôn biểu thức mẫu • Cú pháp:
46. • Xác định file ảnh: "^([0-9a-zA-Z_\-~ :\\])+(.jpg|.JPG|.jpeg|.JPEG|.bmp|.BMP|.gif|.GIF|.png" • Xác định số: "^\d+$" hoặc "^\d{n}" • Ký tự là số: "[0-9]+" • Lưu ý: *, ?
47. CompareValidator • Ý nghĩa: So sánh dữ liệu nhập với một trị hoặc hằng cho trước hoặc một giá trị trong dữ liệu • Cú pháp:
48. CustomValidator • Ý nghĩa: Kiểm tra tính hợp lệ dữ liệu của một control theo một yêu cầu, một ràng buộc nào đó • Cú pháp: protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { if (args.Value.Length>5) { args.IsValid = true; } else { args.IsValid = false; } }
49. ValidationSummary • Ý nghĩa: – Cho phép bạn liệt kê tất cả các các lỗi kiểm tra trên trang từ những điều khiển validator vào một vị trí. – Điều khiển này đặc biệt tiện ích với Form có độ rộng lớn • Cú pháp: • Thuộc tính: – DisplayMode: Cho phép bạn chỉ rõ định dạng hiển thị lỗi, nó có thể là các giá trị như BulletList, List, và SingleParagraph – HeaderText: Cho phép bạn hiển thị tiêu đề tóm tắt cho các lỗi – ShowMessageBox: Cho hiện thị một popup thông báo – ShowSummary: Cho phép bạn ẩn ValidationSummary trên trang.
50. Wizard • Ý nghĩa: Tạo các bước để dẫn dắt người dùng qua một dãy màn hình nhằm thu thập thông tin • Các thuộc tính quan trọng: – WizardStep – StepType : Start; Step; Finish; Complete • Các sự kiện: – Onfinishbuttonclick: Xảy ra khi nút Finish được Click – OnActiveStepChanged: Xảy ra khi thay đổi các bước hiển thị
51. Tạo ứng dụng 2 3 1 5 • Viết code cho các 4 • Viết code cho sự kiện Onfinishbuttonclick
52. 3.3. Client-Side Callback • Sinh viên tự nghiên cứu