Bài giảng Thiết kế Website: Chương 5

KHOA CAO ĐẲNG THỰC HÀNH

THIẾT KẾ & LẬP TRÌNH WEBSITE (Chuyên ngành: Đồ Họa Đa Truyền Thông)

Chương 5: CÁC ĐIỀU KHIỂN TRONG ASP.NET

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

NỘI DUNG

1. Tổng quan về các controls

2. HTML Control

3. Web Server Controls

4. Validation Controls

5. Web User controls

6. Master Pages

7. Data Controls

2 2

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

1. TỔNG QUAN VỀ CÁC CONTROLS

3 3

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

2. HTML CONTROL

 HTML Control được tạo ra từ các tag HTML tĩnh thường được sử dụng lập trình ở phía client

Khi sử dụng HTML Control để lập trình phía Server ta gán thuộc tính runat="Server" cho HTML Control đó được gọi là HTML Server Control.

HTML Control trên Toolbox

4 4

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

2. HTML CONTROL

Để chuyển các HTML Control thành các HTML Server Control, ta chọn Run As Server Control từ menu ngữ cảnh hoặc gán thuộc tính runat=“Server” cho HTML Control

5 5

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Những lý do nên sử dụng Standard Web Control:

Đơn giản, tương tự như Windows Form Controls. Đồng nhất: Có các thuộc tính giống nhau  dễ tìm hiểu và sử dụng. Hiệu quả: Tự động phát sinh ra các tag HTML theo từng loại Browser

6 6

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Thuộc tính

Ý nghĩa

(ID)

Tên của điều khiển. Tên của điều khiển là duy nhất.

AccessKey Ký tự để di chuyển nhanh đến điều khiển - phím nóng.

Attributes

Tập hợp các thuộc tính của điều khiển HTML

BackColor Màu nền của điều khiển.

BorderColor Màu đường viền của điều khiển.

BorderStyle Kiểu đường viền của điều khiển.

BorderWidth Độ rộng của đường viền.

CssClass

Hình thức hiển thị của điều khiển qua tên CSS.

Enabled

Điều khiển có được hiển thị hay không. Mặc định là True.

Font

Font hiển thị cho điều khiển

ForeColor

Màu chữ hiển thị trên điều khiển

Chiều cao của điều khiển

Height

ToolTip

Dòng chữ sẽ hiển thị khi rê chuột vào điều khiển.

Width

Độ rộng của điều khiển.

7 7

Bảng liệt kê các thuộc tính chung của các Web control

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Được sử dụng để hiển thị và trình bày nội dung văn

3.1. Label bản, chấp nhận hiển thị nội dung với các tag HTML. Ví dụ:

lblA.Text = "Đây là chuỗi văn bản thường"; lblB.Text ="Còn đây là chuỗi được in đậm";

8 8

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Được dùng để nhập và hiển thị dữ liệu văn bản.

3.2 TextBox Các thuộc tính:

Text: Nội dung chứa trong Textbox TextMode:

SingleLine: Hiển thị và nhập liệu 1 dòng MultiLine: Hiển thị và nhập liệu nhiều dòng Password: Hiển thị dấu * thay cho các ký tự.

Rows: Số dòng hiển thị nếu textbox có nhiều dòng. Maxlength: Số ký tự tối đa được nhập Wrap: Văn bản có được phép tự động xuống dòng khi độ rộng của textbox không đủ.

9 9

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Được dùng để hiển thị hình ảnh lên trang Web.

3.3. Image Các thuộc tính:

ImageURL: Đường dẫn tập tin hình ảnh. AlternateText: Chuỗi văn bản sẽ hiển thị chú thích. ImageAlign: Vị trí hiển thị giữa hình và nội dung. NotSet,Left, Middle,TextTop,Right

10 10

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

3.4. Button, ImageButton, LinkButton

Mặc định là các nút Submit Button, khi được nhấn

vào sẽ PostBack về Server.

Các thuộc tính:

- Text: Chuỗi văn bản hiển thị trên điều khiển.

- CommandName: Tên lệnh được sử dụng trong sự kiện Command.

- Ngoài những thuộc tính trên, điều khiển ImageButton còn có các thuộc tính ImageURL, ImageAlign và AlternateText như điều khiển Image.

11 11

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo trang web với các điều khiển: Label, Textbox, Button thực hiện chức năng tính toán như sau:

Xử lý sự kiện: protected void btTinhtien_Click(object sender, EventArgs e) { int soluong=int.Parse(txtSoluong.Text ); int dongia=int.Parse(txtDongia.Text ); int Thanhtien=soluong * dongia; txtThanhtien.Text = Thanhtien.ToString(); }

12 12

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Được sử dụng để tạo ra các liên kết siêu văn bản.

3.5. HyperLink Các thuộc tính:

ImageURL: Tập tin ảnh hiển thị trên điều khiển. Text: Nhãn văn bản hiển thị trên điều khiển. 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 ở cửa sổ mới. _self: Hiển thị trang liên kết tại cửa sổ chứa liên kết _parent: Hiển thị trang liên kết ở frame cha.

13 13

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo trang web gồm 3 điều khiển Hyperlink

14 14

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Là điều khiển hiển thị danh sách lựa chọn, có thể

3.6. Listbox và DropdownList chọn một hoặc nhiều. Các thuộc tính:

+ AutoPostBack: Có tự động PostBack về Server khi chỉ số của mục chọn bị thay đổi. Mặc định False + Items: Tập chứa các mục chọn của điều khiển. thêm vào mục chọn qua thuộc tính ListItem Collection Editor. + Rows: Chiều cao của ListBox theo số dòng. + SelectionMode: Cách chọn các mục trong ListBox. Single: Chỉ chọn một mục có trong danh sách.

Multiple: Cho phép chọn nhiều mục.

15 15

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Items.Add();

Items.Insert(,);

Items.Count;

Items.Remove();

Items.RemoveAt();

Add: Thêm mục mới vào cuối danh sách Insert: Thêm mục mới vào danh sách tại một vị trí Count: Trả về số mục (Item) có trong danh sách. Remove: Xóa đối tượng Item tại ra khỏi danh sách. RemoveAt: Xóa item tại vị trí index khỏi danh sách. Clear: Xóa tất cả Item có trong danh sách.

Items.Clear();

Tập hợp Items 16 16

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Xử lý mục chọn

Thuộc tính Selected của đối tượng Items[i] để kiểm tra xem mục thứ i đó có được chọn hay không.

SelectedIndex: Cho biết chỉ số của mục được chọn. Trong trường hợp chọn nhiều mục SelectedIndex sẽ trả về chỉ số mục chọn đầu tiên.

SelectedItem: Cho biết mục được chọn. Trong trường hợp chọn nhiều mục, SelectedItem sẽ trả về mục chọn đầu tiên.

SelectedValue: Cho biết giá trị của mục được chọn. Trong trường hợp chọn nhiều mục, SelectedValue sẽ trả về giá trị mục chọn đầu tiên.

17 17

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo trang Web gồm 1 listbox, 2 label , 1 Button khi click nút chọn sẽ hiện tên các địa danh được chọn.

18 18

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

…….

Xử lý sự kiện: protected void Page_Load(. . . ) { if (!IsPostBack) { lstDiadanh.Items.Add("Vịnh Hạ Long"); lstDiadanh.Items.Add("Phan Thiết - Mũi Né"); lstDiadanh.Items.Add("Nha Trang"); int n = lstDiadanh.Items.Count; lbSoDD.Text = n.ToString(); } } protected void btChon_Click(. . .) { lbDiadanh.Text = ""; for (int i = 0; i <= lstDiadanh.Items.Count - 1; i ++) { if (lstDiadanh.Items[i].Selected) lbDiadanh.Text += "
" + lstDiadanh.Items[i].Value; } }

19 19

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

3.7. Checkbox, RadioButton Các thuộc tính

Checked: Trạng thái của mục chọn (chọn hay không) TextAlign: Vị trí của điều khiển so với chuỗi văn bản.

AutoPostBack: Có được tự động PostBack về Server khi các mục chọn bị thay đổi, mặc định là False. GroupName (RadioButton): Tên nhóm, thuộc tính này được sử dụng để nhóm các điều khiển RadioButton lại thành 1 nhóm.

20 20

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo trang web gồm Nhóm các RadioButton Giới tính, Thu nhập, Nhóm Checkbox Ngoại ngữ

21 21

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Kéo thả RadioButtonList (Hoặc CheckbocList) vào Form

3.8. CheckBoxList, RadioButtonList  Dùng để tạo ra một nhóm các CheckBox/Radio Button, Là điều khiển danh sách nên có thuộc tính Items chứa tập hợp các mục chọn như ListBox/DropDownList.  Các thao tác trên tập hợp Items, xử lý mục chọn cũng tương tự như ListBox/DropDownList. Tạo mới:

 Chọn Edit Items

22 22

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

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.

23 23

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo trang web gồm Nhóm RadioButton Thu nhập

Xử lý sự kiện: Private Sub rblThu_nhap_SelectedIndexChanged(…)…

lblThu_nhap.Text = "Bạn chọn thu nhập: " +

rblThu_nhap.SelectedItem.Text;

End Sub

24 24

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo trang web khi click nút Đăng ký thì hiện thị các thông tin được chọn.

25 25

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

3.9. Điều khiển Literal

Tương tự như điều khiển Label, Literal được sử

dụng để hiển thị chuỗi văn bản trên trang Web.

Điểm khác biệt là khi thi hành, Literal không tạo thêm tag Html, còn Label sẽ tạo ra tag span (được sử dụng để lập trình ở phía client).

26 26

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

Ví dụ:

Khi thiết kế.

Lệnh xử lý: protected void Page_Load(object sender, EventArgs e) { Label1.Text="Đây là chuỗi ký tự trong label"; Literal1.Text = " Đây là chuỗi ký tự trong Literial"; } Xem source: Đây là chuỗi ký tự trong label
Đây là chuỗi ký tự trong Literial

27 27

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

3.10. Điều khiển AdRotator Được dùng để tạo ra các ảnh quảng cáo (tại 1 vùng sẽ có nhiều ảnh, xuất hiện theo tuần xuất), nó tự động thay đổi các hình ảnh mỗi khi có yêu cầu (PostBack về server).

28 28

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Thuộc tính AdvertisementFile: Tên tập tin dữ liệu (dưới dạng xml) cho điều khiển. Cú pháp của tập tin Advertisement (*.xml)

Đường dẫn tập tin hình ảnh Đường dẫn liên kết Chuỗi văn bản Tooltip Từ khóa dùng để lọc hình ảnh Tần suất hiển thị của ảnh

Lưu ý: Các giá trị có phân biệt chữ Hoa chữ thường

29 29

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Sự kiện AdCreated: Xảy ra khi điều khiển tạo ra các quảng cáo

30 30

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo mẫu Quangcao sử dụng điều khiển AdRotator

Bước 1. Thiết kế giao diện

Bước 2. Tạo tập tin dữ liệu: Quangcao.xml Sử dụng chức năng Add New Item… từ thực đơn ngữ cảnh Chọn XML File trong hộp thoại Add New Item

31 31

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Nhập vào nội dung cho tập tin Quangcao.xml Pictures\Baihatviet.gif http://www.Baihatviet.net Web Nhạc bài hát việt Music 10

32 32

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Chuyển màn hình qua trang Data, nhập liệu trực tiếp: Click phải màn hình đang code chọn View Data Grid

33 33

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Bước 3. Thiết lập thuộc tính cho điều khiển adQuangcao

AdvertisementFile: Quangcao.xml Target: _blank KeywordFilter: Không thiết lập (Hiển thị tất cả ảnh)

Bước 4. Thi hành ứng dụng

34 34

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

3.11. Điều khiển Calendar

Dùng để hiển thị và cập nhật dữ liệu kiểu ngày

35 35

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Thuộc tính DayHeaderStyle: Tiêu đề của các ngày trong tuần

DayStyle: Các ngày trong điều khiển.

NextPrevStyle: Tháng trước/sau của tháng đang chọn.

SeleltedDayStyle: Ngày đang được chọn.

TitleStyle: Tiêu đề của tháng được chọn

TodayDayStyle: Ngày hiện hành (trên server).

WeekendDayStyle: Các ngày cuối tuần (thứ 7, chủ nhật)

OtherMonthDayStyle: Các ngày không nằm trong tháng hiện tại. -------- SelectedDate: Giá trị ngày được chọn trên điều khiển

36 36

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Sự kiện SelectionChanged: Sự kiện này xảy ra khi chọn một ngày VisibleMonthChanged: Xự kiện xảy ra khi chọn một tháng

37 37

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo Calendard trên trang web

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

Bước 2: Chọn mẫu định dạng: Click phải /Auto Format

38 38

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Xử lý sự kiện: protected void Page_Load(object sender, EventArgs e){ lbNgay.Text = "Hôm nay ngày " +

DateTime.Today.ToString ("dd/MM/yyyy");

} protected void Calendar1_SelectionChanged1( . . . .) { lbThongbao.Text ="Bạn đang chọn " +

Calendar1.SelectedDate.ToString("dd/MM/yyyy");

}

39 39

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

3.12. Điều khiển File Upload. Sử dụng Upload file từ chính ứng dụng Web. File sau khi Upload có thể lưu trữ ở 1 nơi nào đó trên webserver.

Thuộc tính

Ý nghĩa

Enable

Vô hiệu hoá điều khiển FileUpload.

FileBytes

Lấy nội dung file đã được upload như một mảng Byte.

FileContent Lấy nội dung của file đã được upload theo dòng dữ liệu

FileName

Lấy tên file được Upload

HasFile

Trả về giá trị true khi File được Upload

40 40

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Các phương thức:

Focus: Chuyển con trỏ đến điều khiển FileUpload. SaveAs: Cho phép lưu file được upload lên hệ thống.

41 41

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo điều khiển File Upload

Thiết kế và tạo FileUpload vào trang

lbThongbao.Text = "Đã upload thành công" ;

Xử lý sự kiện: protected void Button1_Click(object sender, EventArgs e) { string sTenfile ; //Tách lấy tên tập tin sTenfile = FileUpload1.FileName; //Thực hiện chép tập tin lên thư mục Upload FileUpload1.SaveAs(MapPath("~/Upload/" + sTenfile)); }

42 42

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

3.13. Điều khiển Panel và PlaceHolder  Sử dùng để chứa các điều khiển khác.  Thuộc tính Visible= True thì các điều khiển chứa bên trong sẽ được hiển thị và ngược lại. Tuy nhiên, điều khiển 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.

43 43

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Thuộc tính DefaultButton: Định nghĩa button mặc định trong panel (sẽ được thực hiện khi nhấn Enter) Direction: Thiết đặt hướng hiển thị nội dung được đưa ra trong panel:NotSet, LeftToRight, RightToLeft.

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:Center, Justify, Left, NotSet, Right. ScrollBars: Hiển thị scrollbars khi nội dung trong panel vượt quá kích thước: Auto, Both, Horizontal, None, Vertical.

44 44

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo trang sử dụng Panel

Thiết kế:

45 45

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

buletnghenghiep.Items.Add("Nghề "+i.ToString());

46 46

Xử lý sự kiện: protected void Page_Load(object sender, EventArgs e) { for (int i = 1; i < 100; i++) { } } protected void chkhtsothich_CheckedChanged(. . . .) { if (chksothich.Checked == true) panelsothich.Visible = true; else panelsothich.Visible = false; } protected void chkhtnghenghiep_CheckedChanged(. . . ) { if (chknghenghiep.Checked == true) panelnghenghiep.Visible = true; else panelnghenghiep.Visible = false; }

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Điều khiển MultiView chứa đựng 1 hoặc nhiều điều

3.14. Điều khiển hiển thị các trang – View và MultiView Cho phép ẩn hoặc hiện các phần khác nhau của trang Web, tiện ích khi tạo một TabPage để chia 1 trang web có độ dài lớn thành các phần để hiển thị. khiển View.

47 47

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Thuộc tính

 ActiveViewIndex: Lựa chọn điều khiển View được đưa ra hiển thị bằng chỉ số Index  Views: Cho phép lấy về tập hợp các điều khiển View chứa đựng trong điều khiển MultiView. Phương thức

 GetActiveView: Cho phép lấy về thông tin của điều khiển View được lựa chọn.  SetActiveView: Cho phép thiết lập điều khiển View được hiển thị. Sự kiện

 ActiveViewChanged:Khi điều khiển View được chọn

48 48

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Ví dụ: Tạo trang sử dụng MultiView

Thiết kế:

Tạo 1 Multiview1 gồm 3 View (View1 View2, View3) Tạo Control Menu1 gồm 3 Tab (Tab1, Tab2, Tab3)

Tạo Control Menu vào Form

49 49

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Chọn Edit Menu Item

Lần lượt khái báo các nhãn (Text) là: Tab 1, Tab 2, Tab 3 và các giá trị (Value) tương ứng là: 0 , 1, 2 Thuộc tính Orientation: Horizaltal (Menu hướng ngang)

50 50

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

Bổ sung nội dung vào các view tương ứng

51 51

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

3. WEB SERVER CONTROL

int index = int.Parse(e.Item.Value); MultiView1.ActiveViewIndex = index;

MultiView1.ActiveViewIndex = 0;

if (!IsPostBack){ }

Xử lý sự kiện:

52 52

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4. CÁC ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU-VALIDATION

4.1 Giới thiệu chung 4.2. Điều khiển Required Field Validator 4.3. Điều khiển Compare Validator

4.4. Điều khiển Range Validator

4.5. Điều khiển Regular Expression Validator

4.6. Điều khiển Custom Validator

4.7. Điều khiển Validation Summary

53 53

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.1. GIỚI THIỆU CHUNG

54 54

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.1. GIỚI THIỆU CHUNG

Mỗi khi PostBack về Server, trang Web luôn kiểm tra tính hợp lệ dữ liệu (nếu có yêu cầu khi thiết kế). Nếu dữ liệu không hợp lệ (bỏ trống, vi phạm miền giá trị, mật khẩu nhập lại không đúng, …), trang web sẽ không thể PostBack về Server.

55 55

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.1. GIỚI THIỆU CHUNG

Trang Dangky.htm với ngôn ngữ HTML & Javascript  Khó khăn trong thiết kế và lập trình (trên 100 dòng code)

56 56

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.1. GIỚI THIỆU CHUNG

Trang Dangkythanhvien.aspx với MS Visual studio chỉ còn là quan tâm đến các thuộc tính cần khai báo

57 57

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.2. ĐIỀU KHIỂN REQUIRED FIELD VALIDATOR

Dùng để kiểm tra giá trị trong điều khiển phải

Công dụng: được nhập. Để kiểm tra ràng buộc khác rỗng (Not null) Thuộc tính:

58 58

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.3. ĐIỀU KHIỂN COMPARE VALIDATOR

Để so sánh giá trị của điều khiển với giá trị của

Sử dụng điều khiển này để kiểm tra ràng buộc

Công dụng: điều khiển khác hoặc một giá trị được xác định trước. miền giá trị, kiểu dữ liệu, liên thuộc tính.

59 59

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.3. ĐIỀU KHIỂN COMPARE VALIDATOR

Thuộc tính:  ControlToCompare: Tên điều khiển cần so sánh.  ValueToCompare: Giá trị để so sánh  Operator: Qui định phép so sánh (=, >, >=, <, <=, <>), kiểm tra kiểu dữ liệu ( DataTypeCheck)  Type: Qui định kiểu dữ liệu để kiểm tra hoặc so sánh(String, Integer, Double, Date, Currency)

60 60

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.4. ĐIỀU KHIỂN RANGE VALIDATOR

Để kiểm tra giá trị trong điều khiển có nằm trong

Công dụng: đoạn [min-max] (kiểm tra ràng buộc miền giá trị).

61 61

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.4. ĐIỀU KHIỂN RANGE VALIDATOR

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ện kiểm tra trên các kiểu: String, Integer, Double, Date, Currency

62 62

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR

Công dụng: Để kiểm tra giá trị của điều khiển phải theo mẫu được qui định trước như: địa chỉ email, số điện thoại, mã vùng, số chứng minh thư, …

63 63

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR

Thuộc tính: ValidationExpression: Qui định mẫu kiểm tra dữ liệu

64 64

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR

Bảng mô tả các ký hiệu sử dụng trong Validation Expression

65 65

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.6. ĐIỀU KHIỂN CUSTOM VALIDATOR

Điều khiển này cho phép bạn tự viết hàm xử lý

Công dụng: 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. Ví dụ: Xử lý kiểm tra dữ liệu nhập tại điều khiển txtSoA có phải là số chẵn hay không.

66 66

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

Công dụng: Để hiển thị ra bảng lỗi - tất cả các lỗi hiện có trên trang 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ính ErrorMessage của Validation Control sẽ được hiển thị. Nếu giá trị của thuộc tính ErrorMessage không được xác định, thông báo lỗi đó sẽ không được xuất hiện trong bảng lỗi

67 67

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

Thuộc tính: - HeaderText: Dòng tiêu đề của thông báo lỗi - ShowMessageBox: Qui định bảng thông báo lỗi có được phép hiển thị như cửa sổ MessageBox hay không. - ShowSummary: Qui định bảng thông báo lỗi có được phép hiển thị hay không.

68 68

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

Ví dụ: Tạo trang Dangkykhachang Sử dụng các điều khiển ValidateControl để kiểm tra dữ liệu nhập trên các điều khiển có trong hồ sơ đăng ký khách hàng.

69 69

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

70 70

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

Thuộc tính Text của các điều khiển kiểm tra dữ liệu đều là: (*)

71 71

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

lblThong_bao.Text = "Đăng ký thành công";

Xử lý sự kiện: Private Sub butDang_ky_Click(…)… End Sub

72 72

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

Các thông báo lỗi xuất hiện qua hộp thoại khi dữ liệu nhập không hợp lệ:

73 73

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

Nếu tất cả đều hợp lệ

74 74

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

5. WEB USER CONTROLS

5.1 Giới thiệu

Khi kết hợp các control để tạo thành một control mới gọi là Web user control (UC)

 Sử dụng UC cũng giống như sử dụng thủ tục, hàm  khả năng tái sử dụng UC trên các trang web

 Phần mở rộng của UC là: .ascx

75 75

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

5. WEB USER CONTROLS

5.2 Tạo và sử dụng User control

Tạo mới User control:

 Tạo mới 1 Web user control

 Thiết kế giống như thiết kế 1 trang aspx

Chọn: Web User Control

Đặt tên: *.ascx

76 76

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

5. WEB USER CONTROLS

Sử dụng User control:

 Kéo và thả UC vào trang aspx, lúc đó trang aspx sẽ xuất hiện tag

<%@ Register . . %>

77 77

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

6. MASTER PAGES

6.1 Giới thiệu

 Master pages cho phép tạo 1 bố cục nhất quán trên các trang web trong cùng 1 website (tương tự template)

 Nội dung thể hiển trên trình duyệt là sự kết hợp giữa trang .master -master page và trang .aspx (hoặc .ascx) - content page

 Master page là tập tin có phần mở rộng .master

 Thao tác thiết kế: Giống như trang aspx, nhưng phải bổ sung ít nhất một điều khiển ContentPlaceHolder

78 78

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

6. MASTER PAGES Master page

Content page

Trang kết quả

79 79

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

6. MASTER PAGES

6.2 Tạo trang Master

 Bước 1: Tạo mới Item  chọn icon Master Page và đặt tên trang: *.master

80 80

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

6. MASTER PAGES

 Bước 2: Thiết kế bố cục chung (có thể sử dụng User control) và bổ sung ContentplaceHolder vào trang master

81 81

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

6. MASTER PAGES

6.3 Sử dụng trang Master

 Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng trang master

82 82

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

6. MASTER PAGES

 Bước 2: Thiết kế bổ sung nội dụng trên trang *.aspx (có thể kéo các User control vào)

83 83

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7. ĐIỀU LIÊN KẾT DỮ LIỆU–DATA SOURCE CONTROL

7.1 Điều khiển kết nối cơ sở dữ liệu

7.2 Điều khiển liên kết cơ sở dữ liệu

84 84

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1. ĐIỀU KHIỂN KẾT NỐI CSDL–DATA SOURCE CONTROL

 Là các điều khiển dùng để chứa nguồn dữ liệu được rút trích từ các hệ QT CSDL như: Access, SQLServer, XML, Ocracle . . .  Có các điều khiển Data-Source sau: SQLDataSource, Access Data Source, XML Data Source, . . .

85 85

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

 Dùng để kết nối CSDL trong các hệ quản trị CSDL SQLServer, Ocracle Server, . . .  Chọn đối tượng CSDL như Table, View, Procedure hay câu lệnh SQL và khai báo điều kiện lọc (Where) với nhiều cách như: Giá trị định sẳn, đối tượng Session, Request.Form, Request.QueryString . . .

Tạo kết nối Kéo điều khiển SQLDataSource từ Tollbox vào trang

Chọn Conigure Data Source 

86 86

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Nếu trước đó đã tạo kết nối thì chọn kết nối đã có. Ngược lại để tạo mới kết nối thì chọn New Connection

Tạo kết nối CSDL mới

87 87

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

 Chọn QTCSDL (Microsoft SQLServer)  Chọn Continue để tiếp tục

88 88

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Khai báo các thông số cho kết nối

Chọn Hệ QT CSDL

Chọn Tên Server

Chọn thông tin đăng nhập

Chọn tên CSDL

Đồng ý kết nối

Kiểm tra kết nối

89 89

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Đặt tên cho kết nối

Tên kết nối

90 90

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Xác định nguồn dữ liệu từ Table, View hay câu lệnh SQL có thể chỉ định điều kiện lọc dữ liệu, sắp xếp hay các chỉ định vcho xử lý thêm, xoá, sửa

Xác định nguồn dữ liệu Từ câu lệnh SQL hay Từ Table, View

Xác định điều kiện

Chỉ định sắp xếp

Các lệnh thê, xoá, sửa

91 91

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

 Chọn Test Query để kiểm tra kết quả nguồn dữ liệu.  Chọn Finish để hòan thành

92 92

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Điều khiển SQL DataSource và tham số Request.QueryString

thông qua đối

trực

tiếp

Để lọc dữ liệu theo điều kiện thì giá trị tham số có thể tượng được gán Request.Querystring (Truyền tham số qua liên kết)

Khi click vào liên kết trang có địa chỉ kèm theo tham số dạng: http://localhost:49222/ . . ./SachNXB.aspx?MaNXB=3

93 93

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Thực hiện: Tạo trang NhaXB.aspx là danh mục nhà xuất bản Chọn Edit Column từ GiridView Task

94 94

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

95 95

www.thayphet.net - phetcm@gmail.com © Dương Thành Phết

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Với các thuộc tính:

 HeaderText: Nhãn tiêu đề cột

 Text: Nhãn hiện thị trong tất cả các ô

 DatTextField: Giá trị từ 1 field chỉ định trong nguồn DL

 DataNavigateUrlFields: Danh mục tên các tham số ghi cách nhau bởi dấu ,

 DataNavigateUrlFormatting: Địa chỉ trang liên kết kèm tham số dạng: ~/SachNXB.aspx?MaNXB={0}

Giá trị tham số ghi dưới dạng chỉ số các tham số được khai báo trong DataNavigateUrlFields bắt đầu là 0 và cách nhau dấu ,

96 96

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Tạo trang hiện thị dữ liệu với nguồn dữ liệu có tham số qua liên kết (Request.QueryString).

Xác định nguồn dữ liệu, sau đó chọn Where để chỉ định điều kiện

97 97

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

98 98

Columns: Tên cột làm điều kiện Operator: Toán tử so sánh Source: Loại tham số (QueryString) QueryString field: Tên tham số đã truyền Chọn Add để chấp nhận thêm tham số

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

99 99

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Thi hành xem kết quả

100 100

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Điều khiển SQL DataSource và tham số Request.Form

Để lọc dữ liệu trong nguồn dữ liệu theo điều kiện với giá trị tham số là giá trị trên form. Thực hiện: Tạo trang Lietkesach.aspx gồm:

1 Textbox thuộc tính ID: MaNXB 1 Button thuộc tính PostbackURL:

~/Lietkesach.aspx (Chính trang thiết kế)

Tạo SqlDataSource với nguồn dữ liệu:

101 101

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Tạo SqlDataSource với nguồn dữ liệu như sau:

102 102

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

103 103

 Columns: Tên cột làm điều kiện  Operator: Toán tử so sánh  Source: Loại tham số (Form)  Form field: Tên tham số đã truyền (Tên Textbox)  Chọn Add để chấp nhận thêm tham số

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Điều khiển SQL DataSource và tham số là các Controls

thể khai báo

Có trong điều khiển tham số SqlDataSource mà giá trị được lấy từ điều khiển trình chủ. Ví dụ thiết kế trang SachtheoCD.aspx thực hiện liệt kê danh mục sách có chủ đề được chọn từ điều khiển DropdownList

104 104

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Thực hiện

Thiết kế Dropdownlist (ddlChude) từ Table Chude

Đặt thuộc tính

ID: ddlChude DataSourceID: SqlDataSource1 DataTextField: TenCD (Field hiện thị) AutoPostBack: True DataValuefield: MaCD (Field để truyền tham số)

105 105

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

GridView (GridView1) Với nguồn dữ liệu từ Table Sach

Và tham số điều kiện (Where)

106 106

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

 Columns: Tên cột làm điều kiện  Operator: Toán tử so sánh  Source: Loại tham số (Control)  ControlID: Tên tham số đã truyền  Chọn Add để chấp nhận thêm tham số

107 107

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Điều khiển SQL DataSource và Procedure

Ta có thể sử dụng điều khiển kết nối CSDL SqlDatasource để truy cập gọi Stored Procedure trong CSDL SQL Server. Ví dụ: Ta có Procedure Sachtheogia liệt kê các quyển sách với điều kiện Giá từ 2 tham số là Giatu và Giaden

Create Proc Sachtheogia @Giatu int, @Giaden Int as

Select * From sach Where Dongia Between @Giatu and @Giaden

108 108

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Khi cấu hình cho điều khiển SQLDataSource

Chọn loại nguồn dữ liệu là từ Procedure

109 109

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Chọn tên Procedure

110 110

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Xác định giá trị cho các tham số của Procedure

111 111

7.1.2 ĐIỀU KHIỂN ACCESS DATASOURCE

 Dùng để kết nối với cơ sở dữ liệu Access MDB).  Thực hiện Tạo AccessDataSource từ thanh Toolbox.

Chọn Configure Data Source . . .: Để thực hiện kết nối

112 112

7.1.2 ĐIỀU KHIỂN ACCESS DATASOURCE

Xác định nguồn dữ liệu và điều kiện tham số như SQLData Source

113 113

7.1.3 ĐIỀU KHIỂN XMLDATASOURCE

 Điều khiển XMLDataSource được sử dụng để kết nối CSDL định dạng XML.  Thực hiện: Tạo tập tin XML (DSSinhvien).

114 114

7.1.3 ĐIỀU KHIỂN XMLDATASOURCE

Tạo XMLDataSource từ Toolbox.

Chọn Configure Data Source . . .: Để thực hiện kết nối

115 115

7.1.3 ĐIỀU KHIỂN XMLDATASOURCE

Chọn tập tin XML.  Chọn OK để hoàn tất

116 116

7.2. ĐIỀU KHIỂN LIÊN KẾT CƠ SỞ DỮ LIỆU

7.2.1 Gridview

7.2.2 DataList

7.2.3 Repeater

7.2.4 Detailview & FormView

117 117

7.2.1 GRIDVIEW

 Giới thiệu:

- GridView là một điều khiển khá linh hoạt và hiệu quả trong việc hiển thị, định dạng và thao tác với dữ liệu.

- Cho phép thực hiện sắp xếp dữ liệu, phân trang với sự hỗ trợ khá tốt của Visual .Net trong quá trình thiết kế.

118 118

7.2.1 GRIDVIEW

 Tạo GridView vào trang

Kéo Control GridView vào trang

119 119

7.2.1 GRIDVIEW

Chọn những mẫu định dạng có sẳn Gridview

 Định dạng tự động bằng cách Chọn Auto Format từ khung Gridview Task

120 120

7.2.1 GRIDVIEW

Thực hiện kết nối nguồn dữ liệu với cơ sở dữ liệu

Tại mục Choose Data Source: New Data Source

 Kết nối nguồn dữ liệu SQLServer, Access, XML. . (Hoặc chọn Datasource đã được tạo trước đó)

Ghi chú: Tạo Datasource như được trình bày trước

121 121

7.2.1 GRIDVIEW

Thi hành xem kết quả:

122 122

7.2.1 GRIDVIEW

Thêm cột Trong cửa sổ Gridview Task chọn : Add New Column

 Chọn Loại field : BoundField  Tiêu đề côt : Header Text  Tên field dữ liệu: DataField  Ok hòan thành

123 123

7.2.1 GRIDVIEW

 Hiệu chỉnh các cột Trong cửa sổ Gridview Task chọn : Edit Column

124 124

7.2.1 GRIDVIEW

AvailableFields: Chọn lọai Field liên kết dữ liệu

BoundField: Cột dạng Textbox.

Checkbox Field: Cột dạng Checkbox.

Hyperlink Field: Cột dạng liên kết.

Button Field: Cột dạng nút lệnh

CommandField: Cột dạng nút lệnh được thiết kế sẵn

Select: Nút lệnh chọn dòng dữ liệu

Edit, Cancel, Update: Các nút cập nhật d.liệu

Delete: Nút lệnh xóa dòng dữ liệu

TemplateField: Cột do người dùng tự thiết kế.

125 125

7.2.1 GRIDVIEW

BoundColumn properties: Thông tin chi tiết cho các cột

HeaderText, Footer Text: Tiêu đề trên/dưới của cột

Header Image: Hình hiển thị trên tiêu đề cột.

Sort Expression: Biểu thức sắp xếp của cột.

Visible: Qui định cột có được hiển thị hay không.

DataField: Qui định tên field dữ liệu cần hiển thị.

Data formatting expression: Biểu thức định dạng

{0:}.

Vd: {0:000.00}, {0:0.##}

{0:dd/MM/yyyy}, {0:hh/mm/ss tt} Convert this Field into a Template Column: Chuyển cột hiện hành thành cột dạng Template Column.

126 126

7.2.1 GRIDVIEW

 Thiết lập các thuộc tính định dạng lưới Chọn GridView  Properties

- ShowHeader/ShowFooter: Hiện / Ẩn Phần đầu và chân của GridView

127 127

7.2.1 GRIDVIEW

- HeaderStyle/FooterStyle: Định dạng dòng Header/Footer

128 128

7.2.1 GRIDVIEW

- RowStyleAlternatingRowStyle: Định dạng dòng dữ liệu lẽ/chẵn:

129 129

7.2.1 GRIDVIEW

- AlowPaging : Phân trang

Page size:Qui định số dòng/trang

Possition: Qui định vị trí hiển thị của bộ nút di chuyển. Mode: Qui định hình thức thị của bộ nút di hiển chuyển.

130 130

7.2.1 GRIDVIEW

- AllowSorting: Sắp xếp

131 131

7.2.2 ĐIỀU KHIỂN DATALIST

 Giới thiệu: Như điều khiển Gridview, điều khiển DataList được sử dụng để hiển thị dữ liệu. Tuy nhiên, đối với DataList, chúng ta phải tự thiết kế hình thức hiển thị dữ liệu (giống như Template Column của GridView)

132 132