Tài liệu khóa học Lập trình ASP.NET

iew ID="GridView1" runat="server" 
 DataSourceID="SqlDataSource1" 
 AutoGenerateColumns="false" AllowPaging="true">
 <asp:image runat="server" 
 ImageUrl='' 
 Width="100px" Height="100px"
 />
Ví dụ 6: Hiển thị dữ liệu trong một cột
 ……….. Như ví dụ 5 ……………………………………………………………………………………………
 <asp:GridView ID="GridView1" runat="server" Width="100%"
 DataSourceID="SqlDataSource1" ShowHeader="false" 
 AutoGenerateColumns="false" AllowPaging="true">
 Họ và tên: 
 Tên đăng nhập: 
 Quyền hạn : 
 Trạng thái: 
 Hình ảnh : <asp:Image runat="server" 
 ImageUrl='' />
 ……….. Như ví dụ 5 ……………………………………………………………………………………………
Cập nhật dữ liệu
Để cho phép sửa dữ liệu của một trường, ta cần đặt thuộc tính text của trường đó vào trong phương thức Bind, dạng như sau:
<asp:TextBox 
Text='' 
runat="server" id="textBox"/>
Ví dụ 7: Cập nhật hồ sơ cán bộ (Chỉ cập nhật trường "Bản thân")
 ……….. Như ví dụ 5 ………………………………………………………………………………………
<asp:GridView ID="GridView1" runat="server" Width="100%"
 DataSourceID="SqlDataSource1" DataKeyNames="MaCanBo" 
 AutoGenerateColumns="false" AllowPaging="true">
 Họ và tên: 
 Mã Cán bộ: 
 Ngày sinh : 
 Địa chỉ: 
 Bản thân : 
 Họ và tên: 
 Mã Cán bộ: 
 Ngày sinh : 
 Địa chỉ: 
 Bản thân : 
 '>
 ……….. Như ví dụ 5 ………………………………………………………………………………………
19.3.2 Tạo template với DataList
DataList cho phép ta hiển thị dưới dạng danh sách. Danh sách này có thể chia làm nhiều cột như một số ứng dụng thường thấy trên Internet.
Ví dụ 8: Hiển thị ảnh như hình trên;
………………………………………………………………………………………………………………
 <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">
 Họ và tên: 
 Quyền hạn : 
 <asp:Image ID="Image1" Width="100px" Height="100px" 
 runat="server" ImageUrl= '' />
………………………………………………………………………………………………………………
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.
 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.
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">
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
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ả
Minh họa:
 <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="None"
 DataSourceID="SqlDataSource1" AutoGenerateColumns="false">
Cột 1
Cột 2
 <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:
Kết quả.
 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">
 <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="both"
 DataKeyNames="MaCanBo"
 DataSourceID="SqlDataSource1" AutoGenerateColumns="false">
Phần template cho chế độ thường 
(chưa sửa)
 Địa chỉ: 
 Điện thoại: 
 Họ tên: 
 <asp:TextBox runat="server" ID="txtHVT" Width="98%"
 Text= '' >
Phần template cho chế độ soạn thảo 
(edit mode)
 Đị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" /> 
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:
 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
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.
Kết quả hiển thị