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...
-
Upload
hoc-lap-trinh-web -
Category
Documents
-
view
5.998 -
download
6
description
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/1.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/2.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/3.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/5.jpg)
Đ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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/6.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/7.jpg)
Đ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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/8.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/9.jpg)
Đ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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/10.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/11.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/12.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/13.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/14.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/15.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/16.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/17.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/18.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/19.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/20.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/21.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/22.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/23.jpg)
Đ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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/24.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/25.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/26.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/27.jpg)
Đ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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/28.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/29.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/30.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/31.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/32.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/33.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/34.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/35.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/36.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/37.jpg)
Đ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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/38.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/39.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/40.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/41.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/42.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022013114/5480c58fb37959442b8b5c9f/html5/thumbnails/43.jpg)
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