Master Page trong ASP.NET 4 – Phần 1

Master Page trong ASP.NET 4 – Phần 1

Với hầu hết các website, khi bạn chuyển từ trang này sang trang khác nội dung sẽ thay đổi, phần không thay đổi là header, menu footer. Để tạo ra các trang web với layout phù hợp bạn cần xác định các vị trí trong một template.Với các phiên bản ASP.NET trước đó cho đến 2.0 thì không có một giải pháp template nào để bạn có thể thiết kế 1 trang layout duy nhất.

May mắn thay, điều này được giải quyết bằng cái tên Master Page. Lợi ích lớn nhất của Master Page la cho phép bạn thiết kế layout của tất cả các trang web trong website của bạn chỉ tại một nơi duy nhất. Điều này có nghĩa nếu bạn muốn thay đổi layout của website – chẳng hạn thay đổi menu từ trái sang phải – bạn chỉ cần chỉnh sửa Master Page.

Khi Master Page được giới thiệu ở ASP.NET 2.0, nó đã được cộng đồng nhanh chóng sử dụng như giải pháp template cho các trang web ASP.NET vì sự đơn giản của nó.

Xét một mức độ nào đó, một Master Page giống như tổng thể của một trang web ASPX thông thường. Nó chứa các phần tử HTML như <html>, <head><body> và nó cũng chứa các control ASP.NET. Bên trong Master Page, bạn có thể thiết lập markup để nó lặp đi lặp lại ở mỗi trang web giống như cấu trúc chung của trang web và menu

Tuy nhiên, một Master Page không thật sự là một trang web ASPX và không được request  trực tiếp trên trình duyệt, nó chỉ được dùng như một template cho các trang web – được gọi là Content Page (trang nội dung).

Cũng giống như một trang ASPX thông thường, một Master Page có thể có một tập tin Code Behind, xác định bởi CodeFile của nó và có thuộc tính Inherit (kế thừa).

Để tạo những vùng cho phép các Content Page có thể chèn vào, bạn cần định nghĩa control ContentPlaceHolder trong trang của bạn, như sau:

Bạn có thể tạo nhiều placeholder tùy thích mặc dù bạn chỉ cần một số placeholder để tạo layout. Content Page chủ yếu là các tập tin ASPX nhưng không sử dụng các đoạn code như <html>, <head>, <body> và <form>. Content Page được kết nối đến một Master Page thông qua thuộc tính MasterPageFile.

Các Content Page cụ thể sẽ có control Content trỏ đến các ContentPlaceHolder cụ thể.

Chú ý rằng thuộc tính ContentPlaceHolder của control Content trỏ đến đã được định nghĩa trên Master Page.

Khi chạy, các trang web sẽ được request, markup từ Master Page và Content Page được sát nhập, xử lý và gửi đến trình duyệt.Dưới đây là hình minh họa Master Page và Content Page tạo ra trang cuối cùng được gửi đến trình duyệt.

Tạo Master Page

Master Page được tạo bằng cách sử dụng hộp thoại Add New Item trên Visual Web Developer. Chúng có thể được đặt ở bất cứ đâu trong site, bao gồm cả ở thư mục gốc nhưng bạn nên đặt trong một thư mục có tên MasterPage để dễ dàng quản lý hơn. Cũng giống như các trang ASPX thông thường, chúng cũng hỗ trợ mô hình Inline code. Bài thực hành tiếp theo đây sẽ giúp bạn hiểu rõ hơn.

Mở Visual Web Developer 2010 Express (công cụ miễn phí từ Microsoft). Tạo một thư mục trong website có tên MasterPage. R-click vào thư mục MasterPage và chọn Add New Item.

Tại hộp thoại Add New Item chọn ngôn ngữ Visual C#, sau đó chọn Master Page, đặt tên cho tập tin là Frontend.master. Đánh dấu chọn vào Place code in separate file.

Hoàn thành đoạn code sau:

Chuyển sang chế độ Design, kéo tập tin CSS mà bạn đã tạo trước đó vào trang.

Nếu bạn không thấy có sự thay đổi, chuyển sang chế độ xem Source và thêm tag <link> như sau:

Như vậy bạn đã tạo xong một Master Page.

Hết phần 1….

4 Comments

  1. Duc Nguyen · August 27, 2011 Reply

    bài viết rất chi tiết cho những người mới học ASP.NET Thanks bạn !

  2. Trung Bui · March 14, 2012 Reply

    Dung cai minh dang ban khoan…Tks nhiu`

  3. cakiem · March 11, 2013 Reply

    Rất ý nghĩa ( nhưng mấy thể webform nhìn ko quen lắm, bg MVC phổ biến hơn!)

  4. Master Page trong ASP.NET 4 | NQTH · March 28, 2013 Reply

    [...] Trong bài thực hành dưới, bạn sẽ thao tác thêm một Content Page đến site dựa trên Master Page bạn đã tạo ở phần 1. [...]

Leave a reply