ASP.Net: Cách sử dụng Master Page

ASP.Net: Cách sử dụng Master Page

Trong lúc thiết kế web bạn dễ dàng nhận thấy được các thành phần như: head, footer, sidebar … là không thay đổi ở tất cả các trang đó người ta đã nghĩ đến một trang mẫu cố định các thành phần đó (template) và ở trong ASP.Net gọi là Master Page.

Master Page ASP.Net là gì?

Thay vì phải design các thành phần nói trên giờ đây với công nghệ Master Page ASP.Net bạn sẽ thiết kế một lần và sử dụng lại cho tất cả các trang web trong site bạn có kế thừa Master Page này.

Khi sử dụng Master Page bạn sẽ lợi được rất nhiều, không phải mất công chỉnh sửa các trang khi có bất kì thay đổi nào ở head, footer … mà chỉ cần sửa ở master page là có tác dụng với các trang có kế thừa nó.

Cách tạo Master Page

Bạn mở Visual Studio tạo một dự án Website mới, và tiến hành add item mới chọn vào Master Page.

Tạo trang Master Page trong ASP.NET

Tạo trang Master Page trong ASP.NET

Bạn tiến hành thiết kế như một trang web bình thường chổ nào bạn cho các trang kế thừa nó có thể thay đổi được thì bạn kéo ContentPlaceHolder vào vị trí đó.

GIao diện mẫu trong master page

GIao diện mẫu trong master page

Trong giao diện trên các thành phần như banner, left, footer, right là cố định mình chỉ cho nội dung (content) thay đổi ở các trong trang kế thừa thì mình cho ContentPlaceHolder vào đó. Ở trang Master Page nhìn vào thanh toolbox ta sẽ thấy.

Thêm thành phần ContentPlaceHolder vào Master Page

Thêm thành phần ContentPlaceHolder vào Master Page

Sử dụng Master Page

Nói chung với các bước trên gần như mình đã tạo được master page đơn giản tiếp theo bạn sử dụng nó như thế nào. Bạn add new Item mới chọn vào webform sau đó đặt tên cho trang web và chọn vào Select master page.

ASP.Net: Cách sử dụng Master Page

Tạo trang có kế thừa Master Page trong ASP Net

Bạn chọn vào Master Page nào mình muốn kế thừa. Ở đây mình chỉ có một master page nên mình chọn vào cái đó.

Chọn Master Page muốn kế thừa

Chọn Master Page muốn kế thừa

Sau đó bạn mở trang vừa tạo lên, qua chế độ code bạn sẽ dễ dàng thấy được:

<!--

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="TrangChu.aspx.cs" Inherits="TrangChu" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" runat="server"

    contentplaceholderid="ContentPlaceHolder1">

    <p> bcdonline.net </p>

</asp:Content>

-->

Rõ ràng là kế thừa các thành phần giao diện từ trang Master Page đã kế thừa không có đoạn HTML nào cho head, footer và cột trái, cột phải. chi có thể thay đôi được phần bên trong ContentPlaceHolder1.

Master Page ở các trang kế thừa

Master Page ở các trang kế thừa

Bạn thấy con trỏ chuột đã có biểu tượng cấm, không thể tương tác ở các thành phần ngoài ContentPlaceHolder1 bạn phải đến Master Page để thay đổi nó.

Kết luận: Thật sự bài này đơn giản nhưng là một tính năng hay cần phải biết. Bạn có thể add thêm nhiều ContentPlaceHolder bất kỳ chổ nào bạn muốn chỉnh sửa thì cho ContentPlaceHolder vào vị trí đó, do khả năng diễn đạt của mình còn hạn chế nên cũng không thể nói nhiều hơn được nữa, bạn thực hành xong sẽ được nhiều điều thú vị hơn. Chúc mọi người thành công!

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: [email protected]
  • Telegram Messenger: https:/t.me/tommytran0401

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Điện thoại chạy Windows Phone của Sony sẽ mang thương hiệu Vaio

Điện thoại chạy Windows Phone của Sony sẽ mang thương hiệu Vaio

Khả năng cạnh tranh của dòng điện thoại chạy Windows Phone với các nền tảng khác sẽ được củng cố khi có sự xuất hiện của Sony - một nhà sản xuất uy tín.

Hướng dẫn sử dụng Page Tables để Deliver Meaningful Design

Hướng dẫn sử dụng Page Tables để Deliver Meaningful Design

Page Tables are a powerful UX tool. They serve as the key step between discovery and design. They define the business goals, target audiences, and content elements on a more granular level for all template pages.

Hướng dẫn chèn JS và CSS assets vào Drupal 8 theme năm 2015

Hướng dẫn chèn JS và CSS assets vào Drupal 8 theme năm 2015

In the example below global-stylingis a name of a library (a file or collection of files) that is used for global styles

Wordpress Freelancer

 

Wordpress Freelancer