Tải bản đầy đủ

Xây dựng trang chủ, trang con ASP.NET

Bài 4:
Xây dựng trang chủ cho từng lĩnh vực
1. Mục đích
• Trong bài thực hành này, bạn sẽ làm quen với cách xây dựng một trang web tương tác
với CSDL sử dụng SqlDataSource kết hợp DataList.
• Xây dựng Trang chủ cho từng lĩnh vực.

2. Yêu cầu
• Đã hoàn tất bài thực hành 2, xây dựng trang chủ bản tin điện tử.
• Đã nắm bắt được cách thức kết nối CSDL sử dụng SqlDataSource

3. Vấn đề liên quan
• Thiết kế CSDL bằng SQL Server.
• Đọc và hiển thị thông tin từ CSDL lên DataList (SqlDataSource với DataList).

4. Thời gian để hoàn tất bài thực hành:
• 120 phút

1



Thiết kế giao diện
1. Thiết kế Form theo mẫu dưới đây (Trang chủ lĩnh vực Xã hội)

2. Xây dựng Trang chủ Lĩnh vực Xã hội
Thêm trang XaHoi.aspx kế thừa từ trang MasterPage (trang cha) như sau:
• Menu Website – Add New Item
• Template : Webform
• Name : XaHoi.aspx
• Chọn “Select master page”
2


3. Tạo hiển thị tóm tắt các bản tin thuộc lĩnh vực Xã hội
• Sử dụng DataList Control:
o Từ ToolBox – kéo control DataList vào trang XaHoi.aspx
o Đặt tên cho DataList là dataListTomTatTinTuc
• Sử dụng SqlDataSource
o Từ cửa sổ Toolbox, kéo thả đối tượng SqlDataSource vào Web Form.

3


o Kết nối đến CSDL WebNews(sử dụng lại connectionString đã tạo ở bài
3)

o Chọn Specify a custom SQL statement or stored procedure

o Sử dụng Query Builder để tạo câu lệnh như sau:

4


• Vào Property của dataListTomTatTinTuc
chọn DataSourceID bằng SqlDataSource1
• Nhấn chuột phải vào
dataListTomTatTinTuc và chọn Edit
Template > Item Templates từ pop-up
menu.

• Xóa tất cả nội dung trong Item Template.


Vào Layout – Insert Table (có thuộc tính
Width = 100%), thêm vào các control
theo mẫu sau :

5


o Thiết lập thuộc tính cho các control theo bảng sau:
Hyperlink1
Label1
Label2

Font Size
Small
Small
Small

Font Bold
True

Font Color
Maroon
DimGray

o Phải chuột vào [HyperLink] chọn Edit DataBindings…
Bindable Properties : Text
Field binding – Bound to : TieuDe

o Phải chuột vào [Label1] chọn Edit DataBindings…

o Phải chuột vào [Image] chọn Edit DataBindings…

6


o Phải chuột vào [Label2] chọn Edit DataBindings…

• Copy các hình ảnh trong thư mục Resources vào thư mục upload của project.
• Chạy và Kiểm tra chương trình.
******Hết******

7



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×