Why Do We Need Master Pages ?
Most Web sites today have common elements used throughout the entire application or on a majority of the pages within the application. If you look at main page of Reuters News website ( www.reuters.com ) , you can see common elements that are used throughout the entire web site. Here is screenshot of website given below :-
In this screenshot , notice header section , the navigation section, and footer section on the page. In fact, nearly every page within the entire applicaiton uses these same elements. Even before master pages, you had ways to put these elements into every page through a variety of means; but in most cases, doing so posed difficulties.
Some developers simply copy and paste the code for these common sections to each and every page that requires them. This works , but it's rather labor intensive. However, if you use the copy-paste method, whenever a change is required to one of these common sections of the application, you have to go into each and every page and duplicate the change.
How To Use Master Page In Asp.net
DEMO APP DOWNLOAD LINK IS AVAILABLE BELOW1. In Visual Studio click on file then New Project then Choose your preferred
language like i have used c# then choose Web and Then click on Asp.NET Empty Web Application and click ok
2. Now empty web site solution is created for you
3. Now in solution explorer in right side panel Right click on you solution name
4. In popup menu click on Add then click on New Item
5. Now choose Master Page give it a name like 'master1.Master' and click ok
Each Master Page consist of ContentPlaceHolder control that control provides the space to other webform that is inheriting this Masterpage to place its own content on that webform along with Content on Master Page The Master Page contents are availaible in Child Webform but we cannot edit these content in child webform But in Content placeholder we can add the content according to our requirements
Content Placeholder are used like below:-
These lines of code are automatically added to your Master Page .
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<%-- This Place is available to Child web-form to put its content along wit master page --%>
</asp:ContentPlaceHolder>
To place default content within one of the content areas of master page, you simply put it in the contentPlaceholder server control on the master page itself or it is automatically added. Any content page that inherits this master page also inherits the default content
Calling Master Page Content Placeholder in other WebForm
Add ' MasterPageFile ="~/master1.Master" ' to Page Tag at Top of your Webform
This tells that webform to inherit contents from its master Page and webform can also put its own content within content placeholder avaliable by Master Page
Demo App
App To use Master Pages in Asp.net
Master Page Code
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="master1.Master.cs" Inherits="WebApplication5.Site1" %>
<!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></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
This is Master Page
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Webform Page code
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile ="~/master1.Master" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>
<asp:Content runat ="server" ContentPlaceHolderID ="ContentPlaceHolder1"><p>
<br />
This is Child Page Inheriting Master Page</p>
</asp:Content>
Description of code :- In @ Page directive we have included the MasterPageFile that implements the Master Pages concept in your web application or website This highly reduces code in websites and webapplications and it reduces redundancy of code
In this code we have called or used the contentPlaceHolder that we have initialized in Master Page we can add contents to this Content Place Holder that is only specific to this page only.
Nesting Master Pages
I hope you see the power that master pages provide to help you create templated web applications . so far you have been creating single master page that the content page can sue. Most companies and organisations, however are not just two layers. Many divisions and groups exist within the organization that might want to use variations of the master by, in effect , having a master page within a master page. With ASP>NET , this is quite possible.
How To USE DEMO APP
In this Demo App i have connected contains :-
( i ) master1.master
( ii ) master2.master // inherit from master1
( iii) Default.aspx // has master page - master 2
So we have 2 Master Pages and 1 Webform . These two master pages contain all Designing part of webpage and it remains same for full website so it kept in master . Master1 contains Header and Navigation part and Master 2 conatains other Remaining body part of webpage
Code For Master Page 1
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="master1.master.cs" Inherits="Masterpages.master1" %>
<!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">
<%--oswd.org--%>
<head runat="server">
<link href="Styles/style1.css" rel="stylesheet" type="text/css" />
<title></title>
f
</head>
<body>
<form id="form1" runat="server">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<%--fgfg--%>
<td class="shadow_left"> </td>
<td class="header_column">
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td class="logo_area">Logo Here </td>
<td width="300">
<form id="form2" name="form1" method="post" action="">
Search the website <br />
<input name="search_text" type="text" id="search_text" />
<input type="submit" name="Submit" value="Search" />
</form>
</td>
</tr>
</table></td>
<td class="shadow_right"> </td>
</tr>
<tr>
<td class="horizontal_column"> </td>
<td class="horizontal_center"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="linkcontainer">
<tr>
<td><div class="navigation"><a href="#" class="main_link">Home</a></div></td>
<td><div class="navigation"><a href="#" class="main_link">Gallery</a></div></td>
<td><div class="navigation"><a href="#" class="main_link">About</a></div></td>
<td><div class="navigation"><a href="#" class="main_link">Help</a></div></td>
<td><div class="navigation"><a href="#" class="main_link">Partner</a></div></td>
</tr>
</table></td>
<td class="horizontal_column"> </td>
</tr>
<tr>
<td class="shadow_left"> </td>
<td class="below_header">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
<td class="shadow_right"> </td>
</tr>
</table>
</form>
<asp:ContentPlaceHolder ID="contentholder" runat="server">
</asp:ContentPlaceHolder>
<tr>
<td class="shadow_left"> </td>
<td class="bottom_link_container"><p><a href="#" class="bottom_link">Link</a> | <a href="#" class="bottom_link">Link</a> | <a href="#" class="bottom_link">Link</a> | <a href="#" class="bottom_link">Link</a> | <a href="#" class="bottom_link">Link</a> </p>
<p>All Right Reserved © 2006 by bprizze<br />
http://heartlessg.4uhost.info Web Master
</p></td>
<td class="shadow_right"> </td>
</tr>
</body>
</html>
Code for Master Page 2 ( master2.master )
<%@ Master Language="C#" MasterPageFile="~/master1.Master" AutoEventWireup="true" CodeBehind="master2.master.cs" Inherits="Masterpages.master2" %>
<asp:Content ID="content" ContentPlaceHolderID="contentholder" runat="server">
<tr>
<td class="shadow_left"> </td>
<td class="main_content_box"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left_content">
<p>link</p>
<p>Link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>Link</p>
<p>link</p>
<p>link</p>
<p>Link</p>
</td>
<td class="body_content" valign="top">
<asp:ContentPlaceHolder ID="Main" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table></td>
<td class="shadow_right"> </td>
</tr>
<tr>
<td class="shadow_left"> </td>
<td class="middle_spacer"><div class="bottom_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div></td>
<td class="shadow_right"> </td>
</tr>
</asp:Content>
Code For Default.Aspx
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/master2.Master" CodeBehind="default.aspx.cs" Inherits="Masterpages._default" %>
<asp:Content ID="content" ContentPlaceHolderID="Main" runat="server">
<h1>Main page</h1>
</asp:Content>
I enjoy, cause I found exactly what I was having a look for.
ReplyDeleteYou've ended my four day long hunt! God Bless you man.
Have a great day. Bye
Feel free to surf to my web site heroes of dragon age hack