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

Để nhận diện như một điều khiển trên server, phải thiết lập giá trị “server”: cho thuộc tính runat của điều khiển Cú pháp giống như các phần tử HTML chuẩn Ví dụ textbox Không cung cấp nh

Bài 2:

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

ASP.NET và các khái niệm cơ bản

Phát triển ứng dụng ASP.NET

Kiểm thử và gỡ lỗi ứng dụng

Hệ thống bài cũ

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

1 Điều khiển

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

Cho phép người dùng tương

tác với Web Form: nhập liệu,

Cho phép người dùng tương

tác với Web Form: nhập liệu,

chuyển trang…

ASP.NET cung cấp hai loại điều

Các điều khiển HTML

ASP.NET cung cấp hai loại điều

khiển sau

Điều khiển Web Server

Điều khiển HTML

Các điều khiển HTML

Máy client

HTML Request

HTML Response

Trình duyệt Web xử lý HTML Response

và hiển thị giao diện trang web

Server Web

Server CSDL

Đ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…

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ệt

Sử 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ệt

Sử dụng Template (học trong bài 5)

Sử dụng theme (học trong bài 5)

Điều khiển HTML

Khô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ết

lập giá trị “server”: cho thuộc tính runat của điều khiển

Cú pháp giống như các phần tử HTML chuẩn

Ví dụ textbox <input id =“txtProductName type =“text”/>Không cung cấp nhiều tính năng như điều khiển Web

Server

Điều khiển HTML

Điều khiển HTML

Khô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ết

lập giá trị “server”: cho thuộc tính runat của điều khiển

Cú pháp giống như các phần tử HTML chuẩn

Ví dụ textbox <input id =“txtProductName type =“text”/>Không cung cấp nhiều tính năng như điều khiển Web

Server

Hai công cụ đắc lực khi làm việc

với điều khiển là:

sự kiện cho điều khiển

Thêm một điều khiển

Kéo điều khiển từ Toolbox vào

màn hình thiết kế

Thiết lập thuộc tính và sự kiện

cho đ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ộc tính

Hai công cụ đắc lực khi làm việc

với điều khiển là:

sự kiện cho điều khiển

Thêm một điều khiển

Kéo điều khiển từ Toolbox vào

màn hình thiết kế

Thiết lập thuộc tính và sự kiện

cho điều khiển sử dụng cửa sổ

Properties

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

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

TextBox

Drop-down list Image Button

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

Label Button

Drop-down list Radio button/ Radio button list

Check box

Textbox

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

Nhóm Data chứa các điều khiển dùng để truy

xuất và hiển thị giá trị từ CSDL

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

Nhóm Validation gồm các điều

khiển kiểm tra tính hợp lệ của dữ

liệu được nhập vào Web Form

RequiredFieldValidator

CompareValidator

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

Hỗ trợ sử dụng AJAX trong Web Form

Sử dụng để:

Thiết lập thuộc tính

Thêm sự kiện

Các thuộc tính thường dùng

ID, Text, Visible, Height,

Width, Font, ForeColor,

ID, Text, Visible, Height,

Width, Font, ForeColor,

TabIndex

điều khiển list

CheckChanged: check box,

điều khiển list

CheckChanged: check box,

radio button

được chọn

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ác nhau về cách hiển thị

ImageButton Ibtn LinkButton Lbtn

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

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

hiệu.

Điều khiển

khá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ặc

nhiề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ười

dù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ể

Nội dung demo:

Tạo Form gồm các điều khiển nhập liệu cơ bản

Hiển thị thông báo khi người dùng nhập liệu và nhấn chuột

lên button

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

Các bước thực hiện

Thêm các điều khiển

Thiết lập thuộc tính cho điều khiển

Các bước thực hiện

Thêm các điều khiển

Thiết lập thuộc tính cho điều khiển

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

Demo Điều khiển TextBox, Label, 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 is processing";

}

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

Check Box Radio Button

Checked Text Width

AutoPostPack Checked

Text

GroupName

Check Box, Radio Button

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

Checked Text Width

AutoPostPack Checked

Text

GroupName

Nội dung demo

Tạo trang sử dụng các check box và Radio button

Hiển thị nội dung của check box & radio button được chọn

Demo Check Box, Radio Button

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

Các bước thực hiện

Thiết lập các thuộc tính cho

các điều khiển sử dụng cửa

sổ Properties

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

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

Demo Check Box, Radio Button

Các bước thực hiện

Thiết lập các thuộc tính cho

các điều khiển sử dụng cửa

sổ Properties

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

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

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

Demo Check Box, Radio Button

protected void btnSubmit_Click(object sender, EventArgs e)

{

Controls.Clear(); // Xóa toàn bộ điều khiển trên trang

Response.Write( "You have chosen <br/>");

if (rdoFemale.Checked)

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

else

Response.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 radio button được chọn trong nhóm

Gender

protected void btnSubmit_Click(object sender, EventArgs e)

{

Controls.Clear(); // Xóa toàn bộ điều khiển trên trang

Response.Write( "You have chosen <br/>");

if (rdoFemale.Checked)

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

else

Response.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ác Check box được chọn

List Control là các loại điều khiển biểu diễn thông tin

dưới dạng danh sách các ListItem

Nă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-down List

List Control là các loại điều khiển biểu diễn thông tin

dưới dạng danh sách các ListItem

Năm loại List Control:

Drop-down List (ddl)

List Box (Lst)

Radio Button List (rbl)

Check Box List (cbl)

Bulleted List (blst)

List box

Radio Button List

Check Box List Bulleted List

Mô tả Thuộc

tí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 thanh cuộ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ện quan 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ương

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

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

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…

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…

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ủa

ListItemCollection

Thuộc tính: Count

Phương thức: Add, Insert, Remove, FindByValue…

Sinh viên tìm hiểu thêm trong sách giáo khoa

Hoặ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ủa

ListItemCollection

Thuộc tính: Count

Phương thức: Add, Insert, Remove, FindByValue…

Sinh viên tìm hiểu thêm trong sách giáo khoa

Hoặc

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listitemcollection.aspx

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

Tạo một điều khiển Drop-down List ddlDay chứa danh

sách các ngày trong tuần sử dụng ListItem Collection

Editor

Demo Thêm Item cho List Control

Các thuộc tính của từng Item:

- Selected: Thiết lập Item này là Item được chọn trong List

- Text: Nội dung được hiển thị trên List Control

- Value: Giá trị thực của Item.

Thêm hoặc xóa một Item

Các thuộc tính của từng Item:

- Selected: Thiết lập Item này là Item được chọn trong List

- Text: Nội dung được hiển thị trên List Control

- Value: Giá trị thực của Item.

Nội dung demo:

Thêm Item cho ListControl sử dụng Code C#

Demo Thê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"));

}

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"));

}

Nội dung demo:

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

Demo

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

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ử

Các bước thực hiện

Thiết lập thuộc tính AutoPostPack = true

Viết hàm xử lý cho sự kiện người dùng chọn một Item

Thiết lập thuộc tính AutoPostPack = true

Viết hàm xử lý cho sự kiện người dùng chọn một Item

Response.Write("Index of selected Item is " + ddlDay.SelectedIndex + "<br/>");

Response.Write("Value of selected Item is " + ddlDay.SelectedValue + "<br/>");

}

Điều khiển File Upload được thiết kế để cho phép người

sử dụng upload file lên Website

Thuộ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ười

sử dụng upload file lên Website

Thuộc tính/ Phương thức của lớp FileUpload

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ộc

tí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

Nội dung demo

Sử dụng điều khiển Upload cho

phép người dùng Upload File

lên một thư mục trên ổ đĩa

máy tính

Demo

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

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

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 Uploads trên ổ C

Các bước

Tạo giao diện như hình bên

Viết hàm xử lý sự kiện Click của button

Demo

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

protected void btnUpload_Click(object sender, EventArgs e)

{ string path = "C:\\uploads\\" + uplDemo.FileName;

uplDemo.SaveAs(path); // Lưu File tới đường dẫn được chỉ định

lblMessage.Text = "File uploaded to " + path;

}

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

} }

protected void btnUpload_Click(object sender, EventArgs e)

{ string path = "C:\\uploads\\" + uplDemo.FileName;

uplDemo.SaveAs(path); // Lưu File tới đường dẫn được chỉ định

lblMessage.Text = "File uploaded to " + path;

}

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

} }

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

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 Web

Form, 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:

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 Web

Form, 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: