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ứuFile đính kèm:
Bài 3 - Server Control.pdf

