Bài tập thực hành ASP.NET

LAB01 – LÀM QUEN VỚI MICROSOFT VISUAL STUDIO 2005
1. Mục tiêu
- Làm quen với môi trường VS 2005
- Xây dựng ứng dụng web đơn giản
• Tạo Project WebApplication
• Thiết kế giao diện WebForm
• Viết mã lệnh xử lý đơn giản
• Chạy, Debug và sửa lỗi chương trình
- Ghi chú: Một số phím tắt khi làm việc
• Xem màn hình Desing Form: Shift+F7
• Chuyển từ Design sang Code: F7
• Chạy chương trình: Ctrl + F5 (hoặc F5 với chế độ Debug)
2. Xây dựng ứng dụng
2.1. Tạo Website Lab01
- Từ màn hình của VS2005 chọn FileNewWeb Site
• Template: ASP.NET Website
• Location: File SystemE:\BAITAPASPNET\Lap01
• Language: Visual Basic
- Kết quả:
* Cửa sổ Solution:

* Trang Default.aspx (ở chế độ Design)

1


* Trang Default.aspx (ở chế độ Source)

* Trang Default.aspx.vb (ở chế độ Code behide)

- Thiết kế trang theo mẫu ở cửa sổ Default.aspx (ở chế độ Design)

• Tạo Table
• Kéo thả các Control trong Toolbox vào trang Default.aspx như mẫu:

2


- Đặt thuộc tính cho các đối tượng trên WebForm như sau:

- Viết mã lệnh xử lý sự kiện bấm chuột vào các nút +, -, *, : như sau:
Protected Sub btcong_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
btcong.Click
Dim so1, so2, tong As Integer
so1 = Integer.Parse(txtson.Text)
so2 = Integer.Parse(txtsom.Text)
tong = so1 + so2
txtketqua.Text = tong.ToString()
End Sub
Protected Sub bttru_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
bttru.Click
Dim so1, so2, tong As Integer
so1 = Integer.Parse(txtson.Text)
so2 = Integer.Parse(txtsom.Text)
tong = so1 - so2
txtketqua.Text = tong.ToString()
End Sub
Protected Sub btnhan_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
btnhan.Click
Dim so1, so2, tong As Integer
so1 = Integer.Parse(txtson.Text)
so2 = Integer.Parse(txtsom.Text)

tong = so1 * so2
txtketqua.Text = tong.ToString()
End Sub
Protected Sub btchia_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
btchia.Click
Dim so1, so2, tong As Integer
so1 = Integer.Parse(txtson.Text)
3


so2 = Integer.Parse(txtsom.Text)
tong = so1 / so2
txtketqua.Text = tong.ToString()
End Sub

4


Protected Sub btxoa_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
btxoa.Click
txtson.Text = ""
txtsom.Text = ""
txtketqua.Text = ""
txtson.Focus()
End Sub
- Chạy kiểm thử chương trình:
• Kiểm tra lỗi trước khi chạy: BuildBuild Web site
• Chấp nhận chế độ Debug của Web site

- Chạy chương trình bấm Ctrl+F5 (không Debug), F5 (có Debug)

5


2.2. Thêm trang web vào cho dự án Website
- Tại cửa sổ Solution Explorer bổ sung cấu trúc Site như sau:

- Thêm vào thư mục Pages Trang Wellcom.aspx hiển thị nội dung như sau: với giá trị ngày, giờ là
ngày giờ hệ thống.

- Hướng dẫn viết Code:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles
Me.Load
lblNgay.Text = "Hom nay la ngay " + Date.Now.Day.ToString() + " Thang " +
Date.Now.Month.ToString() + " Nam " + Date.Now.Year.ToString()
lblThoigian.Text = "Bay gio la " + Date.Now.Hour.ToString() + " gio " +
Date.Now.Minute.ToString() + " phut " + Date.Now.Second.ToString() + " giay"
End Sub
- Thêm vào thư mục Pages trang Tinhtoan.aspx có giao diện như mẫu sau và thực hiện chức năng
tính tiền biết thành tiền = số lượng * đơn giá:

6


- Thêm vào thư mục Pages trang Thuchientinhtoan.aspx có giao diện theo mẫu và thực hiện chức
năng tính toán:

Yêu cầu:
• Sau khi nhập 2 số A và B thì nhấn nút A+B thì chương trình sẽ lấy giá trị A cộng với giá trị
B và hiển thị kết quả trong Label như trên hình (3+2=5).

• Tương tự khi nhấn vào các nút trừ, nhân, chia và chia lấy dư.
• Đối với phép chia và chia lấy dư thì kiểm tra cho trường hợp nhập số B là 0 thì hiển thị số
nhập vào không hợp lệ.

- Cửa sổ Solution Explorer khi thêm vào các trang trên:

---HẾT LAB01---

7


LAB02 – CÁC ĐỐI TƯỢNG TRONG ASP.NET
1. Mục tiêu
- Hiểu, biết và ứng dụng các đối tượng trong ASP.NET gồm Response, Request, Application,
Session, Server, Cookies và 2 tập tin Global.asax, Web.config.
- Xây dựng ứng dụng Web đơn giản để thực hiện công dụng của phương thức, thuộc tính, của các
đối tượng.
• Tạo Project Web Application
• Thiết kế giao diện WebForm
• Viết mã lệnh xử lý
2. Xây dựng ứng dụng
2.1. Thiết kế trang Default.aspx

- Trang Default.aspx ở chế độ Design

Có một điều khiển Hyperlink liên kết đến trang DangNhap.aspx
- Trang Default.aspx.vb
Sự kiện PageLoad cho hiển thị nội dung qua lệnh Response.Write
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles
Me.Load

Response.Write("Hom nay ngay " + Date.Now.Day.ToString() + " thang " +
Date.Now.Month.ToString() + " nam " + Date.Now.Year.ToString())
End Sub
2.2. Thiết kế trang DangNhap.aspx
- Yêu cầu:
• Khi nhập chính xác tên đăng nhập là hxkien và mật khẩu là 123456 khi đó kích vào nút đăng
nhập sẽ hiển thị trang Chaomung.aspx. Trên trang này hiển thị dòng thông báo: “Chao mung
ban <Tên đăng nhập> đã đến với ASP.Net” và liên kết về trang DangNhap.aspx.
• Khi kích vào liên kết “Quay về trang đăng nhập” thì hiển thị lại trang Dangnhap.aspx.
Trường hợp tên đăng nhập và mật khẩu sai thì thông báo lỗi “Tên đăng nhập hoặc mật khẩu
không hợp lệ”.

8


- Khi nhập tên đăng nhập hoặc mật khẩu sai thì sẽ xuất hiện thông báo:

- Khi nhập đúng tên đăng nhập và mật khẩu thì sẽ xuất hiện trang Chaomung.aspx như sau:

- Hướng dẫn viết Code:
• Để liên kết tới một trang khác khi nhập tên và mật khẩu đúng ta dùng đối tượng Response và
phương thức Redirect. Ví dụ muốn liên kết đến trang Chaomung.aspx ta viết:
Response.Redirect(“Chaomung.aspx”)
• Khi muốn truyền một hoặc nhiều giá trị cho trang đó, ví dụ ta muốn truyền tên đăng nhập
(tendn) hoặc mật khẩu (mk) ta viết:
Response.Redirect(“Chaomung.aspx?tendn=”+tendn)
Response.Redirect(“Chaomung.aspx?tendn=”+ tendn + “&matkhau=” + mk)
 Ta có thể viết lệnh cho Button Dang Nhap như sau:
Protected Sub btDangnhap_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles btDangnhap.Click

Dim tendn As String = txttendn.Text
Dim matkhaudn As String = txtmatkhaudn.Text
If (tendn = "hxkien" And matkhaudn = "123456") Then
Response.Redirect("Chaomung.aspx?tendn=" + tendn)
Else
lblthongbao.Text = "Ten dang nhap hoac mat khau khong hop le!"
End If
End Sub

9


•

Ở trang Chaomung.aspx để nhận giá trị từ trang Dangnhap.aspx truyền sang ta viết theo cú pháp

sTendn = Request.QueryString("tendn")
 Viết lệnh cho sự kiện Pageload của trang Chaomung.aspx
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
Dim sTendn As String
sTendn = Request.QueryString("tendn")
Response.Write("Chao mung ban " + "<b>" + sTendn + "</b>" + " da den voi
ASP.NET!")
End Sub

2.3. Tạo trang Downloadfile.aspx

- Yêu cầu:
• Khi kích vào liên kết “Kích vào đây để mở!” sẽ cho phép download file

“Tai_Lieu_Giang_Day_Asp.Net.pdf”
• Kích vào ảnh “Tải về” sẽ cho Download file Tai_Lieu_Giang_Day_Asp.Net.pdf.
- Hướng dẫn:
• Đối với liên kết “Kích vào đây để mở!” ta sử dụng điều kiển HyperLink với giá trị của thuộc
tính NavigateULR là tên tập tin cần Download.
• Đối với Link ảnh sử dụng ImageButton ta xử lý sự kiện Click như sau:
Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As
System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
Dim sTaptin As String = "Tai_Lieu_Giang_Day_Asp.Net.pdf"
Dim sDuongdan As String = Server.MapPath("~/") + sTaptin
Response.AddHeader("Content-Disposition", "filename=" + sTaptin)
Response.WriteFile(sDuongdan)
Response.End()
End Sub

2.4. Tạo trang Bantin.aspx

- Yêu cầu:
• Khi kích vào liên kết “Xem chi tiết” sẽ cho phép liên kết mở trang Chitietbantin.aspx đồng thời
có truyền một tham số MaBT có giá trị “Tin01”.
• Trang Chitietbantin.aspx sẽ nhận và hiển ra màn hình:

10


- Hướng dẫn:
• Để truyền tham số qua liên kết HyperLink “Xem chi tiết” trên trang Bantin.aspx ta khai báo
thuộc tính NavigateUrl: ~/Chitietbantin.aspx?MaBT=“Tin01”.
• Để nhận giá trị tham số qua URL của trang Chitietbantin.aspx ta viết:
Dim sTin As String = Request.QueryString(“MaBT”)

Response.Write(“Đây là nội dung chi tiết bản tin ” + sTin)
2.5. Tạo trang Thongke.aspx với giao diện trong hình
Yêu cầu: Hiển thị số người đang Online và tổng số lượt đã truy cập Website.

---HẾT LAB02---

11


LAB03 – THIẾT KẾ WEBFORM VỚI CÁC WEBSERVER CONTROL
1. Mục tiêu
- Thiết kế webForm với các điều khiển chuẩn.
- Thiết kế WebForm với một số điều khiển khác như: Adrotator, calendar, Fileupload, Panel,…
2. Xây dựng ứng dụng Web Server Control
2.1. Tạo trang Diadanhdulich.aspx
- Tạo Table và tạo các Server Control sau vào trang:

- Đặt thuộc tính cho các đối tượng trên WebForm như sau:

- Viết mã lệnh xử lý các sự kiện:
• Khi trang được Load thì thêm danh sách một số địa danh vào Listbox lstDiadanh và cho
biết tổng số địa danh vào Label lblsoDD.
• Khi đã load thì người dùng sẽ chọn một vài địa danh và kích chuột vào nút btChon thì
hiện thị các địa danh đã chọn vào Label lbDiadanh.
- Khi thi hành:

12


2.2. Tạo trang Thongtincanhan.aspx

- Sử dụng 1 Table, 1 Textbox, 2 RadioButton giới tính, 2 Checkbox ngoại ngữ, 3 RadioButton thu
nhập, 1 Label, 1 RadioButtonList trình độ, 1 Button đăng ký, được thiết kế và trình bày theo mẫu
sau:

- Đặt thuộc tính cho các đối tượng:

- Xử lý sự kiện:
Tùy theo giá trị nhập và chọn lựa của người dùng, sau khi kích vào nút Đăng Ký thì hiển thị
kết quả vào Label lbThongtin.
- Thi hành:

13


2.3. Tạo trang Hosodangky.aspx
- Giao diện chạy chương trình trước khi kích vào nút “Đăng ký”:

- Giao diện chương trình khi kích vào nút “Đăng ký”:

- Ý nghĩa
Trang Web dành cho khách hàng đăng ký hồ sơ cá nhân.
- Yêu cầu thiết kế
Sử dụng Table, Textbox, Radio, Button, TextArea
- Yêu cầu xử lý
Kích nút “Đăng ký” thì xuất hồ sơ khách hàng đã đăng ký ra màn hình.
2.4. Tạo trang Docbao.aspx

14

- Ý nghĩa
Trang Web liệt kê các đường Link đến các Website có nhiều người đọc.
- Yêu cầu thiết kế
Sử dụng điều khiển Table, Label, Iamge, HyperLink.
- Yêu cầu xử lý:
*Khi mở trang xuất hiện nội dung:
Lợi ích của việc đọc báo:
• Mở rộng kiến thức
• Cập nhật thông tin
• …
*Các liên kết, khi kích chuột vào sẽ mở các Website tương ứng ra một cửa sổ mới.
2.5. Tạo trang Quangcao.aspx
- Thiết kế giao diện gồm có Table, Adrotator

- Tạo tập tin dữ liệu: Quangcao.xml như sau:

Lưu ý: Hình ảnh sử dụng tùy ý, nên tạo thêm thư mục Pictures trong thư mục gốc để chứa hình.
- Chuyển qua trang Data nhập liệu trực tiếp trên màn hình:

15


- Thiết lập thuộc tính cho điều khiển AdQuangcao:
• AdvertisementFile: Quangcao.xml
• Target: _blank
2.6. Tạo trang Lich.aspx
- Thiết kế trang sử dụng điều khiển Calendar như sau:

- Chọn Auto Format theo mẫu sau:

- Xử lý sự kiện:
• Khi trang được Load thì yêu cầu hiện thị ngày hệ thống lên Label có tên là lbThongbáo theo
định dạng: dd/mm/yyyy.
• Khi kích chuột vào một ngày bất kỳ thì hiện thị kết quả của ngày đó lên Label có tên là
lbThongbáo.
- Khi thi hành ứng dụng

16


2.7. Tạo trang UploadFile.aspx
- Thực hiện Upload tập tin lên Server, tập tin được upload lên sẽ được lưu trong thư mục Upload của
ứng dụng.
- Tạo trang sử dụng các điều khiển: Table, FileUpload, Button, Label như sau:

- Xử lý sự kiện:
Người dùng kích chuột vào browse để tìm tập tinKích vào nút Upload thì thực hiện sao
chép tập tin này lên thư mục Upload của Server và thông báo kết quả nếu Upload thành công.
- Thi hành ứng dụng:

2.8. Tạo trang Panels.aspx
- Tạo trang sử dụng Panel gồm 1 Panelpage, chứa 1 Panelsothich, 1 Panelnghenghiep, trong
panelsothich có các checkbox, trong panelnghenghiep hiển thị 50 nghề (nghề 1, nghề 2, ….) được tự
động điền vào khi trang được Load.
- Thêm vào panel page hai checkbox: chksothich, chknghenghiep, khi trang hiển thị thì người dùng
sẽ đánh dấu check hoặc bỏ check thì panel trương ứng sẽ hiển hoặc ẩn.
- Thiết kế:

17

- Khi thi hành ứng dụng:

2.9. Tạo trang Multiviews.aspx
- Khi thiết kế sử dụng Multiview và Menu để tạo ra một Tab Panel.
- Thiêt kế: Tạo 1 Multiview, gồm có 3 View (view1, view2, view3). Tạo 1 Control menu từ nhóm
navigation gồm 3 Tab (Tab1, Tab2, Tab3) lần lượt có giá trị là (0,1,2). Menu có thuộc tính:
Orientation là Horizaltal.
- Đưa nội dung vào các View như sau:

- Xử lý sự kiện khi người dùng kích chuột vào từng Tab thì sẽ hiển thị các View tương ứng.
- Khi chạy chương trình:

18


2.10. Tạo trang ViewUpload.aspx
- Ý nghĩa: Cho phép Upload và xem các tập tin đã được Upload.

- Yêu cầu thiết kế:
• Sử dụng Multiview, view, LinkButton, FileUpload, textbox và Button.
• Multiview chứa 2 view:
 View1: Chứa Fileupload và Button.
 View2: Chứa textbox.
- Yêu cầu xử lý:
1. Nút Upload khi chọn thực hiện: Upload tập tin lên Server và xuất danh sách tập tin trong
thư mục Upload ra màn hình (trong view thứ 2).
2. Nút “Upload tập tin” khi chọn sẽ xuất hiện view1, nút “Xem các tập tin được upload”
khi chọn sẽ xuất hiện view2.
- Hướng dẫn viết code cho nút “Xem các tập tin được Upload”

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles LinkButton1.Click
Textbox1.text = ""
Dim myFolder As New System.IO.DirectoryInfo(MapPath("~/Upload/"))
For Each file As System.IO.FileInfo In myFolder.GetFiles("*.*")
TextBox1.Text += file.Name + vbNewLine
Next
End Sub

19


2.11. Tạo trang Sanpham.aspx

- Ý nghĩa
Tạo trang cho phép người dùng chọn các sản phẩm kẹo được yêu thích và xem kết quả đã
chọn. Yêu cầu sử dụng đối tượng ViewState.
- Yêu cầu thiết kế:
Sử dụng điều khiển Checkbox, Label, Textbox, Button. Danh sách sản phẩm, mỗi checkbox
là một sản phẩm.
- Yêu cầu xử lý:

20


Giao diện như hình 1, có các checkbox sản phẩm. Nếu được chọn thì tăng số sản phẩm lên 1
và xuất ra màn hình, nếu bỏ chọn thì giảm số sản phẩm đi 1 và xuất ra màn hình.
Khi kích vào nút “bắt đầu chọn lại” thì xóa tất cả các thông tin số lượng và sản phẩm được chọn để
trở về trạng thái ban đầu.
- Hướng dẫn viết code

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
If Not IsPostBack Then
ViewState("chon") = 0
Else
ViewState("chon") += 1
End If
Label1.Text = "So Luong Chon: " & ViewState("chon").ToString()
End Sub
Protected Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles CheckBox1.CheckedChanged
If CheckBox1.Checked = True Then
Label1.Text = "So Luong Chon: " & ViewState("chon").ToString()
Else
ViewState("chon") = ViewState("chon") - 2
Label1.Text = "So Luong Chon: " & ViewState("chon")
End If
End Sub

Ghi chú: Các checkbox sản phẩm còn lại làm tương tự.
2.11. Tạo trang BulletList.aspx
Yêu cầu sử dụng đối tượng BulletedList để thiết kế theo mẫu sau:

---HẾT LAB03---

21


LAB04 – CÁC ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU (VALIDATION CONTROL)
1. Mục tiêu

Thiết kế Webform với điều khiển kiểm tra dữ liệu Validation Control.
2. Xây dựng ứng dụng
2.1. Thiết kế trang Dangkythanhvien.aspx

- Bảng thuộc tính các đối tượng điều khiển kiểm tra dữ liệu (thuộc tính Text là (*))

22


2.2. Tạo trang Hosodangky.aspx

23


- Ý nghĩa: Để khách hàng đăng ký hồ sơ
- Yêu cầu thiết kế:
- Sử dụng các điều khiển Textbox, DropDownList, Checkbox, Button và Label.
- Các điều khiển kiểm tra dữ liệu Validation Control.
Ghi chú: Ô nhập năm của Ngày sinh chỉ tạo dang sách từ 20002011
- Yêu cầu xử lý: Các điều khiển kiểm tra dữ liệu:
• Tên đăng nhập không được để rỗng, tối thiểu 8 ký tự, tối đa 16 ký tự, bao gồm các ký tự
chữ cái, ký số, và 3 ký tự đặc biệt: &, _, !
• Mật khẩu: không được rỗng.
• Nhập lại mật khẩu: Không được rỗng và phải giống mật khẩu.
• Họ tên khách hàng: Không được rỗng.
• Ngày sinh: Ngày tháng năm phải có kiểu Integer.
• Email: Phải có dạng địa chỉ Email.
• Thu nhập: 3 đến 10 triệu.
• Bảng lỗi chung thông báo cụ thể.
• Nút Đăng ký: Khi dữ liệu hợp lệ thì phải xuất hồ sơ khách hàng.

---HẾT LAB04---

24


LAB05 – CÁC ĐIỀU KHIỂN LIÊN KẾT VỚI CƠ SỞ DỮ LIỆU
1. Mục tiêu
- Xây dựng được cơ sở dữ liệu trên HQTCSDL Access và Sql Server.
- Nắm được các điều khiển dùng để kết nối CSDL như SqlDataSource, AccessDataSource,…
- Nắm được các điều khiển để trình bày và hiển thị dự liệu như GridView, DataList, Repeater,
DetailsView, FormView.
- Cách truyền tham số vào các điều khiển kết nối cơ sở dữ liệu.
2. Nội dung thực hành
2.1. Xây dựng cơ sở dữ liệu cho ứng dụng (Access hoặc Sql Server)
2.1.1. Xây dựng CSDL QLBansach.mdb trên HQTCSDL MS Access 2003 và lưu vào thư mục
App_Data.
a. Bảng chủ đề: CHUDE

b. Bảng nhà xuất bản: NHAXUATBAN

c. Bảng Sách: SACH

25