Giáo trình Lập trình web ASP.NET - Nghề: Lập trình máy tính - CĐ Kỹ Thuật Công Nghệ Bà Rịa-Vũng Tàu

ỦY BAN NHÂN DÂN TỈNH BR – VT
TRƯỜNG CAO ĐẲNG NGHỀ

GIÁO TRÌNH
MÔ ĐUN LẬP TRÌNH WEB ASP.NET
NGHỀ LẬP TRÌNH MÁY TÍNH
TRÌNH ĐỘ TRUNG CẤP VÀ CAO ĐẲNG
Ban hành kèm theo Quyết định số: 01/QĐ­CĐN, ngày 04 tháng 01 năm 2016  
của Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu


Bà Rịa – Vũng Tàu, năm 2016


TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể 
được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và 
tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh 
doanh thiếu lành mạnh sẽ bị nghiêm cấm.


LỜI GIỚI THIỆU
Giáo trình “Lập trình web ASP.NET” được biên soạn dành cho học sinh 
trung cấp và sinh viên cao đẳng nghề  Lập trình máy tính với mục tiêu cung 
cấp cho người học các kiến thức và kỹ  năng cần thiết để  có thể  hoàn thành  
ứng dụng web quảng cáo sản phẩm, thương mại điện tử, …
Tác giả  đã nghiên cứu một số  tài liệu, công nghệ  hiện đại kết hợp với  
kinh nghiệm làm việc thực tế  để  viết nên giáo trình này. Nội dung được tác  
giả  trình bày cô động, dễ  hiểu kèm theo các bước hướng dẫn thực hành chi  
tiết giúp cho người học dễ  tiếp thu các kiến thức cần thiết và hình thành  

được kỹ năng nghề.
Trong quá trình biên soạn, chắc chắn giáo trình còn nhiều thiếu sót. Tác  
giả rất mong nhận được ý kiến đóng góp của quý thầy/cô và các em học sinh,  
sinh viên để tiếp tục hoàn thiện hơn.
Xin chân thành cảm  ơn quý đồng nghiệp, bạn bè đã có những ý kiến  
đóng góp trong quá trình xây dựng giáo trình này.
Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2015
Tham gia biên soạn
1. Phan Hữu Phước – Chủ biên


MỤC LỤC


MÔ ĐUN LẬP TRÌNH WEB ASP.NET
Vị trí, tính chất, ý nghĩa và vai trò của mô đun:
Được giảng dạy sau khi học xong Thiết kế web, Lập trình Windows EF và 
WCF, SQL Server.
Cung cấp cho người học kiến thức và kỹ năng để xây dựng hoàn chỉnh một 
website thương mại  điện tử, quảng bá cho các tổ  chức, cá nhân trên 
nền .NET Framework.
Mục tiêu của mô đun:
Biết những kiến thức về Web Client, Web Server, ASP.Net trên môi trường 
Visual Studio.
Rèn luyện và phát triển kỹ  năng tổ  chức và xây dựng  ứng dụng Web với 
ASP.Net 5.0 sử dụng ngôn ngữ C# theo kiến trúc đa tầng (n­tier), hướng  
dịch vụ (SOA).
Ren luyên va nâng cao ky năng lâp trinh theo công nghê Entity Framework
̀
̣

̀
̃
̣
̀
̣
 
(EF), Windows Communication Foundation (WCF).
Xây dựng cơ  sở  vững chắc, tạo tiền đề  cho việc tìm hiểu các kiến thức 
lập trình Web nâng cao và phát triển nghề nghiệp.
Thực hiện các bài thực hành đảm bảo đúng trình tự. An toàn cho người,  
mạng và thiết bị.
Nội dung của mô đun:
T
T
1
2
3
4
5
6
7
8
9
10
11

Tên các bài trong mô đun
Tổng quan về lập trình web
Tạo ứng dụng ASP.NET
Tổ chức cấu trúc cho website

Xây dựng bố cục chung cho website
Tổng quan về ASP.NET Server Control
Sử dụng HTML Server Control
Sử dụng Web Server Control
Sử dụng ViewState
Tạo User Control
Tải động User Control
Kiểm tra dữ liệu hợp lệ

Thời  Hình thức 
gian giảng dạy
4
Lý thuyết
6
Tích hợp
5
Tích hợp
5
Tích hợp
2
Tích hợp
3
Tích hợp
15
Tích hợp
5
Tích hợp
5
Tích hợp
11

Tích hợp
14
Tích hợp


12
13
14
15
16
17
18
19
20

Tổng quan về liên kết dữ liệu với control
Liên kết dữ liệu với các list control
Liên kết dữ liệu với EntityDataSource control
Hiển thị và cập nhật dữ liệu trên GridView
Hiển thị dữ liệu trên Repeater
Hiển thị và cập nhật dữ liệu trên ListView
Hiển thị và cập nhật dữ liệu trên DetailsView
Quản lý ứng dụng web
Hoàn chỉnh ứng dụng với với jQuery plugin
Cộng

5
4
6
8

7
4
6
7
5
150

Tích hợp
Tích hợp
Tích hợp
Tích hợp
Tích hợp
Tích hợp
Tích hợp
Tích hợp
Tích hợp


BÀI 1.
TỔNG QUAN VỀ LẬP TRÌNH WEB
Giới thiệu:
Bài này cung cấp cho HSSV những kiến thức tổng quát liên quan đến 
một trang web trên Internet, ứng dụng web ASP.NET và môi trường phát triển.
Mục tiêu:
Trình bày khái niệm về HTTP, URL, HTML
Phân biệt được web tĩnh và web động
Trình bày quá trình xử lý yêu cầu của ứng dụng web ASP.NET
Nội dung:
Tìm hiểu một số khái niệm
1.1. Giới thiệu về Internet

Là một mạng máy tính toàn cầu. Các máy tính trong mạng trao đổi thông tin  
với   nhau   thông   qua   giao   thức   TCP/IP   (Transmission   Control  
Protocol/Internet Protocol)
Mang lại nhiểu tiện ích cho người sử  dụng, nổi bật nhất là dịch vụ  thư 
điện tử  (email), trò chuyện trực tuyến (chat) và truy tìm dữ  liệu (search  
engine), …
Dịch vụ được dùng phổ biến nhất trên Internet là World Wide Web (WWW, 
thường được gọi tắt là Web) thông qua giao thức HTTP (Hyper Text 
Transfer Protocol)
1.2. Phân biệt Web Server, Web Client
Web Server
Máy tính lưu trữ các website

Web Client
Máy tính dùng để  truy cập các trang 
web
Xử   lý   và  trả  kết  quả   về  cho  Web  Gửi   yêu   cầu   và   nhận   kết   quả   từ 
Client khi nhận yêu cầu
Web Server
1.3. Giới thiệu về một số trình duyệt web
Trình duyệt Web (Web Browser) là phần mềm dùng để  xem các tài liệu  
hoặc tìm kiếm tài nguyên trên World Wide Web.


Một số trinh duyệt Web thông dụng hiện nay:
1. Internet Explorer (IE)  được cài đặt sẵn khi cài  đặt hệ   điều hành 
Microsoft Windows
2.Cốc Cốc
3.Mozilla FireFox của tập đoàn Mozilla
4.Chrome của Google

5.Safari của hãng Apple
1.4. Phân biệt HTTP, URL, HTML
HTTP (Hyper Text Transfer Protocol)
Là giao thức truyền tải siêu văn bản
Tập hợp các quy định dùng để  trao đổi các tài liệu (văn bản, hình  ảnh,  
âm thanh, video, các tập tin đa truyền thông, …) giữa Web Server và  
Web Browser
URL (Uniform Resource Locator)
Đường dẫn đến một trang web (hoặc một tập tin) cụ thể trên Internet
Cú pháp đầy đủ: scheme://<hostt>[:port][][?<querystring>]
Trong đó:
scheme: loại dịch vụ Internet (http, https, ftp)
host: địa chỉ máy chủ chứa tài nguyên
port: cổng dịch vụ giao tiếp
path: đường dẫn và tên tập tin tài nguyên trên máy chủ
querystring: các tham số được gửi kèm theo (khi sử dụng http, https)
Ví dụ:

/> /> />

HTML (Hyper Text Markup Language)
6.Ngôn ngữ dùng để xây dựng các trang web
7. Gồm các tag giúp Web Browser biết cách định dạng thông tin hiển 
thị
Ví dụ: nội dung trang web chao.html
<html>
<head><title>ASP.NET</title></head>
<body>

Chào mừng bạn đến với Lập trình Web Form ASP.NET

</body>
</html>

Tổng quan về lập trình web
2.1. Web tĩnh
Trang web được trình bày dưới dạng văn bản. Nội dung được tạo ra trong  
lúc thiết kế và không thay đổi theo thời gian.
Được viết, thiết kế  bằng ngôn ngữ  HTML, không kết nối đến cơ  sở  dữ 
liệu (CSDL)
Dùng ngôn ngữ  Client Side Script (Javascript) khi có nhu cầu xử  lý tương  
tác trên trang web  Lập trình Client Side bằng Javscript
Quá trình xử lý trang web chỉ xảy ra tại Web Browser trên Web Client


Hình 1.1. Quá trình xử lý và hiển thị trang web tĩnh
Đặc điểm
Nhanh, không mất nhiều thời gian hiển thị kết quả trang web trên Web 
Browser
Chỉ có thể thực hiện những xử lý đơn giản và độc lập
Không cần phải cài đặt phần mềm tại Web Server
Web ngày càng phát triển thì trong một website:
Có thể có các trang web tĩnh
Có các xử lý Client trên các trang web động
2.2. Web động
Là trang web có hiển thị nội dung từ CSDL
Dùng ngôn ngữ Server – Side Script để xử lý
Quá trình xử lý tại Web Server  Lập trình Server – Side

Hình 1.2. Quá trình xử lý và hiển thị trang web động
Đặc điểm:
Chậm, mất thời gian để hiển thị kết quả
Có khả năng thực hiện những xử lý phức tạp và truy cập CSDL
Trang web linh động, phục vụ nhiều yêu cầu
Phải cài đặt phần mềm tại Web Server
Giới thiệu về ASP.NET
3.1. Khái niệm ASP.NET?
Active Server Pages .NET Framework
Công nghệ dùng để phát triển các ứng dụng web động và dịch vụ web
Kỹ  thuật lập trình và phát triển  ứng dụng web phía Server (Server – Side)  
dựa trên .NET Framework
Server – Side: các đoạn mã lệnh (VB.NET, C#, …) đã được biên dịch sẽ xử lý 
tại Server và trả kết quả HTML, Javascript, CSS, … sau đó gửi về cho Web  
Browser phía Client.


3.2. Tìm hiểu một số đặc điểm của ASP.NET
Easy Programming Model
ASP.NET hỗ  trợ  phát triển và triển khai các  ứng dụng web trên mạng 
Internet trong thời gian ngắn
ASP.NET tự động phát sinh mã HTML cho các Server Control tương ứng  
sao cho tối ưu với từng loại Web Browser hiện nay
Flexible Language Options: có khả  năng giao tiếp với nhiều ngôn ngữ  lập  
trình: VB.NET, C#, MC++.NET, …
Rich Class Framework: đã có sẵn hơn 5000 lớp đối tượng hỗ trợ cho nhiều 
yêu cầu khác nhau trên Internet như: XML, Data Access, File Upload,  
SMTP Mail, … nên việc viết các lệnh xử lý trở nên dễ dàng và tiện lợi
Great Tool Support
Hỗ  trợ  thiết kế nhanh Web Form hay Services theo phương pháp Kéo – 

Thả ­ Click đôi quen thuộc trên hệ điều hành Windows
Hỗ trợ việc phát hiện và loại bỏ các lỗi sai trong quá trình phát triển ứng  
dụng web
Mô hình Code – Behind: cho phép tách riêng giao diện HTML và các đoạn  
mã Server – Side.
ASP.NET được Compiled chứ không phải Interpreted
Trang ASP.NET được biên dịch trước thành các tập tin DLL nhị phân 
Server có thể thi hành một cách nhanh chóng
ASP.NET được biên dịch dưới dạng Common Language Runtime (CLR)  
nên cho phép những người lập trình viết mã ASP.NET bằng bất kỳ 
ngôn ngữ nào của .NET Framework
3.3. Giới thiệu một số website được tạo bằng ASP.NET




Tổng quan về lập trình ứng dụng web
4.1. Khảo sát hệ thống namespace – các mô hình tổ chức ứng dụng

Hình 1.3. Hệ thống namespace trong .NET Framework

Hình 1.4. Các mô hình tổ chức ứng dụng

Hình 1.5. Quá trình Request ­ Response


4.2. Tìm hiểu quá trình xử lý tập tin ASP.NET

Hình 1.6. Quá trình xử lý tập tin ASP.NET
CÂU HỎI, BÀI TẬP 

1.1. Kể tên một số ngôn ngữ lập trình web khác asp.net
1.2. Kê tên một số Web Browser.
1.3. Với các website asp.net, sau khi đã biên dịch và đặt trên Web Server thì  
người khác có biết được mã nguồn không? Tại sao?
YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Biết được tên 2 ngôn ngữ lập trình khác ASP.NET
Biết tên một số Web Browser thông dụng
Biết kết quả có được sau khi biên dịch website asp.net.


BÀI 2.
TẠO ỨNG DỤNG ASP.NET
Giới thiệu:
Một website asp.net bao gồm nhiều thành phần bên trong. Việc tổ  chức  
lưu trữ các trang giúp website trở nên rõ ràng, tiện lợi cho người lập trình và  
người truy cập cũng dễ dàng nhớ địa chỉ các trang bên trong.
Mục tiêu:
Biết được công dụng và tổ chức các thư mục lưu trữ trong ứng dụng web
Tạo được ứng dụng web
Tạo được Web Form
Biết  sử  dụng  thuộc  tính  IsPostBack   trong  sự   kiện  Page_Load   của   Web  
Form
Cẩn thận chọn đường dẫn an toàn khi tạo website để  dễ  quản lý và tránh 
ghi chồng lên website cũ.
Nội dung:
1. Khởi động Visual Studio
Start  All apps  Visual Studio 2013  Visual Studio 2013
Tạo mới ứng dụng web:
Vào File  New  Web site

Hình 2.1. Cửa sổ tạo website ASP.NET
Giới thiệu về Web location:
File System (chọn mặc định): Không cần cài đặt IIS, Visual Studio sẽ 
cung cấp web server riêng khi ta thi hành ứng dụng web.
Local HTTP: Phải cài đặt IIS và khai báo URL đã được ánh xạ
FTP:   Sử   dụng   giao   thức   truyền   file   để   quản   lý   các   tập   tin   trong 
website
Tổ chức thư mục lưu trữ
App_Data: lưu trữ các tập tin dữ liệu .mdb, mdf, xml, …
App_Code: lưu trữ các tập tin chức source code .cs, .vb, …
Theme:   lưu   trữ   các   tập   tin   dùng   để   tạo   giao   diện   chung   theo   chủ   đề, 
thường có phần mở rộng .skin, .css hoặc các tập tin hình ảnh
Các bước để tạo các thư mục trên:


Hình 2.2. Các bước tạo các thu mục của ASP.NET
Ngoài ra, chúng ta có thể tạo thêm các thư mục cho mục đích khác:
Click chuột phải lên Website, chọn Add  New Folder
Scripts: chứa các tập tin thực thi Client – Side (.js)
Styles: chứa các tập tin định dạng giao diện (.css)
Images: chứa các tập tin hình ảnh
Tạo Web Form
Thực hiện theo trình tự sau:
Click chuột phải, chọn Add  Web Form. Đặt tên cho Web Form

Hình 2.3. Đặt tên cho web form
Một Web Form có 2 tập tin
Tập tin giao diện: có phần mở rộng .aspx

Tập tin thực thi Code – Behind: có phần mở rộng .aspx.cs
Chỉ  định trang mạng định cho Website: click chuột phải lên Web Form  
chọn Set As Start Page
Thi hành ứng dụng web: bấm phím F5
Thi hành trang chỉ  định: Click chuột phải lên Web Form    chọn View in 
Browser
Đối tượng Page

Hình 2.4. Các sự kiện trong vòng đời của một Web Form


4.1. Xử lý sự kiện Page_Load
Theo vòng đời sự kiện ở trên, sự kiện Page_Load thường chứa các lệnh để 
nạp dữ liệu ban đầu cho các Server Control.
Thực hành khảo sát xử lý sự kiện Page_Load
Mở web form Default.aspx
Chọn vùng nhìn Design  
Kéo Label control vào theo hình bên dưới và đặt thuộc tính ID là lbl1

Biên dịch và xem kết quả trang Default.aspx trên trình duyệt
Đóng trình duyệt, quay trở lại Visual Studio, chọn web form Default.aspx
Click chuột lên biểu tượng View Code để biên tập Code – Behind

Hình 2.5. Vị trí biểu tượng View Code
Nhập dòng lệnh sau trong sự kiện Page_Load

Biên dịch, xem kết quả  trang Default.aspx và so sánh với kết quả  lần  
trước
4.2. Tìm hiểu thuộc tính IsPostBack

IsPostBack trả về trạng thái PostBack của trang
False: trang được tải lần đầu
True: trang được tải khi được submit bởi một Server Control
Thực hiện các bước sau để hiểu rõ hơn về IsPostBack
Kéo control ListBox vào web form Default.aspx và đặt ID là lsb1


Biên dịch, xem kết quả trang Default.aspx trên trình duyệt
Đóng trình duyệt, biên tập lại sự kiện Page_Load như bên dưới

Biên dịch, xem kết quả trang Default.aspx trên trình duyệt
 Nhận xét?
Kéo control Button vào web form Default.aspx

Biên dịch, xem kết quả trang Default.aspx trên trình duyệt
 Nhận xét?
Click chuột lên Button
 Nhận xét?
Khắc phục: Đóng trình duyệt, biên tập lại sự  kiện Page_Load như hình 
bên dưới


Biên dịch, xem lại kết quả trang Default.aspx
Click chuột lên Button    Nhận xét?    Tối  ưu web form Default.aspx 
hiện tại như thế nào?
CÂU HỎI, BÀI TẬP
2.1. Tạo mới website mới lưu vào  D:\ThuongMaiDienTu_QuanTri  theo yêu 
cầu sau:
Tổ chức thư mục lưu trữ:

Tạo các thư mục images, scripts, styles trong thư mục administrator.
Tạo mới web form Default.aspx trong thư mục administrator:
Nội dung

Dùng CSS để định dạng nội dung màu #CC0000, canh giữa
YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP
Tổ chức thư mục lưu trữ đúng yêu cầu
 “QUẢN TRỊ NỘI DUNG” được canh giữa, màu đỏ sẫm.


Định dạng bằng tập tin .css trong thư mục administrator/styles


BÀI 3.
TỔ CHỨC CẤU TRÚC CHO WEBSITE
Giới thiệu:
Bài này cung cấp cho HSSV kiến thức và kỹ năng truy xuất CSDL bằng  
LINQ cơ bản và Entity Framework, tạo cấu trúc thư mục cho website.
Ngoài ra, nội dung bài cũng giới thiệu đến một CSDL mẫu đơn giản cho  
ứng dụng thương mại điện tử. CSDL này sẽ được sử dụng xuyên suốt ở các 
bài sau trong giáo trình.
Mục tiêu:
Biết tạo Entity Data Model
Biết truy vấn dữ liệu bằng eSQL
Tạo được các lớp xử lý nghiệp vụ
Biết tổ chức lưu trữ cho ứng dụng web
Cẩn thận khi tạo model cho ứng dụng
Nội dung:
1. Giới thiệu ứng dụng web
1.1. Mô tả tổng quát

Cửa hàng thời trang chuyên bán các sản phẩm quần ào thời trang nam, nữ 
và phụ kiện thời trang các loại
Mỗi sản phẩm thuộc một nhóm sản phẩm. Ví dụ:
Áo sơ­mi trắng – MS001 thuộc nhóm Áo sơ­mi
Quần jean thun – MS002 thuôc nhóm Quần jean nữ
1.2. Yêu cầu của ứng dụng
Người dùng có thể tra cứu, tìm kiếm, … sản phẩm theo tiêu chí đa dạng
Đặt hàng qua mạng
Cửa hàng có thể đăng tin tức, sự kiện lên website
…


1.3. Giới thiệu cơ sở dữ liệu (CSDL)

Hình 3.1. Mô hình quan hệ đơn giản CSDL ứng dụng Thương mại điện tử
Tổ chức CSDL
2.1. Tạo Entity Data Model
Trong website ThuongMaiDienTu, click chuột phải lên App_Code, chọn Add 
 Add New Item.