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

Hệ thống bài tập được biên soạn từ cơ bản đến nâng cao giúp người học dễ dàng thực hành trực tiếp trên máy tính. Sau khi thực hành xong 5 bài Lab người học đã có thể lĩnh hội kiến thức lập trình ASP.NET một cách đầy đủ và thành thạo. Rất phù hợp cho giáo viên và sinh viên, học sinh đang tìm hiểu về 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)

* 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

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

so2 = Integer.Parse(txtsom.Text)

tong = so1 / so2

txtketqua.Text = tong.ToString()

End Sub

Protected Sub btxoa_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btxoa.Click

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

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á:

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

LAB02 – CÁC ĐỐI TƯỢNG TRONG ASP.NET

• 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())

- 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

• Ở 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

• Đố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)

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

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:

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

- Ý 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:

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

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ế:

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

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

2.11 Tạo trang Sanpham.aspx

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

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()

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 -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à (*))

2.2 Tạo trang Hosodangky.aspx

- Ý 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 -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

d Bảng Tác giả: TACGIA

e Bảng Viết sách: VIETSACH

f Bảng Khách hàng: KHACHHANG

g Bảng Đơn đặt hàng: DONDATHANG

h Bảng Chi tiết đặt hàng: CTDATHANG

i Bảng Thăm dò: THAMDO

j Bảng Chi tiết thăm dò: CTTHAMDO

k Bảng Quảng cáo: QUANGCAO

2.1.2 Xây dựng CSDL QLBansach trên HQTCSDL SQL Server (2000/2005) 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

d Bảng Tác giả: TACGIA

e Bảng Viết sách: VIETSACH

f Bảng Khách hàng: KHACHHANG

k Bảng Quảng cáo: QUANGCAO

2.1.3 Nhập dữ liệu mẫu

2.2 Xây dựng Website mới sử dụng CSDL QLBanhang và sử dụng các điều khiển SqlDataSource, AccessDataSource, Gridview, DataList,…để trình bày dữ liệu.

a.Tạo trang Dstacgia.aspx

Bước 1: Tạo mới trang DSTacgia.aspx

• Tạo điều khiển SqlDataSource:

• Chọn Configure Data Source

• Chọn New Conection

• Khai báo thông số cho SQL Server và chọn CSDL QLBanhang

• Xác định nguồn dữ liệu từ bảng Tacgia

• Chọn Finish để hoàn tất

Bước 2: Trình bày dữ liệu lên trang

• Tạo Gridview vào trang từ ToolBox

• Chọn Choose Data Source là SqlDataSource1 đã tạo ở bước 1

• Chọn định dạng Auto Format

• Chọn Enable Paging để thực hiện phân trang

• Để cho phép sắp xếp thì kích vào tiêu đề cột và đánh dấu chọn Enable Sorting

b Tạo trang NhaXB.aspx và trang SachNXB.aspx minh họa kết nối CSDL có truyền tham số qua đối tượng Request.QueryString

• Tạo trang NhaXB.aspx

Kích vào liên kết xem sách của một nhà xuất bản (Ví dụ: với MaNXB=2)

• Trang SachNXB.aspx sẽ trình bày các sách của nhà xuất bản tương ứng

Hướng dẫn:

Bước 1: Tạo trang NhaXB.aspx có nguồn dữ liệu lấy từ SqlDataSource chứa đầy đủ dữ liệu của

bảng NHAXUATBAN và được trình bày trên GridView như sau:

Điều chỉnh bổ sung vào lưới một cột liên kết bằng cách:

• Chọn Edit Column từ GridView Task

• Thực hiện bổ sung một cột dạng HyperLinkField Với các thuộc tính

o Text: Là Xem sách

o DataNavigateUrlFields: MaNXB (Giá trị tham số)

o DataNavigateUrlFormating: ~/SachNXB.aspx?MaNXB={0} (Địa chỉ trang liên kếtkèm theo tham số)

Bước 2: Tạo trang SachNXB.aspx

• Chỉ định nguồn dữ liệu là SqlDataSource chứa bảng Sach

• Khai báo điều kiện Where cho cột MaNXB bằng với tham số QueryString Ở mụcQueryString Field đặt tên là MaNXB

c Tạo trang Lietkesach.aspx sử dụng SqlDataSource và 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à được truyền vào từ Form trên trang

Yêu cầu:

Nhập MaNXB vào Textbox khi kích vào nút Xem thì kết quả hiển thị tất cả các danh mụccác quyển sách có MaNXB là giá trị được nhập vào Textbox MaNXB

Hướng dẫn:

• Tạo trang Lietkesach.aspx bao gồm các điều khiển:

• Một Textbox chỉ định thuộc tính ID là: MaNXB

• Một Buttton chỉ định thuộc tính PoskBackUrl: ~/Lietkesach.aspx (Chính là trang đang thiếtkế)

• Tạo Một SqlDataSource có nguồn lấy từ bảng Sach với điều kiện Where cho nguồn là:MaNXB bằng với giá trị trên điều khiển Form Field là: MaNXB (Tên Textbox)Kích Add

d Tạo trang Chudesach.aspx sử dụng điều khiển SqlDataSource và điều khiển DropDownList.