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

pdf54 trang | Chuyên mục: HTML | Chia sẻ: dkS00TYs | Lượt xem: 2499 | Lượt tải: 3download
Tóm tắt nội dung Server control, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
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:

  • pdfBài 3 - Server Control.pdf