Tài liệu khóa học lập trình ASP.NET - Nguyễn Minh Quý

liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
161 
……………………………………………………………………………………………………………… 
Kết quả sau khi chạy trang ở trên 
19.3.3 Tạo Template với Repeater (light-weight) 
Repeater cũng là một điều khiển có khả năng hiển thị dữ liệu dưới dạng danh sách. Khi 
được gắn với nguồn dữ liệu, nó sẽ lần lượt thực thi nội dung nằm trong phần Template mỗi 
khi một bản ghi được đọc từ nguồn. 
Tuy điều khiển này không có khả năng phân trang, sắp xếp như GridView như nó là một 
điều khiển chiếm ít tài nguyên của hệ thống (vì vậy được gọi là điều khiển Light-weight), 
do đó chúng ta có thể dùng trong những trường hợp mà ở đó tài nguyên đóng vai trò quan 
trọng. 
Repeater cho phép chúng ta tùy biến các mục tương tự như GridView và DataList, đó là sử 
dụng Template. 
Ví dụ 9: Hiển thị họ tên và ảnh minh họa người dùng trong bảng tblUser sử dụng điều 
khiển Repeater. 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
162 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeater.aspx.cs" 
Inherits="Lession_19_Repeater" %> 
 Hiển thị danh sách người dùng 
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="" 
 SelectCommand="SELECT * FROM tblUser"> 
 <asp:Repeater runat="server" ID="rptDSND" 
 DataSourceID="SqlDataSource1"> 
 Họ và tên: 
 <asp:Image runat="server" 
 ImageUrl='' 
 Width="100px" Height="100px" /> 
20. Đóng gói website 
Sau khi hoàn tất dự án thì một khâu quan trọng nữa cần phải thực hiện để đảm bảo vấn đề 
bản quyền đó là biên dịch và xuất bản ứng dụng web. Việc xuất bản (Publish) ứng dụng sẽ 
giúp biên dịch các file code behind (file CS) thành các assemblies (file DLL). Khi đó, ứng 
dụng chạy sẽ nhanh hơn và bảo mật hơn. 
Để xuất bản web, Right click vào Tên của Solution và chọn mục Publish. Sau đó một hộp 
thoại hiện ra cho phép ta chọn thư mục sẽ lưu kết quả. 
Ứng dụng được biên dịch này có thể copy vào Server để thực thi. 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
163 
BÀI 20: THỰC HÀNH 
Mục tiêu: Kết thúc bài học này, học viên có thể 
™ Sử dụng được tính năng Template để trình diễn và cập nhật dữ liệu theo yêu cầu 
™ Sử dụng được DataList để trình diễn dữ liệu dưới dạng cột. 
™ Sử dụng ListView kết hợp với DataPager để hiển thị và duyệt các bản ghi. 
Nội dung: 
Bài 1: Hiển thị danh sách cán bộ (bao gồm họ tên, địa chỉ, điện thoại) trong bảng 
tblCanBo. Trong đó Họ tên chữ đậm. 
Hướng dẫn: 
- Đặt thuộc tính AutoGenerateColumns = "false" 
- Tự tạo các cột cho GridView bằng cặp thẻ … 
- Đặt nội dung cần hiển thị (ở đây là Họ tên, địa chỉ, điện thoại) vào các cột bằng cách 
đặt bên trong cặp thẻ 
Danh sách cán bộ 
Minh họa: 
<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="ThongTinCanBo.aspx.cs" Inherits="Lession_20_ThongTinCanBo" %> 
 Thông tin về cán bộ 
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="" 
 SelectCommand="SELECT * FROM tblCanBo"> 
 <asp:GridView runat="server" ID="DSCB" 
 DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
164 
Bài 2: Bổ sung thêm trường Photo vào bảng tblCanBo, trường Photo này sẽ lưu đường dẫn 
tới file ảnh của mỗi cán bộ. Sau đó xây dựng trang web hiển thị thông tin cán bộ (bao gồm 
các trường Họ tên, địa chỉ và ảnh tương ứng). 
Hướng dẫn: 
- Vì trường Photo đã chứa đường dẫn đến file ảnh rồi, vì vậy để hiển thị hình ảnh thay vì 
văn bản text thuần túy, ta sẽ tạo thêm phần tử , trong đó thuộc tính 
ImageUrl sẽ được gán giá trị của trường Photo tương ứng. cụ thể là : 
' /> 
- Để đặt kích thước ảnh như nhau, có thể thêm thuộc tính Width và Height 
- Trước giá trị cần có thêm cặp dấu nháy đơn để đảm bảo tính 
đúng đắn khi đường dẫn ảnh chứa dấu cách. 
Yêu cầu về giao diện 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
165 
Minh họa: 
 <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="Both" 
 DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> 
 <asp:Image runat="server" Width="100px" Height="100px" 
 ImageUrl='' /> 
Bài 3: Hiển thị danh sách cán bộ dạng chi tiết. Thông tin được dàn trang theo chiều dọc (Flow). 
Hướng dẫn: Tạo một cột duy nhất, nhưng mỗi dòng của cột đó sẽ chứa tất cả các trường 
thông tin cần hiển thị. Với mỗi hàng được tạo ra, ta sẽ đặt vào một table có kích thước cố 
định, bảng này có 1 hàng và 2 cột. Cột thứ nhất sẽ chứa thông tin ở dạng text như họ tên, 
địa chỉ, điện thoại và mô tả bản thân. Cột thứ hai sẽ hiển thị hình ảnh tương ứng. 
Kết quả 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
166 
Minh họa: 
 <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="None" 
 DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> 
 <asp:Image runat="server" 
 Width="100px" 
 Height="100px" 
 ImageUrl='' 
 /> 
Bài 3: Hiển thị danh sách người dùng dưới dạng Flow (tuyến tính) như bài 3, nhưn có thêm 
chức năng cập nhật và Delete. THông tin hiển thị gồm Họ tên, Địa chỉ, Điện thoại. Trong 
đó, trường địa chỉ sẽ hiển thị ở dạng Text Multiline khi sửa. 
Hướng dẫn: 
Tạo các template như bài 3, nhưng thêm 2 command là Edit và Delete. Trong đó các trường 
muốn sửa chữa sẽ đặt vào các Textbox và dùng hàm . 
Minh họa: 
Cột 1 
Cột 2 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
167 
Kết quả. 
<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="DSCB_ImageField.aspx.cs" Inherits="Lession_20_DSCB_ImageField" %> 
 Cập nhật danh sách cán bộ 
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="" 
 SelectCommand="SELECT * FROM tblCanBo" 
 UpdateCommand="Update tblCanBo SET 
 HoVaTen=@HoVaTen, DiaChi=@DiaChi, SoDienThoai=@SoDienThoai 
 Where MaCanBo=@MaCanBo" 
 DeleteCommand="Delete tblCanBo where MaCanBo=@MaCanBo"> 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
168 
 <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="both" 
 DataKeyNames="MaCanBo" 
 DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> 
 Địa chỉ: 
 Điện thoại: 
 Họ tên: 
 <asp:TextBox runat="server" ID="txtHVT" Width="98%" 
 Text= '' > 
 Địa chỉ: 
 <asp:TextBox runat="server" ID="txtDC" Width="98%" 
 TextMode="MultiLine" Rows="5" 
 Text=''> 
 Điện thoại: 
 <asp:TextBox runat="server" ID="txtDT" Width="98%" 
 Text= ''> 
 <asp:CommandField 
 HeaderText="Sửa chữa" 
 EditText=" Sửa" 
 UpdateText="Lưu" 
 ButtonType="Link" 
 CancelText=" Hủy bỏ" 
 ShowEditButton="true" /> 
 <asp:CommandField 
 HeaderText="Xóa" 
 DeleteText=" Xóa" 
 ButtonType="Link" 
 ShowDeleteButton="true" /> 
Phần template 
cho chế độ 
thường 
(chưa sửa) 
Phần template 
cho chế độ 
soạn thảo 
(edit mode) 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
169 
Bài 4: Hiển thị thông tin trích ngang về người dùng trong bảng tblUser, trong đó dưới mỗi 
người dùng thêm một Hyperlink là "Xem chi tiết" để khi người dùng click vào hyperlink 
này thì mở trang UserDetail.aspx và hiển thị chi tiết thông tin về người dùng đó. Yêu cầu 
thêm: Danh sách này hiển thị làm 3 cột. 
Hướng dẫn: Để hiển thị thông tin dưới dạng cột, ta sử dụng điều khiển DataList. Trong 
mỗi Hyperlink ta sẽ tạo liên kết đến trang UserDetail.aspx và truyền cho trang này ID 
(trong trường hợp này là TenDangNhap) của người dùng tương ứng. Dựa vào ID này, trang 
UserDetail.aspx sẽ đọc (dùng Request.QueryString["TenNguoiDung"]) sau đó select thông 
tin ứng với ID đó và hiển thị. 
Minh họa: 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataListControl.aspx.cs" 
Inherits="Lession_19_RepeaterControl" %> 
 Danh sách cán bộ 
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="" 
 SelectCommand="SELECT * FROM tblUser"> 
 <asp:DataList runat="server" ID="DataList1" 
 DataSourceID="SqlDataSource1" 
 RepeatDirection="Horizontal" 
 RepeatColumns="3" 
 RepeatLayout="Table"> 
 Quyền hạn : 
 <asp:Image Width="100px" Height="100px" 
 runat="server" ImageUrl= '' /> 
 '> 
 Xem chi tiết 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
170 
Kết quả. 
Bài 4: Hiển thị danh sách người dùng dưới dạng cột và thực hiện phân trang. 
Hướng dẫn: 
Để thực hiện tạo các cột, có thể sử dụng điều khiển DataList, ngoài ra ta còn một điều 
khiển khác cũng rất mạnh cho phép hiển thị dưới dạng các cột nhưng có thêm khả năng 
phân trang, đó là: ListView controls. 
Các bước thực hiện: 
B1. Tạo nguồn dữ liệu SqlDataSource như những bài trước. 
B2. Tạo một ListView và gắn với nguồn dữ liệu SqlDataSource (như bài trước) 
B3. Cấu hình cho ListView (chọn smart tag), sau đó click chọn "Config ListView…" 
B4: Chọn các thông số như hình bên dưới. 
B5: Mở trang web. 
Lưu ý: Chúng ta hoàn toàn có thể thay đổi format của ListView bằng các vào Source code 
editor để sửa. 
Một cách phân trang khác là tạo một DataPager và gắn vào ListView, Khi đó ta chỉ cần đặt 
thuộc tính PagedControlID="ListView1". Cách này có ưu điểm là phần trang có thể đặt ở 
bất kỳ vị trí nào trên màn hình. 
Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 
V1.0 –  aptech@utehy.edu.vn; Tel: 0321-713.319 
171 
Kết quả hiển thị