Ngôn ngữ ASP.NET - Master Page

Thiết kế Website với MasterPage

Các trang Master tương tự như các trang ASP.NET. Giống như các trang thông thường, các trang master là những tập tin văn bản có thể chứa HTML, điều khiển web, và mã lệnh. Tuy nhiên, các trang master có phần mở rộng tập tin là .master thay vì. aspx, và chúng không thể được xem trực tiếp bởi một trình duyệt. Thay vào đó, các trang master phải được sử dụng bởi các trang khác, được biết đến như là nội dung trang. Về cơ bản, trang master xác định cấu trúc trang và các thành phần chung.
Các trang nội dung thông qua cấu trúc này và chỉ cần điền vào nó với nội dung thích hợp. Ví dụ website của bạn có layout gồm 5 phần banner, footer, left, right và content (phần chứa nội dung hiển thị cho các tin). Ta thấy rằng trên trang web có các phần có cách trình bày không thay đổi trong quá trình duyệt tin. banner, footer, left, right: bạn có thể để các phần này vào một MasterPage và tất các trang web trong website của bạn sẽ áp dụng layout này thông qua contentpage.

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 …>

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;

Tạo trang masterpage
Để tạo một Master Page trong một ứng dụng web có sẵn, bạn chọn R-Click tại ứng dụng web trong cửa sổ Solution Explorer và chọn Add New Item.., xuất hiện hộp thoại , bạn chọn Master Page như trong hình


Xóa Place Holder hiện có  và dùng table thiết kế layout như sau:

  • Tạo phần banner (Phần trên)
  • Tạo phần Menu (Cột trái)
  • Tạo phần quảng cáo (Cột phải)
  • Tạo phần footer (Phần dưới)
  • Tạo phần nội dung (Giữa): Đặt ContetPalceHolder

Code trang MasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
 <style type="text/css">
 a{text-decoration:none;color:#099}
 a:hover {color:#0C9;text-decoration:underline}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <table width="1024" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" bgcolor="#00CC99" align="center" valign="middle"><p>&nbsp;</p>
      <p><strong>Vùng hiển thị menu</strong><br />
        <br />
    </p></td>
  </tr>
  <tr>
    <td colspan="3"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="97"><a href="#">Trang chủ</a></td>
        <td width="97"><a href="#">Sản phẩm</a></td>
        <td width="90"><a href="#">Giỏ hàng</a></td>
        <td width="113"><a href="#">Giới thiệu</a></td>
        <td width="623"><a href="#">Liên hệ</a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="230"><p><strong>Vùng hiển thị menu</strong></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
    <td width="576" align="center"><strong>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            <p>
                Vùng hiển thị nội dung</p>
           
        </asp:ContentPlaceHolder>
        </strong></td>
    <td width="210" align="center" valign="top"><strong>Vùng Quảng cáo</strong></td>
  </tr>
  <tr>
    <td colspan="3" align="center"><p>Copyright © Hiệp Sĩ IT dot Com</p></td>
  </tr>
</table>
    </form>
</body>
</html>

ContentPlaceHolder thứ nhất được đưa vào trong thẻ Head, mang đến cho các trang nội dung các trang thêm siêu dữ liệu (meta data), chẳng hạn như các từ khóa tìm kiếm và liên kết trang tính (search keywords and style sheet links)

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

ContentPlaceHolder thứ hai được đưa vào trong thẻ Body, đại diện các nội dung hiển thị của trang. Nó xuất hiện trên các trang như là một khung rỗng chờ sẵn nội dung sẽ được điền vào từ trang đó. Nếu bạn nhắp vào bên trong hoặc di chuột qua nó, tên của ContentPlaceHolder xuất hiện trong một tooltip. Phần kích thước của khung sẽ mở rộng để phù hợp với nội dung bạn đặt bên trong.

 <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            <p>
                Vùng hiển thị nội dung</p>
           
        </asp:ContentPlaceHolder>

 Sử dụng trang Masterpage để thiết kế các trang
Tạo mới trang web Default.aspx và trang Products.aspx

Khi click vào nút Add xuất hiện popup sau:

Chọn nút OK, trang default.aspx:

Tương tự tạo trang products.aspx

Điều chỉnh MasterPage 
    Khi có bất kỳ sự điều chỉnh nào trên trang Masterpage thì các trang được tạo từ trang Masterpage sẽ tự cập nhật.
    Ví dụ: Bổ sung vào phần trái của trang Masterpage các danh mục sản phẩm thì 2 trang tương ứng đã tạo (Default.aspx và products.aspx)

Kết quả khi thi hành