Server control
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 (<h>, <a>, <input> )
• 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
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ụ: 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 Button • Thường sử dụng để submit form • Phân loại: – Button – LinkButton – ImageButton • Sự kiện – Onclick() – OnserverClick() Button <asp:Button Text="Tính tổng" ID="btntinh" runat="server" onclick="btntinh_Click" /> <asp:LinkButton Text="Click ở đây" ToolTip="Gọi phương thức tính tổng" onclick="btntinh_Click" runat="server"/> <asp:ImageButton ImageUrl="~/hinh1.gif" onclick="btntinh_Click" runat="server" Height="74px" Width="82px" /> 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 () CheckBox Bạn chọn màu Đỏ Xanh <input type="submit" id="btnSubmit" value="Submit " runat="server" onserverclick="btnSubmit_Click" /> 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; } } 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() 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 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 ListControl • DropDownList • ListBox • CheckBoxList • RadioButtonList <asp:ListItem Value=”value” Text=“text”> 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. 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 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 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 ASP ControlHTML Cột 1 Cột 2 Cột 3 c1 c2 HTMLControl cột 1 Cột 2 Cột 3 BulletedList <asp:BulletedList runat="server" BulletStyle="Numbered" DisplayMode="Text" > Các Control đặt biệt • Panel • FileUpload • Calendar • AdRotator • Validation • Wizard 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 <asp:Panel ID="Panel1" runat="server" BackColor="#99FF66" BackImageUrl="~/hinh1.gif" BorderStyle="Groove" Height="339px" Width="620px"> 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 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 Calendar • Cú pháp: <asp:Calendar ID="calendar1" runat="server" FirstDayOfWeek="Monday" SelectedDate="2011-09-26" onselectionchanged="layngay"> • 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.<ToString() / ToShortDateString() / ToLongDateString()>; – .SelectedDate..ToString(); 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 <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/XMLFile.xml" Height="20" Width="30" /> Image/hinh1.gif Alt Text Validation • RequiredFieldValidator • Range Validator • RegularExpressionValidator • CompareValidator • CustomValidator • ValidationSummary RequiredFieldValidator • Ý nghĩa: Yêu cầu người dùng phải nhập liệu • Cú pháp: <asp:RequiredFieldValidator runat="server" ErrorMessage="Bạn phải nhập dữ liệu" ControlToValidate="txtsoa" Display="Dynamic" EnableClientScript = – true thì hiểu các script ở phía client – false thì không Initialvalue = Giá trị khởi tạo /> 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: <asp:RangeValidator id="RangeValidator1" runat="server“ errorMessage = "Content_Message" controlToValidate = " input_Control" display="static“ type = “Integer" minimumValue = minValue maximumValue = maxValue /> 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: <asp:RegularExpressionValidator runat="server" ErrorMessage="thông báo" ControlToValidate="Id của control cần kiểm tra " Display="Dynamic" ValidationExpression="biểu thức định dạng" /> • 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 ý: *, ? 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: <asp:CompareValidator runat="server" ErrorMessage="errormessage" ControlToValidate= " Id của control cần kiểm tra " ControlToCompare= " Id của control kiểm tra " Type="Integer" Operator="Equal" ValueToCompare= "giá trị" /> 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: <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="errormessage" ControlToValidate="tên ID cần kiểm tra" 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 (javascript) onservervalidate="CustomValidator1_ServerValidate" /> protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { if (args.Value.Length>5) { args.IsValid = true; } else { args.IsValid = false; } } 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. 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ị Tạo ứng dụng 2 3 1 5 • Viết code cho các 4 • Viết code cho sự kiện Onfinishbuttonclick 3.3. Client-Side Callback • Sinh viên tự nghiên cứu
File đính kèm:
- Bài 3 - Server Control.pdf