Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm...

43
Bài 2: Hướng dẫn làm việc với các điều khiển

description

1. Điều khiển 2. Làm việc với điều khiển Web Server

Transcript of Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm...

Page 1: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Bài 2:Hướng dẫn làm việc với các điều khiển

Page 2: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

ASP.NET và các khái niệm cơ bảnPhát triển ứng dụng ASP.NETKiểm thử và gỡ lỗi ứng dụng

Hệ thống bài cũ

Hướng dẫn làm việc với các điều khiển 2

Page 3: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Mục tiêu bài học

1. Điều khiển

Hướng dẫn làm việc với các điều khiển 3

2. Làm việc với điều khiển Web Server

Page 4: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Hướng dẫn làm việc với các điều khiển 4

Page 5: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Điều khiển

Một thành phần quan trọngđể tạo ra các Web Form làđiều khiểnĐiều khiển sử dụng để:

Xây dựng giao diện đồ họacho ứng dụngHiển thị dữ liệu cho ngườidùngCho phép người dùng tươngtác với Web Form: nhập liệu,chuyển trang…

Hướng dẫn làm việc với các điều khiển 5

Một thành phần quan trọngđể tạo ra các Web Form làđiều khiểnĐiều khiển sử dụng để:

Xây dựng giao diện đồ họacho ứng dụngHiển thị dữ liệu cho ngườidùngCho phép người dùng tươngtác với Web Form: nhập liệu,chuyển trang…

Page 6: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

ASP.NET cung cấp hai loại điềukhiển sau

Điều khiển Web ServerĐiều khiển HTML

Các loại điều khiển trong ASP.NET

Các điều khiểnWeb server

Các điều khiểnHTML

ASP.NET cung cấp hai loại điềukhiển sau

Điều khiển Web ServerĐiều khiển HTML

Hướng dẫn làm việc với các điều khiển 6

Các điều khiểnHTML

Máy client

HTML Request

HTML Response

Trình duyệt Web xử lý HTML Responsevà hiển thị giao diện trang web

Server Web

Server CSDL

Page 7: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Điều khiển Web ServerĐược thực thi như mã kịch bản phía serverASP.NET cung cấp các lớp để làm việc với các điều khiển.Các lớp này nằm trong namespace:System.Web.UI.WebControlsNgoài các điều khiển nhập liệu quen thuộc như textbox,label, button…còn có các điều khiển sử dụng cho mục đích đặc biệt như:calender, Menu, Treeview….

Điều khiển Web Server

Điều khiển Web ServerĐược thực thi như mã kịch bản phía serverASP.NET cung cấp các lớp để làm việc với các điều khiển.Các lớp này nằm trong namespace:System.Web.UI.WebControlsNgoài các điều khiển nhập liệu quen thuộc như textbox,label, button…còn có các điều khiển sử dụng cho mục đích đặc biệt như:calender, Menu, Treeview….

Hướng dẫn làm việc với các điều khiển 7

Page 8: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Cú pháp<asp:control_name id="some_id" runat="server" />

Các tính năng cung cấp bởi điều khiển Web Server:Phát hiện trình duyệtSử dụng Template (học trong bài 5)Sử dụng theme (học trong bài 5)

Điều khiển Web Server

Cú pháp<asp:control_name id="some_id" runat="server" />

Các tính năng cung cấp bởi điều khiển Web Server:Phát hiện trình duyệtSử dụng Template (học trong bài 5)Sử dụng theme (học trong bài 5)

Hướng dẫn làm việc với các điều khiển 8

Page 9: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Điều khiển HTMLKhông được thực thi trên Server.Để nhận diện như một điều khiển trên server, phải thiếtlập giá trị “server”: cho thuộc tính runat của điều khiểnCú pháp giống như các phần tử HTML chuẩnVí dụ textbox <input id =“txtProductName type =“text”/>Không cung cấp nhiều tính năng như điều khiển WebServer

Điều khiển HTML

Điều khiển HTMLKhông được thực thi trên Server.Để nhận diện như một điều khiển trên server, phải thiếtlập giá trị “server”: cho thuộc tính runat của điều khiểnCú pháp giống như các phần tử HTML chuẩnVí dụ textbox <input id =“txtProductName type =“text”/>Không cung cấp nhiều tính năng như điều khiển WebServer

Hướng dẫn làm việc với các điều khiển 9

Page 10: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Hướng dẫn làm việc với các điều khiển 10

Page 11: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Hai công cụ đắc lực khi làm việcvới điều khiển là:

ToolboxChứa các điều khiển được phântheo nhóm

Cửa sổ PropertiesDùng để thiết lập thuộc tính vàsự kiện cho điều khiển

Thêm một điều khiểnKéo điều khiển từ Toolbox vàomàn hình thiết kếThiết lập thuộc tính và sự kiệncho điều khiển sử dụng cửa sổProperties

Làm việc với các điều khiển

Nút hiển thị sựkiện

Nút hiển thị thuộctính

Hai công cụ đắc lực khi làm việcvới điều khiển là:

ToolboxChứa các điều khiển được phântheo nhóm

Cửa sổ PropertiesDùng để thiết lập thuộc tính vàsự kiện cho điều khiển

Thêm một điều khiểnKéo điều khiển từ Toolbox vàomàn hình thiết kếThiết lập thuộc tính và sự kiệncho điều khiển sử dụng cửa sổProperties

Hướng dẫn làm việc với các điều khiển 11

Danh sách thuộc tính/sựkiện

Page 12: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Toolbox

Tool box: Hỗ trợ việc tạo các điều khiển qua giao diệnđồ họa. Các điều khiển được sắp xếp theo nhóm

TextBoxDrop-down list

Image Button

Hướng dẫn làm việc với các điều khiển 12

Nhóm Standard gồm các điều khiển cơ bản dùng cho nhập liệu

LabelButton

Drop-down list

Radio button/ Radiobutton list

Check box

Textbox

Page 13: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Toolbox

SqlDataSource truy vấn dữ liệu từ CSDL

Hướng dẫn làm việc với các điều khiển 13

Nhóm Data chứa các điều khiển dùng để truyxuất và hiển thị giá trị từ CSDL

GridView: Hiển thị dữ liệu từsqlDataSource dưới dạng bảng

Page 14: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Toolbox

Hướng dẫn làm việc với các điều khiển 14

Nhóm Validation gồm các điềukhiển kiểm tra tính hợp lệ của dữliệu được nhập vào Web Form

RequiredFieldValidator

CompareValidator

Page 15: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Toolbox

SiteMapPath

Hướng dẫn làm việc với các điều khiển 15

Nhóm Navagation tạo menuđiều hướng

SiteMapPath

TreeView

Menu

Page 16: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Toolbox

Hướng dẫn làm việc với các điều khiển 16

Cung cấp các tính năng xácthực người dùng

Hỗ trợ sử dụng AJAX trong WebForm

Page 17: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Sử dụng để:Thiết lập thuộc tínhThêm sự kiện

Các thuộc tính thường dùngID, Text, Visible, Height,Width, Font, ForeColor,TabIndex

Cửa sổ Properties

Danh sách thuộc tính củađiều khiểnSử dụng để:

Thiết lập thuộc tínhThêm sự kiện

Các thuộc tính thường dùngID, Text, Visible, Height,Width, Font, ForeColor,TabIndex

Hướng dẫn làm việc với các điều khiển 17

Page 18: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Các sự kiện thường dùngClick: Các điều khiển button,image mapTextChanged: TextboxSelectedIndexChanged: Cácđiều khiển listCheckChanged: check box,radio button

Cửa sổ Properties

Danh sách sự kiện củamôt điều khiển

Các sự kiện thường dùngClick: Các điều khiển button,image mapTextChanged: TextboxSelectedIndexChanged: Cácđiều khiển listCheckChanged: check box,radio button

Hướng dẫn làm việc với các điều khiển 18

Page 19: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Nhóm Standard

Nhóm Điều khiển Tiền tốID

Mô tả

Điều khiểnnhập liệu

Label Lbl Hiển thị thông tin mô tả

TextBox txt Cho phép người dùng nhập&sửa giá trị văn bản

CheckBox Chk Bật tắt một lựa chọn

RadioButton Rdo Bật tắt một lựa chọn. Chỉ một radio button trong nhómđược chọn

Hướng dẫn làm việc với các điều khiển 19

Bật tắt một lựa chọn. Chỉ một radio button trong nhómđược chọn

Button Button Btn Gửi một trang để xử lý.Ba loại điều khiển này giống nhau về chức năng, chỉ khácnhau về cách hiển thị

ImageButton Ibtn

LinkButton Lbtn

Page 20: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Nhóm StandardNhóm Điều khiển Tiền

tố IDMô tả

Điều khiểnhiển thị dữliệu dướidạng danhsách

ListBox Lst Cho phép người dùng chọn một hoặc nhiều mục trongdanh sách

DropDownList Ddl Cho phép người dùng chọn một mục trong danh sách thả

CheckBoxList Cbl Bật hoặc tắt nhiều lựa chọn trong một danh sách các lựachọn.

RadioButtonList Rbl Bật hoặc tắt một lựa chọn. Chỉ có thể bật một radiobutton

Hướng dẫn làm việc với các điều khiển 20

BulletedList Blst Hiển thị một danh sách đánh theo số thứ tự hoặc theo kí

hiệu.

Điều khiểnkhác

HyperLink Hlnk Cho phép người dùng chuyển sang trang khác trong mộtứng dụng.

Image Img Hiển thị một hình ảnh.

Calender cln Hiển thị lịch và cho phép người dùng chọn một hoặcnhiều ngày.

FileUpload Upl Hiển thị một hộp văn bản và một nút cho phép ngườidùng duyệt tìm file muốn tải lên.

ImageMap imap Hiển thị một hình ảnh với một hoặc nhiều vùng có thểkích chọn.

Page 21: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Nội dung demo:Tạo Form gồm các điều khiển nhập liệu cơ bảnHiển thị thông báo khi người dùng nhập liệu và nhấn chuộtlên button

DemoĐiều khiển TextBox, Label, Button

Hướng dẫn làm việc với các điều khiển 21

Lúc ban đầu Sau khi người dùng nhập liệu và nhấn lên button

Page 22: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Các bước thực hiệnThêm các điều khiểnThiết lập thuộc tính cho điều khiểnsử dụng cửa sổ Properties

TextBox: ID, TextMode, TextMaxLengthLabel: ID, TextButton: ID, Text

Thêm sự kiện, viết mã xử lý sự kiện Click của điều khiểnbutton

Gán giá trị cho thuộc tính Text của Label

DemoĐiều khiển TextBox, Label, Button

Các bước thực hiệnThêm các điều khiểnThiết lập thuộc tính cho điều khiểnsử dụng cửa sổ Properties

TextBox: ID, TextMode, TextMaxLengthLabel: ID, TextButton: ID, Text

Thêm sự kiện, viết mã xử lý sự kiện Click của điều khiểnbutton

Gán giá trị cho thuộc tính Text của Label

Hướng dẫn làm việc với các điều khiển 22

Page 23: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Đoạn mã tạo Text box Password

DemoĐiều khiển TextBox, Label, Button

<asp:TextBox

ID="txtPassWord" runat="server"TextMode="Password">

</asp:TextBox>

Đoạn mã tạo Button Sign Up

Hướng dẫn làm việc với các điều khiển 23

<asp:Button

ID="btnSingUp" runat="server"onclick="btnSingUp_Click“ Text="Sign Up"/>

protected void btnSingUp_Click(object sender, EventArgs e){

lblMessage.Text = "Thank you for sign up <br/> The request isprocessing";

}

Đoạn mã xử lý sự kiện nhấn chuột vào button SignUp

Page 24: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Check Box Radio Button

Tiền tố cho ID Chk Rdo

Thuộc tính AutoPostPackCheckedTextWidth

AutoPostPackCheckedTextGroupName

Check Box, Radio Button

Thuộc tính/Sự kiện quan trọng

Thuộc tính AutoPostPackCheckedTextWidth

AutoPostPackCheckedTextGroupName

Sự kiện CheckedChange CheckedChange

Hướng dẫn làm việc với các điều khiển 24

Page 25: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Nội dung demoTạo trang sử dụng các check box và Radio buttonHiển thị nội dung của check box & radio button được chọn

DemoCheck Box, Radio Button

Hướng dẫn làm việc với các điều khiển 25

Lúc ban đầuSau khi người dùng chọn các check box,Radio button và nhấn Submit

Page 26: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Các bước thực hiệnThiết lập các thuộc tính chocác điều khiển sử dụng cửasổ Properties

Radio button: ID, Text,GroupName, CheckedCheckBox: ID, Text,Checked

Viết mã xử lý sự kiện

DemoCheck Box, Radio Button

Các bước thực hiệnThiết lập các thuộc tính chocác điều khiển sử dụng cửasổ Properties

Radio button: ID, Text,GroupName, CheckedCheckBox: ID, Text,Checked

Viết mã xử lý sự kiện

Hướng dẫn làm việc với các điều khiển 26

Page 27: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Đoạn mã xử lý sự kiện

DemoCheck Box, Radio Button

protected void btnSubmit_Click(object sender, EventArgs e){

Controls.Clear(); // Xóa toàn bộ điều khiển trên trangResponse.Write("You have chosen <br/>");

if (rdoFemale.Checked)Response.Write("Gender: " + rdoFemale.Text.ToString()+ "<br/>");

elseResponse.Write("Gender: " + rdoMale.Text.ToString() + "<br/>");

if (chkBlack.Checked || chkGreen.Checked || chkPink.Checked|| chkRed.Checked || hkYellow.Checked)

{Response.Write("Favourite Color: <br/>");if (chkRed.Checked)

Response.Write(chkRed.Text.ToString() + "<br/>");if (chkYellow.Checked)

Response.Write(chkYellow.Text.ToString() + "<br/>");if (chkPink.Checked)

Response.Write(chkPink.Text.ToString() + "<br/>");if (chkGreen.Checked)

Response.Write(chkGreen.Text.ToString() + "<br/>");if (chkBlack.Checked)

Response.Write(chkBlack.Text.ToString() + "<br/>");}

}

Kiểm tra radiobutton được chọntrong nhómGender

Hướng dẫn làm việc với các điều khiển 27

protected void btnSubmit_Click(object sender, EventArgs e){

Controls.Clear(); // Xóa toàn bộ điều khiển trên trangResponse.Write("You have chosen <br/>");

if (rdoFemale.Checked)Response.Write("Gender: " + rdoFemale.Text.ToString()+ "<br/>");

elseResponse.Write("Gender: " + rdoMale.Text.ToString() + "<br/>");

if (chkBlack.Checked || chkGreen.Checked || chkPink.Checked|| chkRed.Checked || hkYellow.Checked)

{Response.Write("Favourite Color: <br/>");if (chkRed.Checked)

Response.Write(chkRed.Text.ToString() + "<br/>");if (chkYellow.Checked)

Response.Write(chkYellow.Text.ToString() + "<br/>");if (chkPink.Checked)

Response.Write(chkPink.Text.ToString() + "<br/>");if (chkGreen.Checked)

Response.Write(chkGreen.Text.ToString() + "<br/>");if (chkBlack.Checked)

Response.Write(chkBlack.Text.ToString() + "<br/>");}

}

Kiểm tra cácCheck box đượcchọn

Page 28: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

List Control là các loại điều khiển biểu diễn thông tindưới dạng danh sách các ListItemNăm loại List Control:

Drop-down List (ddl)List Box (Lst)Radio Button List (rbl)Check Box List (cbl)Bulleted List (blst)

Làm việc với List Control

List box

Drop-downList

List Control là các loại điều khiển biểu diễn thông tindưới dạng danh sách các ListItemNăm loại List Control:

Drop-down List (ddl)List Box (Lst)Radio Button List (rbl)Check Box List (cbl)Bulleted List (blst)

Hướng dẫn làm việc với các điều khiển 28

List box

Radio Button List

Check Box ListBulleted List

Page 29: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Mô tảThuộctính

Items - Tập các đối tượng ListItem của điều khiển.- Trả về một đối tượng kiểu ListItemCollection

Rows - Số lượng Item được hiển thị trên List Box. Nếu tổng sốItem của List Box nhiều hơn giá trị này, sẽ xuất hiện thanhcuộn

SelectedIndex - Chỉ số của Item được chọn- Bằng -1 nếu không có Item nào được chọn- Nếu nhiều Item của List Box được chọn, trả về chỉ sốcủa Item đầu tiên

Thuộc tính/Sự kiệnquan trọng của List Control

- Chỉ số của Item được chọn- Bằng -1 nếu không có Item nào được chọn- Nếu nhiều Item của List Box được chọn, trả về chỉ sốcủa Item đầu tiên

SelectedValue - Giá trị của Item được chọn- Bằng xâu rỗng “” nếu không có Item nào được chọn- Nếu nhiều Item của List Box được chọn, trả về giá trịcủa Item đầu tiên

SelectionMode - Cho phép chọn nhiều Item trong một List Box hay không

Phươngthức

SelectedIndexChanged - Xảy ra khi người dùng chọn một Item mới trong List

Hướng dẫn làm việc với các điều khiển 29

Hai thuộc tính Rows & SelectionMode chỉ có trong List Box

Page 30: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

ListItem & ListItemCollection

ListItemCollection:Tập hợp các Item của List Control

Trong ví dụ: {Black, Red, Blue, Green}

ListItem:Một Item cụ thể của List Control

Ví dụ: Black hoặc Red hoặc Blue…

Hướng dẫn làm việc với các điều khiển 30

ListItemCollection:Tập hợp các Item của List Control

Trong ví dụ: {Black, Red, Blue, Green}

ListItem:Một Item cụ thể của List Control

Ví dụ: Black hoặc Red hoặc Blue…

Page 31: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Các thuộc tính quan trọng của ListItem:Text, Value, Selected

Các thuộc tính/phương thức quan trọng củaListItemCollection

Thuộc tính: CountPhương thức: Add, Insert, Remove, FindByValue…

Sinh viên tìm hiểu thêm trong sách giáo khoaHoặc http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listitemcollection.aspx

ListItem & ListItemCollection

Các thuộc tính quan trọng của ListItem:Text, Value, Selected

Các thuộc tính/phương thức quan trọng củaListItemCollection

Thuộc tính: CountPhương thức: Add, Insert, Remove, FindByValue…

Sinh viên tìm hiểu thêm trong sách giáo khoaHoặc http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listitemcollection.aspx

Hướng dẫn làm việc với các điều khiển 31

Page 32: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Hai cách thêm các Item cho List Control:Sử dụng Code C#Sử dụng “ListItem Collection Editor”

Thêm Item cho List Control

Hướng dẫn làm việc với các điều khiển 32

Page 33: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Tạo một điều khiển Drop-down List ddlDay chứa danhsách các ngày trong tuần sử dụng ListItem CollectionEditor

DemoThêm Item cho List Control

Các thuộc tính củatừng Item:- Selected: Thiết lậpItem này là Item đượcchọn trong List- Text: Nội dung đượchiển thị trên List Control- Value: Giá trị thực củaItem.

Hướng dẫn làm việc với các điều khiển 33

Thêm hoặc xóa mộtItem

Các thuộc tính củatừng Item:- Selected: Thiết lậpItem này là Item đượcchọn trong List- Text: Nội dung đượchiển thị trên List Control- Value: Giá trị thực củaItem.

Page 34: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Nội dung demo:Thêm Item cho ListControl sử dụng Code C#

DemoThêm Item cho List Control

protected void Page_Load(object sender, EventArgs e){

ddlDay.Items.Add(new ListItem("Sunday", "1"));ddlDay.Items.Add(new ListItem("Monday", "2"));ddlDay.Items.Add(new ListItem("Tuesday", "3"));ddlDay.Items.Add(new ListItem("Wednesday", "4"));ddlDay.Items.Add(new ListItem("Thursday", "5"));ddlDay.Items.Add(new ListItem("Friday", "6"));ddlDay.Items.Add(new ListItem("Saturday", "7"));

}

Hướng dẫn làm việc với các điều khiển 34

protected void Page_Load(object sender, EventArgs e){

ddlDay.Items.Add(new ListItem("Sunday", "1"));ddlDay.Items.Add(new ListItem("Monday", "2"));ddlDay.Items.Add(new ListItem("Tuesday", "3"));ddlDay.Items.Add(new ListItem("Wednesday", "4"));ddlDay.Items.Add(new ListItem("Thursday", "5"));ddlDay.Items.Add(new ListItem("Friday", "6"));ddlDay.Items.Add(new ListItem("Saturday", "7"));

}

Page 35: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Nội dung demo:Hiển thị nội dung của phần tử được chọn trên drop-downlist

DemoXử lý sự kiện/sử dụng các thuộc tính

Hướng dẫn làm việc với các điều khiển 35

Trước khi người dùng chọn một phần tử Sau khi người dùng chọn một phần tử

Page 36: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Các bước thực hiệnThiết lập thuộc tính AutoPostPack = trueViết hàm xử lý cho sự kiện người dùng chọn một Itemtrong listIn nội dung Text, giá trị, chỉ số của Item được lựa chọn lênmàn hình

DemoXử lý sự kiện/sử dụng các thuộc tính

Các bước thực hiệnThiết lập thuộc tính AutoPostPack = trueViết hàm xử lý cho sự kiện người dùng chọn một Itemtrong listIn nội dung Text, giá trị, chỉ số của Item được lựa chọn lênmàn hình

Hướng dẫn làm việc với các điều khiển 36

protected void ddlDay_SelectedIndexChanged(object sender, EventArgs e){

Controls.Clear();Response.Write("You selected a day on List Control <br/>");Response.Write("The day is " +ddlDay.SelectedItem.Text.ToString() + "<br/>");Response.Write("Index of selected Item is " +ddlDay.SelectedIndex + "<br/>");Response.Write("Value of selected Item is " +ddlDay.SelectedValue + "<br/>");

}

Page 37: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Điều khiển File Upload được thiết kế để cho phép ngườisử dụng upload file lên WebsiteThuộc tính/ Phương thức của lớp FileUpload

Điều khiển File Upload

Điều khiển File Upload được thiết kế để cho phép ngườisử dụng upload file lên WebsiteThuộc tính/ Phương thức của lớp FileUpload

Hướng dẫn làm việc với các điều khiển 37

Mô tảThuộc tính HasFile Giá trị True, người dùng chọn Upload File

FileName Tên file được Upload

PostedFile Đối tượng HttpPostedFile. Sử dụng kết hợp với thuộctính ContentLength để xác định kích thước của fileđược Upload

Phương thức SaveAs (string) Lưu file được Upload tới đường dẫn được chỉ định

Page 38: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Nội dung demoSử dụng điều khiển Upload chophép người dùng Upload Filelên một thư mục trên ổ đĩamáy tính

DemoSử dụng điều khiển File Upload

Sau khi người dùng chọn File Upload

Hướng dẫn làm việc với các điều khiển 38

Trước khi người dùng chọn File Upload

Sau khi người dùng chọn File Upload

File được Upload vào thư mục Uploadstrên ổ C

Page 39: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Các bướcTạo giao diện như hình bênViết hàm xử lý sự kiện Click của button

DemoSử dụng điều khiển File Upload

protected void btnUpload_Click(object sender, EventArgs e){

int sizeLimit = 5242880; // 5,242,880 is 5MBif (uplDemo.HasFile) // Kiểm tra người dùng đã upload file chưa{

if (uplDemo.PostedFile.ContentLength <= sizeLimit)// Kiểm tra chiều dài file Upload

{string path = "C:\\uploads\\" + uplDemo.FileName;uplDemo.SaveAs(path); // Lưu File tới đường dẫn được chỉ địnhlblMessage.Text = "File uploaded to " + path;

}else

lblMessage.Text = "File exceeds size limit.";}

}

Hướng dẫn làm việc với các điều khiển 39

protected void btnUpload_Click(object sender, EventArgs e){

int sizeLimit = 5242880; // 5,242,880 is 5MBif (uplDemo.HasFile) // Kiểm tra người dùng đã upload file chưa{

if (uplDemo.PostedFile.ContentLength <= sizeLimit)// Kiểm tra chiều dài file Upload

{string path = "C:\\uploads\\" + uplDemo.FileName;uplDemo.SaveAs(path); // Lưu File tới đường dẫn được chỉ địnhlblMessage.Text = "File uploaded to " + path;

}else

lblMessage.Text = "File exceeds size limit.";}

}

Page 40: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Sinh viên tìm hiểu thêm các điều khiển khác trong SGK:Điều khiển CalenderĐiều khiển Image Map

Các điều khiển khác

Hướng dẫn làm việc với các điều khiển 40

Page 41: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Các nội dung được học trong bàiĐiều khiển

Là một thành phần quan trọng để tạo ra giao diện WebForm, và cho phép người dùng tương tác với Web Form.Các loại điều khiển

Điều khiển Web Server– Thực thi như mã kịch bản phía Server– Cung cấp nhiều điều khiển cho mục đích đặc biệt:

Calendar, TreeView…– Cung cấp nhiều tính năng hơn điều khiển HTML Server

Điều khiển HTML server– Cú pháp giống như các phần tử HTML chuẩn– Chỉ được thực thi trên Server khi gán giá trị cho thuộc

tính runat bằng “server”

Tổng kết

Các nội dung được học trong bàiĐiều khiển

Là một thành phần quan trọng để tạo ra giao diện WebForm, và cho phép người dùng tương tác với Web Form.Các loại điều khiển

Điều khiển Web Server– Thực thi như mã kịch bản phía Server– Cung cấp nhiều điều khiển cho mục đích đặc biệt:

Calendar, TreeView…– Cung cấp nhiều tính năng hơn điều khiển HTML Server

Điều khiển HTML server– Cú pháp giống như các phần tử HTML chuẩn– Chỉ được thực thi trên Server khi gán giá trị cho thuộc

tính runat bằng “server”

Làm quen với ASP.NET 41

Page 42: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Làm việc với điều khiểnToolbox

Hỗ trợ việc tạo các điều khiển qua giao diện đồ họa.Các nhóm điều khiển trên toolbox

– Standard: gồm các điều khiển cơ bản dùng cho việcnhập liệu

– Data: Chứa các điều khiển dùng để truy xuất, cập nhật,hiển thị dữ liệu từ CSDL

– Validation: Chứa các điều khiển dùng để kiểm tra hợp lệcho dữ liệu đầu vào

– Navigation: Các điều khiển tạo menu– …..

Cửa sổ PropertiesDùng để thiết lập giá trị cho các thuộc tính của điều khiểnThêm phương thức xử lý sự kiện vào mã C#

Tổng kếtLàm việc với điều khiển

ToolboxHỗ trợ việc tạo các điều khiển qua giao diện đồ họa.Các nhóm điều khiển trên toolbox

– Standard: gồm các điều khiển cơ bản dùng cho việcnhập liệu

– Data: Chứa các điều khiển dùng để truy xuất, cập nhật,hiển thị dữ liệu từ CSDL

– Validation: Chứa các điều khiển dùng để kiểm tra hợp lệcho dữ liệu đầu vào

– Navigation: Các điều khiển tạo menu– …..

Cửa sổ PropertiesDùng để thiết lập giá trị cho các thuộc tính của điều khiểnThêm phương thức xử lý sự kiện vào mã C#

Làm quen với ASP.NET 42

Page 43: Bài 2: Hướng dẫn làm việc với các điều khiển - Giáo trình FPT - Có ví dụ kèm theo

Nhóm StandardĐiều khiển nhập liệu: Label, Textbox, radio button, checkboxButton: ImageButton, LinkButton, ButtonĐiều khiển hiển thị dữ liệu dưới dạng danh sách: Listbox,drop-down list, check box list, radio button list, bulleted listĐiều khiển khác: Hyperlink, Calendar, ImageMap,FileUpload, Image

Tổng kết

Nhóm StandardĐiều khiển nhập liệu: Label, Textbox, radio button, checkboxButton: ImageButton, LinkButton, ButtonĐiều khiển hiển thị dữ liệu dưới dạng danh sách: Listbox,drop-down list, check box list, radio button list, bulleted listĐiều khiển khác: Hyperlink, Calendar, ImageMap,FileUpload, Image

Làm quen với ASP.NET 43