Giáo trình Lập trình web 1 - Nghề: Công nghệ thông tin - 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 1 (WEB FORM ASP.NET)
NGHỀ: LẬP TRÌNH MÁY TÍNH, CÔNG NGHỆ THÔNG TIN
TRÌNH ĐỘ: TRUNG CẤP VÀ CAO ĐẲNG
Ban hành kèm theo Quyết định số:        /QĐ­CĐN …… ngày …… tháng ……  
năm ……… của Hiệu trưởng trường Cao đẳng nghề tỉnh BR – VT


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


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.

Trang 3


LỜI GIỚI THIỆU
Giáo trình “Lập trình web 1 (Web Form ASP.NET)” được biên soạn dành 
cho học sinh trung cấp và sinh viên cao đẳng các nghề  Công nghệ  Thông tin 
(Ứng dụng phần mềm) và 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

Trang 4


MỤC LỤC

Trang 5


MÔ ĐUN: Lập trình Web 1 (Web Form ASP.NET)
Mã mô đun: <Mã MĐ>
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:

Trang 6


BÀI 1.
TỔNG QUAN VỀ LẬP TRÌNH WEB
Mã bài: <Mã bài>
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:
Biết khái niệm về HTTP, URL, HTML
Phân biệt được khái niệm về web tĩnh và web động
Biết quá trình xử lý yêu cầu của ứng dụng web ASP.NET
Cẩn thận, an toàn
Nội dung chính:
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

Trang 7

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.Mozilla FireFox của tập đoàn Mozilla
3.Chrome của Google
4.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ụ:

/> />Trang 8

/>HTML (Hyper Text Markup Language)
5.Ngôn ngữ dùng để xây dựng các trang web
6.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

Trang 9


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

Trang 10


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

Trang 11

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



Trang 12

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ệ thống namespace trong .NET Framework

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

Quá trình Request ­ Response

Trang 13


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

CÁC BÀI TẬP MỞ RỘNG, NÂNG CA dòng có chỉ  số  i, trong 
trường hợp khóa có nhiều cột
EnablePersistedSelection: giữ nguyên dòng được chọn khi sang trang mới 
hay không
Thuộc tính của tham số e trong sự kiện RowEditing
NewEditIndex: chỉ  số  dòng đang chuyển sang trạng thái chỉnh sửa dữ 
liệu
Thuộc tính của tham số e trong sự kiện RowUpdating
RowIndex: chỉ số của dòng hiện hành
Rows[i].Cells[j].Controls[k]: tham chiếu đến control thứ k trong cell tại 
dòng i, cột j
CÁC BÀI TẬP MỞ RỘNG, NÂNG CAO VÀ GIẢI QUYẾT VẤN ĐỀ
Trong website ThuongMaiDienTu_QuanTri, thiết kế và lập trình các webform 
cho   phép   sửa   và   xóa   dữ   liệu   trên   các   table   trong   CSDL   trực   tiếp   trên  

GridView.

Trang 81


BÀI 16.
HIỂN THỊ DỮ LIỆU TRÊN REPEATER
Mã bài: <Mã bài>
Giới thiệu:
Bài này cung cấp cho HSSV kiến thức và kỹ  năng sử  dụng Repeater  
control để hiển thị dữ liệu.
Mục tiêu:
Biết công dụng của Repeater
Tạo được trang web hiển thị  dữ  liệu trên Repeater từ  đơn giản đến phức 
tạ p
Cẩn thận, an toàn
Nội dung chính:
1. Thiết kế
Tiêu đề
Quy định hình thức hiển thị của tiêu đề. Chỉ  xuất hiện một lần phía trên của  
Repeater. Đây là phần tùy chọn, không có cũng được.
<HeaderTemplate>
…
</HeaderTemplate>

Bố cục hiển thị tương ứng với từng dòng dữ liệu
Đây là phần bắt buộc, quy định hình thức hiển thị của các mục dữ liệu trong  
Repeater
<ItemTemplate>
…

</ItemTemplate>

Bố cục hiển thị tương ứng với từng dòng dữ liệu

Trang 82


Qui định hình thức hiển thị  cho các mục dữ  liệu trong điều khiển. Nội dung 
được qui định trong cặp tag này sẽ  hiển thị  xen kẽ với các nội dung trong  
cặp tag <ItemTemplate></ItemTemplate>. Đây là phần tùy chọn
<AlternatingItemTemplate>
…
</AlternatingItemTemplate..>

Hình thức hiển thị giữa các dòng dữ liệu (tùy chọn)
<SeparatorTemplate>
…
</SeparatorTemplate>

Tiêu đề cuối
Qui định hình thức hiển thị cho tiêu đề dưới. (Chỉ xuất hiện 1 lần, phía dưới 
của điều khiển). Đây là phần tùy chọn
<FooterTemplate>
…
</FooterTemplate>

Liên kết với nguồn dữ liệu
Tương tự như GridView
CÁC BÀI TẬP MỞ RỘNG, NÂNG CAO VÀ GIẢI QUYẾT VẤN ĐỀ
Trong website ThuongMaiDienTu, tạo webform DanhSachSanPham hiển thị 

danh sách sản phẩm trên Repeater control.

Trang 83


BÀI 17.
HIỂN THỊ VÀ CẬP NHẬT DỮ LIỆU TRÊN LISTVIEW
Mã bài: <Mã bài>
Giới thiệu:
Bài này cung cấp cho HSSV kiến thức và kỹ  năng thiết kế  và lập trình  
cho phép xem và cập nhật dữ liệu trực tiếp trên ListView control.
Mục tiêu:
<Nội dung mục tiêu>
Nội dung chính:
1. Giới thiệu
Hiển   thị   dữ   liệu   theo   các   dạng:   lưới   (Grid),   nhóm   (titled),   danh   sách 
(BulletedList, flow), 1 dòng thể hiện trong 1 cột (Single Row – dạng này 
ít dùng)
Nổi bật là cho phép thể hiện dữ liệu theo nhóm
Đặc điểm
Hỗ trợ cơ chế sắp xếp dữ liệu
Hỗ trợ cơ chế phân trang
Cho phép cập nhật, thêm và xóa dữ liệu
Liên kết dữ liệu, chọn Layout và định dạng
Liên kết dữ liệu
Tương tự GridView
Chọn Layout

Tùy theo layout được chọn, ASP.NET sẽ phát sinh mã HTML tương ứng

Trang 84


Grid, Tiled, Single Row: phát sinh tag cấu trúc <table>
Bulleted List: phát sinh tag <ul>, <li>
Flow: phát sinh tag <span>
Hoặc có thể thiết kế bằng code HTML, với các thành phần sau:
LayoutTemplate: định nghĩa bố cục cho control, có
<tr ID= “itemPlaceholder” runat= “server”> </tr>

Là nơi chứa các nội dung tư ItemTemplate hoặc GroupTemplate
ItemTemplate: chứa dữ liệu kết của dòng có chỉ số lẻ
AlternatingItemTemplate: chứa dữ liệu liên kết của dòng có chỉ số chẵn
EmptyDataTemplate: nội dung khi không có dữ liệu biding
InserItemTemplate: chứa các control khi thêm dữ liệu mới
EditItemTemplate: chứa các control khi sửa dữ liệu
SelectedItemTemplate: chứa dữ  liệu liên kết khi dòng được cọn, có thể 
định dạng riêng để phân biệt với các dòng khác
Hoặc có thể thiết kế trên Source HTML

Trang 85


Nếu trình bày dạng Tiled thì bổ sung thêm item: <GroupTemplate> và khai báo 
thuộc tính GroupItemcount = <số cột trong 1 nhóm>
Định dạng hiển thị dữ liệu
Mở source HTML hiệu chỉnh trực tiếp
Sử dụng CSS
Sử dụng các HTML tag để tạo layout tùy biến
Sử dụng cú pháp Biding để liên kết dữ liệu

Trang 86


Ví dụ: mẫu tiled, 1 nhóm có 4 cột

Phân trang
Sử dụng DataPager control, khai báo các thuộc tính
PagedControlID: khai báo ID của control được phân trang.
Lưu ý: nếu DataPager control đặt trong ListView thì không cần khai báo 
thuộc tính này
PageSize: số dòng trên 1 trang
Fields: khai báo các dạng nút phân trang
Bổ sung template riêng vào DataPager
Chọn Edit Pager Fields trong DataPager Tasks của DataPager control
Chọn loại Template Pager Field  click OK
Chọn Edit Templates
Bổ sung các control vào thành phần PageTemplate
Sắp xếp
Bổ  sung nút lệnh (Button, LinkButton, ImageButton) vào LayoutTemplate và 
khai báo thuộc tính:
Trang 87


CommandName= “Sort”
CommandArgument= “Tên field muốn sắp xếp”
Ví dụ: tạo các nút sắp xếp trên dòng tiêu đề, sử dụng LinkButton thay thế cho 
Label

Cập nhật dữ liệu

Bật các tùy chọn cho phép thêm, xóa, sửa dữ liệu
Tạo các nút tương ứng với chức năng thêm, xóa, sửa dữ liệu
Xử lý các sự kiện tương tự như GridView
CÁC BÀI TẬP MỞ RỘNG, NÂNG CAO VÀ GIẢI QUYẾT VẤN ĐỀ
Bài 1: Trong website ThuongMaiDienTu, tạo webform hiển thị danh sách sản 
phẩm dạng tiled (1 dòng có 4 cột) trên ListView.
Bài 2: Trong website ThuongMaiDienTu_QuanTri, tạo webform cho phép xóa, 
sửa sản phẩm trên ListView.

Trang 88


BÀI 18.
HIỂN THỊ VÀ CẬP NHẬT DỮ LIỆU TRÊN DETAILSVIEW
Mã bài: <Mã bài>
Giới thiệu:
Bài này cung cấp cho HSSV kiến thức và kỹ năng tạo webform cho phép 
hiển thị và cập nhật dữ liệu trên DetailsView control.
Mục tiêu:
Biết công dụng của DetailsView
Tạo được trang web hiển thị  và cập nhật dữ  liệu trên DetailsView từ  đơn 
giản đến phức tạp
Cẩn thận, an toàn
Nội dung chính:
1. Giới thiệu
Hiển thị dữ liệu dạng cột
Thể hiện trên trình duyệt dưới dạng HTML table
Đặc điểm
Hỗ trợ phân trang
Cho phép cập nhật dữ liệu trực tiếp

Cho phép kết hợp với GridView để tạo ra Master­Detail

Trang 89


Liên kết dữ  liệu, định dạng dữ  liệu, phân trang, thiết kế  các cột tùy 
biến
Tương tự GridView
Cập nhật dữ liệu
Thiết kế: sử dụng bột nút CommandField giống như GridView
Xử  lý: tương tự  GridView, chỉ khác nhau về  tên sự  kiện và một số  thuộc  
tính

Tạo Master­Detail

Bước 1: tạo EntityDataSource1 dùng làm nguồn dữ liệu cho GridView
Trang 90


Bước   2:   tạo   GridView   dùng   làm   Master   và   liên   kết   với   nguồn 
EntityDataSource1, nên tạo thêm nút lệnh xử lý chọn dòng dữ liệu
Bước 3: Tạo EntityDataSource2 dùng làm nguồn dữ  liệu cho DetailsView, 
khai báo thuộc tính Where
Bước 4: tạo DetailsView dùng làm Detail và kết nguồn vào

Khai báo thuộc tính Where cho EntityDataSource2
CÁC BÀI TẬP MỞ RỘNG, NÂNG CAO VÀ GIẢI QUYẾT VẤN ĐỀ
Bài 1: Trong website ThuongMaiDienTu, tạo webform cho phép xem danh sách 
sản   phẩm   và   chi   tết   sản   phẩm   trên   Master­Detail   bằng   cách   kết   hợp 
GridView và DetailsView

Bài 2: Trong website ThuongMaiDienTu_QuanTri, tạo webform cho phép xem, 
xóa, sửa dữ liệu sản phẩm trên Master­Detail bằng cách kết hợp GridView và 
DetailsView.

Trang 91


BÀI 19.
QUẢN LÝ ỨNG DỤNG WEB
Mã bài: <Mã bài>
Giới thiệu:
Bài   này  cung  cấp  cho  HSSV  kiến  thức  và  kỹ  năng  sử  dụng  các   đối 
tượng, tập tin liên quan để  quản lý dữ liệu trong quá trình thực thi ứng dụng 
web.
Mục tiêu:
Biết công dụng của các tập tin cấu hình ứng dụng
Biết công dụng của các đối tượng quản lý ứng dụng
Biết sử dụng kết hợp các tập tin cấu hình và các đối tượng quản lý có hiệu  
quả trong ứng dụng web
Tạo được chức năng thống kê truy cập và quản lý giỏ hàng
Cẩn thận, an toàn
Nội dung chính:
1. Tập tin Global.asax
Giới thiệu
Tập tin tùy chọn chứa code để  quản lý các sự  kiện  ở  cấp Application và 
Session
Được đặt trong thư mục gốc của ứng dụng web ASP.NET
Một ứng dụng web chỉ có một tập tin Global.asax
Tạo Global.asax
Click chuột phải lên website, chọn Add  Add New Item …

Trang 92