Master Pages
Master pages allow you to create a consistent look and behavior for all the pages (or group of pages) in your web application.A master page provides a template for other pages, with shared layout and functionality. The master page defines placeholders for the content, which can be overridden by content pages. The output result is a combination of the master page and the content page.
The content pages contains the content you want to display.
When users request the content page, ASP.NET merges the pages to produce output that combines the layout of the master page with the content of the content page.
A master page is an ASP.NET file with the extension .master (for example, MySite.master) with a predefined layout that can include static text, HTML elements, and server controls. The master page is identified by a special @ Master directive that replaces the @ Page directive that is used for ordinary .aspx pages. The directive looks like the following.
<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
The Following Figure illustrate about Master Pages and Content Pages...
Sample Example
Next, add a master page to the site in the root directory by right-clicking on the Project name, choosing Add New Item, and selecting the Master Page template. Note that master pages end with the extension
For Creating the following sample layout :
<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
The Following Figure illustrate about Master Pages and Content Pages...
Sample Example
Step 1: Creating a Master Page
Create a New ASP.Net empty website,Next, add a master page to the site in the root directory by right-clicking on the Project name, choosing Add New Item, and selecting the Master Page template. Note that master pages end with the extension
.master. Name this new master page Site.master and click Add.
For Creating the following sample layout :
1. first Create A style sheet like this name it as Styles.css:
#topContent { text-align: right; background-color: #600; color: White; font-size: x-large; text-decoration: none; font-weight: bold; padding: 10px; height: 50px; } |
2.
To achieve the site layout shown in Figure start by updating the
Site.master master page so that it contains the following declarative markup:| <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %><!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 runat="server"><title> Master Pages Sample Example</title><asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder><link href="Styles.css" rel="stylesheet" type="text/css" /></ <body><form id="form1" runat="server"><div id="topContent"><a href="Default.aspx">Master Pages Tutorials</a></div> <div id="mainContent"><asp:ContentPlaceHolder id="MainContent" runat="server"></asp:ContentPlaceHolder></div> <div id="leftContent"><asp:ContentPlaceHolder id="left" runat="server"></asp:ContentPlaceHolder><p style="text-align: center;"><asp:Label ID="DateDisplay" runat="server"></asp:Label></p></div><div> <h3>Lessons</h3> <ul><li>TODO</li></ul> <h3>News</h3> <ul><li>TODO</li></ul><a href="Default2.aspx">for Next</a></div> </</form>body></html>head> |
Step 2: Creating Associated Content Pages
With the master page created, we are ready to start creating ASP.NET pages that are bound to the master page. Such pages are referred to as content pages.Let's add a new ASP.NET page to the project and bind it to the
Site.master master page. Right-click on the project name in Solution Explorer and choose the Add New Item option. Select the Web Form template, enter the name Default.aspx, and then check the "Select master page" checkbox as shown in Figure 7. Doing so will display the Select a Master Page dialog box (see Figure 8) from where you can choose the master page to use..
Figure 07: Add a New Content Page (Click to view full-size image)
Figure 08: Select the
Site.master Master Page (Click to view full-size image)@Page directive that points back to its master page and a Content control for each of the master page's ContentPlaceHolder controls.For Clear understanding I'm going to add Two web forms one is Default.aspx and Default2.aspx
After adding webform if you switch to design view then you will findout the contentplace holders there you can write any information....
The two webforms design will be like ...
For Default.aspx
@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>< < </ <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">p>This is First page... </p>asp:Content>asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"><p style="font-size: x-large; font-weight: bold; font-style: italic; font-variant: normal; text-transform: none; color: #FF0000">About The Author: <</p>p> author of this page is ........... </ < Hi the </p>asp:Content>asp:Content ID ="Content3" ContentPlaceHolderID="left" runat="server"><p>The Date and Time is ...</p> </asp:Content> <% |
For Default2.aspx
| <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>< < </ <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">p>This is second page...</p>asp:Content>asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> Hi this is second web form for same master Main content......</p>asp:Content>asp:Content ID="Content3" ContentPlaceHolderID="left" Runat="Server"><p style="font-family: Calibri; color: #FF0000">Hi this is second web form for same master left content .....</p><p style="font-family: Calibri; color: #FF0000"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /> </</p>asp:Content> </ <<p style="color: #008000; font-family: 'Bell MT'; text-decoration: blink"> |
Next, create a
Page_Load event handler for the master page and add the following code:void Page_Load(object sender, EventArgs e)DateTime.Now.ToString("dddd, MMMM dd"); protected { DateDisplay.Text = } |
Then Debug the Application and Observe the Output....
Here in Master page only you desing the simple layout and you use this in two webforms by using Content Place holder...
No comments:
Post a Comment