Thursday 12 April 2012

How to create Mater pages in ASP.NET || What is the use of Master Pages in ASP.NET || How to add Master page to .ASPX page

Master Page in ASP.NET:
Hi friends, in this article i will explain about how to create the master pages in ASP.NET.
What is the use of master pages?
1. It is mainly used to re usability like function. If we write the code in the master page then we can use this page in many pages.
2. Master pages enables consistent and standardized layout to the website. 
You can make layout changes of the site in the master page instead of making change in the pages. 
It is very easy to implement. 

3 .It decreases the code because we write code in master page and uses in other pages.
                        The master page serves as a template for their content pages on the site. The master page has some code-behind methods, and it could auto-generate the page titles for the pages and some H1 headers for each content page.
Master pageStores global page elements that occur on every content page.
Extension: .Master
Content pageStores page-specific elements that are put into the master.
Extension: .aspx
Master page code behind Can change master page after it acquires content.
Extension: .aspx.cs
                   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="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>First take one new .master page
Project root Directory--> Add new Item--> Select Master page and name it as aspdotnet-Kishore.master and write the following code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Create Master page</title>
</head>
<body>
<form id="form1" runat="server">
 <div class="menu">
<ul>
<li><a href="http://aspdotnet-Kishore.blogspot.com/">Home</a></li>
<li><a href="http://aspdotnet-Kishore.blogspot.com/search/label/ASP.NET">ASP.NET</a></li>
<li><a href="http://aspdotnet-Kishore.blogspot.com/search/label/VB.NET">VB.NET</a></li>
<li><a href="http://aspdotnet-Kishore.blogspot.com/search/label/C#">C#</a></li>
<li><a href="http://aspdotnet-Kishore.blogspot.com/search/label/JQuery">JQuery</a></li>
<li><a href="http://aspdotnet-Kishore.blogspot.com/search/label/SQL Server">SQL</a></li>
<li><a href="http://aspdotnet-Kishore.blogspot.com/">Interview Questions</a></li>
<li><a href="http://www.facebook.com/aspdotnetKishore">Find me on Facebook</a></li>
<li><a href="https://twitter.com/aspdotnetKishore">Find me on Twitter</a></li>
</ul></div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>

First take one new .aspx page
Project root Directory --> Add new Item -->Select web form and name it as aspdotnet-Kishore.aspx and write the following code.In this we have to add the MasterPageFile ="~/Aspdotnet-Kishore.master" in the @ Page directive.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Aspdotnet-Kishore.aspx.cs" Inherits="Aspdotnet_Kishore" MasterPageFile ="~/Aspdotnet-Kishore.master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

Then run the page then the output is like this.
If you want to apply the style then add the below code in <head> tag.

<style type ="text/css" >
.menu ul{
    margin0padding:1;
    floatleft;}
.menu ul li{
    displayinline;}
.menu ul li a{
    floatlefttext-decorationnone;
    colorwhite;
    padding5px 5px;
    background-color#a31515; }
.menu ul li a:visited{
    colorwhite;
font-weight:bold;}
.menu ul li a:hover.menu ul li .current{
    color#fff;
    }
     .hand1 {cursor:pointer;cursor:hand;}
    .add_now_text {font-weight:bold;padding-left:1px;background-color:#fff;background-repeatrepeat-x;font-size:smaller;display:block;
      }
</style>

After applying the style the output is like below.

"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook pageAspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter  on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on  RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog  for more articles." 

No comments:

Post a Comment

© 2012-2018 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.