Xây dụng hoàn chỉnh ứng dụng web với Asp.net

Bài viết này giúp bạn tạo cấu trúc nhất quán các trang trong một website. Sử dụng thành thạo Themes. Hiểu và sử dụng điều khiển Menu, TreeView

1. Master Pages

Giới thiệu

  • Master Pages cho phép tạo ra một bố cục nhất quán trên các trang web trong cùng một Web site (tương tự Template)
  • Nội dung thể hiện trên trình duyệt chính là sự kết hợp giữa trang master (Master page) và trang aspx (Content page)
  • Master Pages gồm 2 phần chính:
    1. Master page
      • Dùng để xây dựng một bố cục chung cho Web site
      • Tập tin lưu trữ có phần mở rộng là .master
      • Thay thế tag định hướng <%@ Page …%> bằng tag <%@ Master …%>
      • Thao tác thiết kế: giống trang .aspx, nhưng phải bổ sung ít nhất một điều khiển ContentPalceHolder
    2. Content page: chính là trang .aspx nhưng có các đặc điểm sau
      • Bổ sung thuộc tính MasterPageFile=“Tên tập tin master” trong định hướng <%@ Page … %>
      • Không chứa các tag tạo ra cấu trúc trang HTML
      • Chứa tag <asp:Content …> </asp:Content>: số lượng tag này tùy thuộc vào trang master được kết hợp
      • Chỉ được phép tạo nội dung trong tag <asp:Content …>

gioi-thieu-masterpage-asp-net

Cách bước tạo Master Pages

  • Bước 1: tạo trang Master => chọn icon Master Page
  • Bước 2: thiết kế bố cục chung và bổ sung điều khiển ContentPlaceHolder vào trang Master
  • Bước 3: tạo trang Content và khai báo trang Master
  • Bước 4: thiết kế nội dung trên trang Content

Tham chiếu thuộc tính và điều khiển của trang Master từ trang Content

  • Bước 1: tạo thuộc tính (Public) trong trang Master
  • Bước 2: bổ sung định hướng <%@ MasterType VirtualPath=“<tập tin>.master” %> trong trang Content
  • Bước 3: trong trang Content, tại sự kiện Page_Load ta tham chiếu đến thuộc tính như sau: Master.<tên thuộc tính>
  • Sử dụng phương thức FindControl tại sự kiện Page_Load của trang Content
//Ví dụ:  điều khiển Nhan_Master trên trang Master
Label2.Text = ((Label) Master.FindControl("Nhan_Master")).Text;

Master động – Dynamic Master

  • Thay đổi trang Master lúc thực thi
  • Tại sự kiện PreInit của trang Content, khai báo như sau: Page.MasterPageFile =”tên tập tin Master”

2. Themes và Skin

Giới thiệu

  • Themes là tập hợp các khai báo thuộc tính về hình thức hiển thị (màu sắc, nét chữ , … ) của điều khiển
  • Dùng để áp dụng chung cho tất cả các trang trong một ứng dụng hoặc tất cả các ứng dụng trên Web server
  • Themes được hiểu và xử lý ở phía Server
  • Themes được tạo ra từ các thành phần: Skins, CSS, Images và các nguồn khác nhưng tối thiểu phải có Skins
  • Tất cả các thành phần trên được đặt trong thư mục App_Themes

Skins: Có 2 loại skin:

  • Default skin : không khai báo thuộc tính SkinId, và mặc định ứng dụng sẽ áp dụng skin này cho tất các điều khiển có cùng kiểu khai báo
  • Named skin : có khai báo thuộc tính SkinId, muốn sử dụng thì phải khai báo tường minh thuộc tính SkinId trên một điều khiển cụ thể

Tạo Themes

vi-du-skin-trong-asp-net

Tạo themes trong asp.net

buoc-1-tao-theme-trong-asp-net

Tổ chức thư mục lưu trữ

to-chuc-ung-dung-thu-muc-trong-asp-net

Sử dụng Themes

Cấp ứng dụng: áp dụng cho tất cả các trang. Khai báo trong tập tin Web.config

<pages  theme="MasterCode">
...
</pages>

Cấp trang – page Themes: áp dụng cho một trang cụ thể. Khai báo trong tag định hướng <%@ Page …%> của trang .aspx

<%@ Page  Theme="MasterCode" %>

Cấp trang – page Themes: áp dụng cho một trang cụ thể. Khai báo trong tag định hướng <%@ Page …> của trang .aspx

<%@ Page  StylesheetTheme="MasterCode"  %>

Hủy bỏ Themes:

  • Muốn huỷ bỏ Themes ở cấp ứng dụng cho một trang cụ thể, ta sử dụng thuộc tính EnableTheming trong <%@ Page EnabledTheming = “false” … %>
  • Muốn hủy bỏ Themes cho riêng một điều khiển, ta khai báo thuộc tính EnableTheming là false

Khai báo skin cụ thể cho một điều khiển: Muốn xác định skin cụ thể (không sử dụng skin mặc định của Themes hiện hành), ta khai báo thuộc tính SkinId

khai-bao-skin-cu-the-cho-mot-dieu-khien

Themes động – Dynamic Themes

  • Sử dụng sự kiện Page_PreInit của trang
  • Thay đổi Themes
protected void Page_PreInit() 
{
      Page.Theme = "tên Theme";
}
protected void Page_PreInit()
{
	 <điều khiển>.SkinID = "giá trị SkinId";
}

3. Site Navigation Controls

Giới thiệu

  • Dùng để chuyển đến (navigate) một trang web khác và thể hiện cấu trúc logic của Web site (site map)
  • Gồm các điều khiển: Menu, TreeView, SiteMapPath kết hợp với SiteMapDataSource
  • Các điều khiển này thường được sử dụng trong trang Master

Menu

  • Dùng để thể hiện thực đơn và cho phép người dùng chuyển đến một trang web khác khi chọn một chức năng
  • Thao tác tạo: chọn thuộc tính Items: khai báo các chức năng trên thực đơn

vi-du-menu-trong-asp-net

TreeView

  • Dùng để thể hiện thực đơn có dạng cây và cho phép người dùng chuyển đến một trang web khác khi chọn một node
  • Thao tác tạo: chọn thuộc tính Nodes: khai báo các chức năng trên thực đơn

vi-du-skin-trong-asp-net

SiteMapPath

  • Dùng để thể hiện cấu trúc logic của website và cho phép người dùng chuyển đến một trang web khác
  • Nội dung cấu trúc của website mặc định được chứa trong tập tin Web.sitemap
  • Nếu nội dung cấu trúc nằm trong tập tin ???.sitemap (không phải Web.sitemap), thì phải định nghĩa SiteMapProvider trong tập tin Web.config

SiteMapDataSource

  • Dùng để chứa nguồn dữ liệu được lưu trữ trong tập tin .sitemap
  • Nguồn dữ liệu mặc định là tập tin Web.sitemap
  • Thường sử dụng kết hợp với các điều khiển Menu và TreeView
  • Các thuộc tính:
    • SiteMapProvider: tên SiteMapProvider đã khai báo trong tập tin Web.config. Nếu nguồn là Web.sitemap thì không không cần khai báo thuộc tính này
    • ShowStartingNode(True/False): bắt đầu bằng siteMapNode gốc hay không
    • SiteMapProvider: tên SiteMapProvider
    • StartingNodeUrl: địa chỉ URL cho node bắt đầu
  • Liên kết với Menu và TreeView:
    • Sử dụng thuộc tính DataSourceID của 2 điều khiển trên, giá trị của thuộc tính là ID của SiteMapDataSource
Xây dụng hoàn chỉnh ứng dụng web với Asp.net
5 (100%) 10 votes

Add Comment