Giáo trình Giới thiệu lập trình ASP.Net - Chương III: HTML servercontrol và web servercontrol

Nội dung text: Giáo trình Giới thiệu lập trình ASP.Net - Chương III: HTML servercontrol và web servercontrol

1. CHƯƠNG III: HTML SERVERCONTROL VÀ WEB SERVER CONTROL Lý thuyết 3 tiết Thực hành 6tiết
2. I. HTML Server Control Các HTML control thông thường như , , sẽ không được xử lý bởi server mà được gửi trực tiếp cho browser để hiển thị 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.
3. I. HTML Server Control Chuyển một HTML control thành một HTML server control bằng cách thêm thuộc tính runat=”server” vào trong các tag HTML Cú pháp: Ví dụ:
4. I. HTML Server Control Tất cả HTML Server Control phải được đặt trong tag với thuộc tính runat = “server” HTML Server Control tồn tại bên trong không gian tên System.Web.UI.HtmlControls
5. 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
6. I. HTML Server Control Các sự kiện (event) của HTML server Control: ◼ onServerClick ◼ onServerChange ◼ onStartSelect, Cú pháp: ◼ Lưu ý: Function không có tham số.
7. I. HTML Server Control Ví dụ:
8. I. HTML Server Control Cách lấy dữ liệu từ các HTML server Cú pháp: controlfield_id.Value Đối với tag DIV, SPAN dùng thuộc tính .innerHTML
9. I. HTML Server Control Ví dụ: public void btnSend_ServerClick(object sender,System.EventArgs e) { String strName; strName=txtName.Value; Response.Write(“Hello :”+strName) }
10. Ví dụ void Button_ServerClick(object sender, EventArgs e) { MySpan.InnerHtml = “Chao ban : " + myText.Value + "."; }
11. II. Web Server Control 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 Cú pháp:
12. 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
13. II. Web Server Control Nhóm control cơ bản Cú pháp chung: Các control cơ bản gồm:
14. II. Web Server Control Label Textbox Button CheckBox and Radio Image, Hyperlink, Panel List Controls group Table AddRotator FileUpload Validation
15. II. Web Server Control Label server control: dùng hiển thị văn bản trên trình duyệt. Thuộc tính: Text: sử dụng để nhận hoặc gán text ví dụ: String strName=lblMsg.Text; Or lblMsg.Text=“Value”;
16. II. Web Server Control TextBox:dùng để nhập liệu từ người sử dụng và 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. Ví dụ:
17. II. Web Server Control ◼ TextMode: Loại textbox: singleLine, MultiLine, Password ◼ Text: trả về giá trị hoặc gán giá trị ◼ ReadOnly: Dữ liệu không thay đổi Ví dụ: String strName=txtName.Text; Hoặc txtName.Text=“Value”;
18. II. Web Server Control Sự kiện: ◼ Text_Changed() ◼ Focus(): cho phép đưa trỏ về phần tử được chỉ định trên form. ví dụ: txtName.Focus();
19. II. Web Server Control Button: thường sử dụng để submit form ◼ Phân loại: Button LinkButton ImageButton ◼ Sự kiện Onclick() OnserverClick()
20. II. Web Server Control Checkbox ◼ Các thuộc tính: AutoPostBack Checked Text ◼ Sự kiện: CheckedChange()
21. II. Web Server Control ❑ RadioButton ◼ Thuộc tính: GroupName: tên của nhóm Text: nội dung văn bản của radioButton Checked: radioButton được chọn ◼ Sự kiện onClick() onCheckedChanged()
22. II. Web Server Control Image: Thuộc tính: ◼ 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
23. II. Web Server Control Hyperlink Thuộc tính: ◼ 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
24. II. Web Server Control Panel ◼ Ý nghĩa: được dùng như ContainerControl đối với các control khác, nó 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
25. II. Web Server Control Cú pháp </asp:Panel Thuộc tính: ◼ Visible: thuộc tính nhìn thấy đựơc của control bên trong Panel control ◼ BackImageUrl: URL của hình ảnh hiển thị phía sau table. ◼ Backcolor: màu nền của control
26. II. Web Server Control Nhóm ListControl: ◼ DropDownList ◼ ListBox ◼ CheckBoxList ◼ RadioButtonList
27. II. Web Server Control ListItem: Hoạt động giống nhau với 2 thuộc tính Value va Text Item có thể được thêm vào theo cách tĩnh (Design) hoặc Lập trình (Coding), Add Các thuộc tính: 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
28. II. Web Server Control ❑AutoPostBack: true hoặc false 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. True nếu phần tử đựơc chọn Với i=0, n-1 (n=Items.Count).
29. II. Web Server Control 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 (Là các thông tin Data lấy được từ CSDL tại Chương 7 )
30. II. Web Server Control Các đặc tính Checkbox RadioButton DropDown List List List ListBox Chọn 1 Item duy nhất X X Chọn hơn 1 Item X X Hiển thị toàn bộ danh sách X
31. II. Web Server Control Ví dụ: DropDownList Anh Pháp Hoa
32. II. Web Server Control protected void btnThem_Click(object sender, EventArgs e) { drpLan.Items.Add(txtThem.Text); } protected void Page_Load(object sender, EventArgs e) { if(drpLan.SelectedItem!=null) lblKq.Text="The selected item is: " + drpLan.SelectedItem.Text; else lblKq.Text="No item is selected"; }
33. II. Web Server Control Ví dụ: CheckBoxList Cau hinh Phan cung Co so du lieu
34. II. Web Server Control protected void Page_Load(object sender, EventArgs e) { string[] maMH ={ "001","002","003","004"}; string[] tenMH ={"LT Windows", "LT Internet","AVCN","Cau hinh Mang"}; for (int i = 0; i < maMH.Length; i++) { chkMonhoc.Items.Add(new ListItem(tenMH[i],maMH[i])); } }
35. II. Web Server Control Ví dụ: RadioButtonList 10 12 14 16
36. II. Web Server Control protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { int[] sizefont ={ 18, 20, 22, 24 }; for (int i = 0; i < sizefont.Length; i++) radFont.Items.Add(new ListItem(sizefont[i].ToString())); } }
37. II. Web Server Control protected void radFont_SelectedIndexChanged(object sender, EventArgs e) { int sizeselected = Convert.ToInt32(radFont.SelectedValue); lblKq.Font.Size = sizeselected; }
38. II. Web Server Control 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
39. II. Web Server Control Cú pháp ASP ControlHTML HTMLControl Table TableRow TableCell TableHeaderCell
40. II. Web Server Control AdRotator Server Control :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
41. II. Web Server Control FileUpload Server Control: 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 ◼ FileBytes: Mảng bytes chứa nội dung file upload ◼ PostedFile: Hiển thị đầy đủ như 1 đối tượng HttpPostedFile. HttpPostedFile có các thuộc tính FileName: Ten File ContentType: Loại File (.doc, .mdb, ) ContentLength: Kích thước của File. SaveAs: Lưu file upload vào 1 thư mục bất kỳ
42. II. Web Server Control Ví dụ: protected void btnShow_Click(object sender, EventArgs e) { lblFliename.Text = FileUpload1.PostedFile.FileName.ToString(); lblType.Text = FileUpload1.PostedFile.ContentType.ToString(); lblLength.Text = FileUpload1.PostedFile.ContentLength.ToString(); //Luu file string filename = FileUpload1.FileName.ToString(); FileUpload1.PostedFile.SaveAs(Server.MapPath("") + "\\BT_Chuong3_ListControl" + filename); }
43. II. Web Server Control
44. V. Validation Server Control 1. RequiredFieldValidator Server Control: yêu cầu người dùng bắt buộc phải nhập liệu Cú pháp:
45. V. Validation Server Control Thuộc tính ◼ ControlToValidate: nhận một ID của một control khác ở trên form để kiểm tra nhập liệu. ◼ Display: có ba giá trị : none, static, dynamic. thể hiện thông báo động hay tỉnh. ◼ EnableClientScript: nhận true thì hiểu các script ở phía client, false thì không. ◼ ErrorMessage: dòng thông báo khi dữ liệu không hợp lệ. ◼ Initialvalue: giá trị khởi tạo
46. V. Validation Server Control Các sự kiện ◼ DataBinding() ◼ Disposed() ◼ Int() ◼ Load(): Lập trình sự kiện này là để đặt giá trị ban đầu cho control. ◼ PreRender() ◼ Unload()
47. V. Validation Server Control Ví dụ: thiết kế form có dạng như sau, khi click nút submit, nếu chưa nhập tên thí xuất hiện thông báo lỗi
48. Mã chương trình Enter Your Name:
49. V. Validation Server Control 2. Range Validator Server Control: 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 cho trước, giới hạn này có thể là các hằng đượ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
50. V. Validation Server Control Cú pháp:
51. V. Validation Server Control Thuộc tính: ◼ minimumValue, maximumValue: khoảng giới hạn giá trị nhập liệu ◼ ControlToValidate: chứa ID của một control khác ở trên form để kiểm tra giới hạn nhập liệu. ◼ Display: có giá trị none, static, dynamic. Chọn kiểu thể hiện thông báo.
52. V. Validation Server Control 3. RegularExpressionValidator Server Control: 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: − Telephone numbers − Postal codes − E-mail addresses
53. V. Validation Server Control ❑ Thuộc tính: ValidationExpression: Khung của biểu thức mẫu để so sánh kiểm tra ❑ Cú pháp: *
54. V. Validation Server Control 4. CompareValidator Server Control: So sánh dữ liệu nhập với một trị trong một control khác hoặc một hằng được cho trước khi thiêt kế hoặc một giá trị trong dữ liệu. Các phép toán so sánh >,>=,
55. V. Validation Server Control Thuộc tính ◼ ControlToCompare: chứa ID của một control mà giá trị của control ID này sẽ so sánh với dữ liệu của một control khác ◼ ControlToValidate: chứa ID của một control mà dữ liệu của control này được so sánh vớI dữ liệu của control ở thuộc tính trên. ◼ Operator: Toán tử so sánh ◼ Type : Kiểu dữ liệu để so sánh gồm (String, Integer, Date, Double, Currency) ◼ ValueToCompare: chứa giá trị so sánh hằng
56. V. Validation Server Control Các sự kiện ❑ DataBinding() ❑ Disposed() ❑ Int() ❑ Load(): Lập trình sự kiện này là để đặt giá trị ban đầu cho control. ❑ PreRender() ❑ Unload()
57. V. Validation Server Control 5. CustomValidator Server Control 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 đó, hay một kiểu dữ liệu được người sử dụng định nghĩa trước đó. CustomValidator Server Control có thể kiểm tra hợp lệ cả phía client và server
58. V. Validation Server Control Thuộc tính ◼ ClientValidationFunction: thuộc tính này nó chứa một tên hàm, mà hàm này được lập trình ở client (bằng javascript). ◼ ControlToValidate: Nhận ID của một control trên form để kiểm tra dữ liệu.
59. V. Validation Server Control Các sự kiện ◼ DataBinding() ◼ Disposed() ◼ Int() ◼ Load(): Lập trình sự kiện này là để đặt giá trị ban đầu cho control. ◼ PreRender() ◼ ServerValidate(): sự kiện này được lập trình trên server để kiểm tra tính hợp lệ của dữ liệu. ◼ Unload()
60. V. Validation Server Control Ví dụ: thiết kế form như sau, yêu cầu kiểm tra số Pin
61. //Mã giao diện User ID: PIN: Invalid PIN number!
62. //hàm ServerVerify kiểm tra trên server void ServerVerify(Object Sender, ServerValidateEventArgs Value) { if (txtPIN.Text == "A999") Value.IsValid = true; else Value.IsValid = false; }
63. V. Validation Server Control 6. ValidationSummary Server Control: tập hợp các thông báo lỗi từ tất cả các điều khiển trên một trang Cú pháp:
64. V. Validation Server Control Thuộc tính ◼ DisplayMode: cung cấp 3 định dạng hiển thị Messagebox: List ,BulletList, SingleParagraph HeaderText: Dòng tiêu đề cho thông báo của các control. ◼ ShowMessageBox : True thì hiện thông báo động, False thì hiện thông báo tĩnh. ◼ ShowSummary: True là hiện thị control này khi chạy ứng dụng , False thì không (thường dùng nhất.)
65. V. Validation Server Control Các sự kiện ◼ DataBinding() ◼ Disposed() ◼ Int() ◼ Load(): Lập trình sự kiện này là để đặt giá trị ban đầu cho control. ◼ PreRender() ◼ Unload()