WEB SERVER CONTROL - giakhoa.files.wordpress.com = "_blank"; Kết qu ả: 16 ... 31 Điều khi ển ki ... Nếu ch ọn giá tr ịcủa thu ộc tính Operator =

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


6


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


13


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


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


ListboxDropdownList

17


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


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


Ví dụ: Nhấn nút Chọn � hiển thị danh sách địadanh được chọn

21


Thêm item cho listbox

22


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


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


Ví dụ:

26


27


28


29


rfvNhap_lai.Display = Static

30


rfvNhap_lai.Display = Dynamic

31


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


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


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


43


44


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


Bước 1: Tạo Calendard vào trang

61


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


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


69


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


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


80


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

Documents

WEB SERVER CONTROL - giakhoa.files.wordpress.com = "_blank"; Kết qu ả: 16 ... 31 Điều khi ển ki ... Nếu ch ọn giá tr ịcủa thu ộc tính Operator =