My last post which was Asp.Net-related was about the use of master pages. Today, I am writing about Content Pages and how to use it together with Master Pages.
Having re-read the first Asp.Net-related post, I realized that it is better to include a step by step instruction via screenshots while doing all of these inside Visual Studio. In my next articles, I will definitely include screenshots but for now, please bear with me as this is my first blog for coding and technology-related stuff. x_x
It is actually very straight forward and will be much, much simpler to understand. When creating a new content page in Visual Studio, you will be given an option to choose which master page you’ll use (yes, multiple master pages are supported). After which, the following lines of code will be the pre-populated for you.
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <!-- Commented text --> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> Test content </asp:Content>
The usual HTML tags are nowhere to be found as it will be “inherited” from the master page specified. We can just focus on the functionalities of the page that we are working on instead of worrying about the uniformity of the user interface for the whole website.
In line 1, notice that the MasterPageFile attribute is set to the name of the master page that we created in the previous article.
Lines 2-4 and 5-7 are the content areas where we will be placing our page content. These can be images, textboxes or any user interface elements. If we look back at our previous article, these corresponds to the content place holders located in the master page’s head and body tags, respectively.
If we are to display this page together with the masterpage, the code would – more or less – look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <!-- Commented text --> </head> <body> <form name="aspnetForm" method="post" action="Home.aspx" id="aspnetForm"> <asp:ScriptManager ID="ScriptManager1" runat="server" />Test content</form> </body> </html>
On my next article, I will be including screenshots with Visual Studio in action and more examples of Asp.Net Master Pages and Content Pages. 😀