View
219
Download
3
Category
Preview:
Citation preview
WEB SERVER CONTROL
2
NỘI DUNG
Điều khiển cơ bản chuẩn – Standard
Điều khiển kiểm tra dữ liệu
Một số điều khiển khác
Đối tượng ViewState
3
Điều khiển cơ bản chuẩn – Standard
Lý do nên sử dụng Standard Web Control
Các thuộc tính chung
Label
TextBox
Image
Button, ImageButton, LinkButton
HyperLink
Listbox và DropdownList
Checkbox, RadioButton
CheckBoxList, RadioButtonList
4
Những lý do
Những lý do nên sửdụng ASP.NetStandard Web Control:
�Đơn giản
�Đồng nhất
�Hiệu quả
5
Các thuộc tính chung
6
Các thuộc tính chung
7
Label
lblA.Text = "Đây là chuỗi văn bản thường";
lblB.Text = "<B>Còn đây là chuỗi văn bản được in đậm</B>";
8
TextBox
Text: Nội dung chứa trong Textbox
TextMode:�SingleLine: Hiển thị và nhập liệu 1 dòng văn bản
�MultiLine: Hiển thị và nhập liệu nhiều dòng vănbản
�Password: Hiển thị dấu * thay cho các ký tự cótrong Textbox.
Rows: Số dòng văn bản được hiển thị khiTextMode = MultiLine
Maxlength: Qui định số ký tự tối đa đượcnhập vào cho TextBox
9
TextBox
Wrap: Quy định văn bản có được phép tựđộng xuống dòng khi kích thước ngang củacủa điều khiển không đủ để hiển thịMặc định là True - tự động xuống dòng
10
Image
ImageURL: Đường dẫn đến tập tin hình ảnhcần hiển thị.
AlternateText: Chuỗi văn bản sẽ hiển thị khitập tin được thiết lập trong thuộc tínhImageURL không hiển thị được
11
Image
ImageAlign: Vị trí hiển thị giữa hình và nộidung văn bản:
NotSet
Left
Middle
TextTop
Right
12
Button, ImageButton, LinkButton
13
Button, ImageButton, LinkButton
Các điều khiển này mặc định đều là các nútSubmit Button, mỗi khi được nhấn vào sẽPostBack về Server
Các thuộc tính chung
Ngoài ra còn có các thuộc tính ImageURL, ImageAlign và AlternateText như điều khiểnImage
14
HyperLink
ImageURL: Hình hiển thị trên điều khiển
Text: Chuỗi văn bản sẽ được hiển thị trên điều
khiển cả ImageURL và Text được thiết lập � thuộc
tính ImageURL được ưu tiên, thuộc tính Text sẽđược hiển thị như Tooltip
NavigateUrl: Đường dẫn cần liên kết đến
Target: Xác định cửa sổ sẽ hiển thị cho mối liên kết
� _blank: Hiển thị trang liên kết ở một cửa sổ mới
�_self: Hiển thị trang liên kết tại chính cửa sổ chứa liên kết
đó
�_parent: Hiển thị trang liên kết ở frame cha
15
HyperLink
Ví dụ:
hplASPNet.Text = "Trang chủ ASP.Net";
hplASPNet.ImageUrl = "~/Pictures/logoaspnet.jpg";
hplASPNet.NavigateUrl ="http://www.asp.net";
hplASPNet.Target = "_blank";
Kết quả:
16
Listbox và DropdownList
ListboxDropdownList
17
Listbox và DropdownList
AutoPostBack: điều khiển có được phép tự động
PostBack về Server khi chỉ số bị thay đổi? Mặc định
là False
Items: tập hợp chứa các mục chọn của điều khiển
Rows: chiều cao của ListBox theo số dòng hiển thị
SelectionMode: cách thức chọn các mục trong
Listbox
�Single: Chỉ được chọn một mục có trong danh sách
�Multiple: Cho phép chọn nhiều lựa chọn
18
Listbox và DropdownListTìm hiểu về tập hợp Items� Add: Thêm mục mới vào cuối danh sách
Items.Add(<String>);� Insert: Thêm mục mới vào danh sách tại một vị trí nào đó
Items.Insert(<index>,<String>);� Count: Trả về số mục (Item) có trong danh sách
Items.Count;
� Remove: Xóa đối tượng Item tại ra khỏi danh sách
Items.Remove(<Chuoi>);
Nếu có nhiều giá trị giống nhau trong danh sách, chỉ có mục chọn đầutiên bị xóa
� RemoveAt: Xóa một item tại vị trí index ra khỏi danh sách
Items.RemoveAt(<index>);
� Clear: xóa tất cả những Item có trong danh sách
Items.Clear();
19
Listbox và DropdownList
Xử lý mục chọn
�Selected: kiểm tra xem mục đó có được chọn
hay không
�SelectedIndex: chỉ số của mục được chọn
�SelectedItem: mục được chọn
�SelectedValue: giá trị của mục được chọn
Trong trường hợp chọn nhiều mục,
SelectedIndex, SelectedItem và SelectedValue sẽtrả về giá trị mục chọn đầu tiên.
20
Listbox và DropdownList
Ví dụ: Nhấn nút Chọn � hiển thị danh sách địadanh được chọn
21
Listbox và DropdownList
Thêm item cho listbox
22
Listbox và DropdownList
Xử lý cho nút nhấn
23
Checkbox, RadioButton
Checked: Cho biết trạng thái của mục chọn
TextAlign: Qui định vị trí hiển thị của điều khiển so với chuỗi văn bản
AutoPostBack: có được phép tự động PostBack vềServer khi các mục chọn thay đổi. Mặc định củathuộc tính này là False
GroupName (RadioButton): Tên nhómThuộc tính này được sử dụng để nhóm các điềukhiển RadioButton lại thành 1 nhóm
24
CheckBoxList, RadioButtonList
Dùng để tạo ra một nhóm CheckBox/Radio Button
Đây là điều khiển danh sách nên nó cũng có thuộc
tính Items chứa tập hợp các mục chọn nhưListBox/DropDownList
Các thuộc tính
�RepeatColumns: số cột hiển thị.
�RepeatDirection: hình thức hiển thị• Vertical: Theo chiều dọc
• Horizontal: Theo chiều ngang
�AutoPostBack: có được phép tự động PostBack về Server
khi các mục chọn của điều khiển bị thay đổi.
Mặc định là False
25
CheckBoxList, RadioButtonList
Ví dụ:
26
CheckBoxList, RadioButtonList
27
Điều khiển kiểm tra dữ liệu
28
Điều khiển kiểm tra dữ liệu
29
Điều khiển kiểm tra dữ liệu
rfvNhap_lai.Display = Static
30
Điều khiển kiểm tra dữ liệu
rfvNhap_lai.Display = Dynamic
31
Điều khiển kiểm tra dữ liệu
Required Field Validator
Compare Validator
Range Validator
Regular Expression Validator
Custom Validator
Validation Summary
32
Required Field Validator
Kiểm tra giá trị trong điều khiển phải đượcnhập
Thuộc tính
�InitialValue: Giá trị khởi động
Giá trị bạn nhập vào phải khác với giá trị của
thuộc tính này. Giá trị mặc định của thuộc tính
này là chuỗi rỗng
33
Compare ValidatorKiểm tra ràng buộc miền giá trị, kiểu dữ liệu, liênthuộc tính
Các thuộc tính�ControlToCompare: Tên điều khiển cần so sánh giá trị
Nếu chọn giá trị của thuộc tính Operator = DataTypeCheck thì không cần phải xác định giá trị chothuộc tính này
�Operator: Qui định phép so sánh, kiểm tra kiểu dữ liệu: Equal (Đây là giá trị mặc định), GreaterThan, GreaterThanEqual, LessThan, LessThanEqual, NotEqual, DataTypeCheck
�Type: Qui định kiểu dữ liệu để kiểm tra hoặc so sánh: String, Integer, Double, Date, Currency
�ValueToCompare: Giá trị cần so sánh
34
Range Validator
Điều khiển này được dùng để kiểm tra giá trị trong
điều khiển phải nằm trong đoạn [min-max]
Các thuộc tính
�MinimumValue: Giá trị nhỏ nhất
�MaximumValue: Giá trị lớn nhất
�Type: Xác định kiểu để kiểm tra dữ liệu. Có thể thực hiệnkiểm tra trên các kiểu dữ liệu sau:
• String
• Integer
• Double
• Date
• Currency
35
Regular Expression Validator
Kiểm tra giá trị của điều khiển phải theo mẫuđược qui định trước: địa chỉ email, số điệnthoại, mã vùng, số chứng minh thư…
Thuộc tính:
�ValidationExpression: Qui định mẫu kiểm tra dữliệu.
36
Regular Expression Validator
Bảng mô tả các ký hiệu thường sử dụng trongValidation Expression
37
Custom Validator
Cho phép tự viết hàm xử lý kiểm tra lỗi
Sự kiện
�ServerValidate: Đặt các xử lý kiểm tra dữ liệu
trong sự kiện này. Việc kiểm tra này được thực
hiện ở Server
38
Validation Summary
Hiển thị ra bảng lỗi - tất cả các lỗi hiện có trêntrang Web.
Nếu điều khiển nào có dữ liệu không hợp lệ, chuỗi thông báo lỗi - giá trị thuộc tínhErrorMessage của Validation Control sẽ đượchiển thị. Nếu giá trị của thuộc tínhErrorMessage không được xác định, thôngbáo lỗi đó sẽ không được xuất hiện trongbảng lỗi
39
Validation Summary
Các thuộc tính
�HeaderText: Dòng tiêu đề của thông báo lỗi
�ShowMessageBox: bảng thông báo lỗi có được
phép hiển thị như cửa sổ MessageBox hay không
40
Validation Summary
Các thuộc tính
�ShowSummary: Qui định bảng thông báo lỗi có
được phép hiển thị hay không
41
Điều khiển kiểm tra dữ liệu - Ví dụ
42
Điều khiển kiểm tra dữ liệu - Ví dụ
43
Điều khiển kiểm tra dữ liệu - Ví dụ
44
Điều khiển kiểm tra dữ liệu - Ví dụ
Thuộc tính Text của các điều khiển kiểm tra dữ liệu đều là: (*)
45
Một số điều khiển khác
Literal
AdRotator
Calendar
File Upload
Panel và PlaceHolder
MultiView
46
Literal
Tương tự như điều khiển Label
Điểm khác biệt chính giữa Label và Literal làkhi hiển thị nội dung lên trang web (lúc thihành), điều khiển Literal không tạo thêm mộttag Html nào cả, còn Label sẽ tạo ra một tag span (được sử dụng để lập trình ở phíaclient)
47
AdRotator
Tạo ra các banner quảng cáo cho trang web, nó tự động thay đổi các hình ảnh (đã đượcthiết lập trước) mỗi khi có yêu cầu, PostBackvề server
Thuộc tính
�AdvertisementFile: Tên tập tin dữ liệu (dưới
dạng xml) cho điều khiển
48
AdRotator
Cú pháp của tập tin Advertisement (*.xml)
<Advertisements>
<Ad><ImageUrl>Đường dẫn đến tập tin hình ảnh</ImageUrl>
<NavigateUrl>Đường dẫn đến liên kết</NavigateUrl><AlternateText>Chuỗi văn bản được hiển thị nhưTooltip</AlternateText><Keyword>Từ khóa dùng để lọc hình ảnh</Keyword>
<Impressions>Tần suất hiển thị của hình
ảnh</Impressions></Ad>
</Advertisements>
49
AdRotator
Lưu ý: Phải nhập đúng các giá trị trong tag như mẫu
trên, có phân biệt hoa thường
Trong đó:
ImageUrl: Đường dẫn đến một tập tin hình ảnh
NavigateUrl: Đường dẫn đến trang web sẽ được
liên kết đến khi người dùng nhấn vào hình ảnh đang
hiển thị
AlternateText: Giá trị này sẽ được hiển thị nếu nhưđường dẫn đến tập tin hình ảnh không tồn tại. Đối
với một số trình duyệt, tham số này được hiển thịnhư ToolTip của hình quảng cáo.
50
AdRotator
Keyword: phân loại các quảng cáo. Ta có thể lọc
các quảng cáo theo một điều kiện nào đó.
Impressions: tần suất hiển thị của hình ảnh. Giá trịnày càng lớn, khả năng hiển thị càng nhiều.
KeywordFilter: Được dùng để chọn lọc và hiển thịnhững hình quảng cáo có giá trị của tham sốKeyword = giá trị của tham số này
Target: Qui định cửa sổ hiển thị trang liên kết
�_blank: Trang liên kết sẽ được mở ở một cửa sổ mới.
�_self: Trang liên kết sẽ được mở ở chính cửa sổ chứađiều khiển.
�_parent: Trang liên kết sẽ được mở ở cửa sổ cha
51
AdRotator
Sự kiện:
�AdCreated: Xảy ra khi điều khiển tạo ra các
quảng cáo
52
AdRotator – Ví dụBước 1: Thiết kế giao diện
53
AdRotator – Ví dụBước 2: Tạo tập tin dữ liệu: Quangcao.xml
�Sử dụng chức năng Add New Item…
54
AdRotator – Ví dụNhập vào cú pháp qui định cho tập tin Quangcao.xml (theo cú pháp của tập tin Advertisement)
55
AdRotator – Ví dụBước 3: Thiết lập thuộc tính cho điều khiển
adQuangcao
�AdvertisementFile: Quangcao.xml
�Target: _blank (Khi nhấn vào sẽ hiển thị liên kết ởcửa sổ mới.)
�KeywordFilter: Không thiết lập (Hiển thị tất cả các
hình ảnh)
Bước 4: Thi hành ứng dụng
56
Calendar
Thuộc tính�DayHeaderStyle: hình thức hiển thị tiêu đề của
các ngày trong tuần
�DayStyle: hình thức hiển thị của các ngày trongđiều khiển
�NextPrevStyle: hình thức hiển thị của thángtrước/sau của tháng đang được chọn
�SelectedDayStyle: Qui định hình thức hiển thịcủa ngày đang được chọn
57
Calendar
Thuộc tính�TitleStyle: hình thức hiển thị dòng tiêu đề của
tháng được chọn
�TodayDayStyle: hình thức hiển thị của ngày hiệnhành (trên server)
�WeekendDayStyle: hình thức hiển thị của cácngày cuối tuần (thứ 7, chủ nhật)
�OtherMonthDayStyle: hình thức hiển thị của cácngày không nằm trong tháng hiện hành
58
Calendar
Sự kiện
�SelectionChanged: xảy ra khi bạn chọn một
ngày khác với giá trị ngày đang được chọn hiện
hành
�VisibleMonthChanged: xảy ra khi bạn chọn
tháng khác với tháng hiện hành
59
Calendar – Ví dụ
60
Calendar – Ví dụ
Bước 1: Tạo Calendard vào trang
61
Calendar – Ví dụ
Bước 2: Chọn Auto Format (Chọn mẫu địnhdạng)
62
Calendar – Ví dụXử lý sự kiện:
63
File Upload
Cho phép người sử dụng Upload file từ chínhứng dụng Web của mình. File sau khi Upload có thể lưu trữ ở 1 nơi nào đó có thể là trên ổcứng hay trong Database
Thuộc tính:
64
File UploadPhương thức:�Focus: chuyển focus vào control�SaveAs: lưu file được upload lên hệ thống
Thuộc tính PostedFile cho phép lấy thông tin từ File upload được bao bọc trong đối tượngHttpPostedFile
Lớp HttpPostedFile gồm các thuộc tính sau:�ContentLength: Lấy về kích thước của File Upload tính
theo byte
�ContentType: Lấy kiểu MIME của File Upload�FileName: lấy tên của file được upload
� InputStream: lấy về file đã upload (as a stream)
Lớp HttpPostedFile chỉ hỗ trợ phương thức�SaveAs: Cho phép bạn lưu file được upload lên hệ thống.
65
File Upload – Ví dụ
Nếu thành công
66
File Upload – Ví dụCode:
67
Panel và PlaceHolder
Dùng để chứa các điều khiển khác
Panel cho phép chúng ta kéo những điều khiển vào
bên trong nó lúc thiết kế, còn điều khiển PlaceHolder
thì không
Các thuộc tính:
�DefaultButton: định nghĩa một button mặc định trong panel
�Direction: hướng hiển thị nội dung trong panel
�GroupingText: trình bày Panel như 1 Fieldset với một chú
giải riêng biệt
�HorizontalAlign: chỉ ra hướng ngang thể hiện nội dung của
panel
�ScrollBars: bật/ tắt hiển thị scrollbars
68
Panel và PlaceHolder
69
Panel và PlaceHolder
70
MultiView
Cho phép ẩn hoặc hiện các phần khác nhaucủa trang khi, rất tiện ích khi tạo một TabPage
Điều khiển MultiView chứa đựng 1 hoặc nhiềuđiều khiển View, sử dụng Multiview để lựachọn các điều khiển View để trình bày
Thuộc tính
�ActiveViewIndex: chọn điều khiển View được
đưa ra hiển thị bằng chỉ số Index
�Views: lấy về tập hợp các điều khiển View chứa
đựng trong điều khiển MultiView
71
MultiView
Phương thức
�GetActiveView: lấy về thông tin của View được
lựa chọn
�SetActiveView: thiết lập View được hiên thị
Sự kiện:
�ActiveViewChanged: Xảy ra khi điều khiển View
được lựa chọn
72
MultiView – Ví dụ
73
MultiView – Ví dụTrên trang thiết kế tạo: 1 Multiview1 bên tronggồm 3 View (View1 View2, View3)
Tạo Control Menu1 từ nhóm Control Navigation : Gồm 3 Tab (Tab1, Tab2, Tab3)
�Tạo Control Menu vào Form
74
MultiView – Ví dụ�Chọn Edit Menu Item
75
MultiView – Ví dụ�Lần lượt khái báo thuộc tính:
• Các nhãn (Text) là: Tab 1, Tab 2, Tab 3
• Các giá trị (Value) tương ứng là: 0 , 1, 2
• Orientation: Horizaltal (Menu hướng ngang)
76
MultiView – Ví dụBổ sung nội dung vào các view tương ứng
77
MultiView – Ví dụXử lý sự kiện
78
Đối tượng ViewState
Lưu lại những thông tin của trang web sau khiweb server gởi kết quả về cho Client
Các trang web khi được tạo sẽ cho phép sửdụng đối tượng ViewState thông qua thuộctính EnableViewState = True.
Gán giá trị cho ViewState:
ViewState("Tên trạng thái") = <giá trị>;
Nhận giá trị từ đối tượng ViewState:
<biến> = ViewState("Tên trạng thái");
79
Đối tượng ViewState
80
Đối tượng ViewState
Về bản chất, các giá trị trong ViewState đượclưu trong một điều khiển hidden
Chọn chức năng View | Source từ browser
81
Trao đổi, thảo luận
Recommended