Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET

Creating Master Page In ASP.NET 2010

Rate me:
Please Sign up or sign in to vote.
4.14/5 (18 votes)
7 Feb 2012CPOL4 min read 266.9K   14   9
Creating Master Page in ASP.NET 2010

Introduction

ASP.NET programming language is composed of different suite packages of programming tools. However, the most exciting thing to learn from this language is to create a website because you don’t have to put in a lot of effort for building a complex website. In this language, you don’t need to find some flat form in order to make a beautiful and flexible website because there is already a package on how we are going to handle and locate those important matters to build a website. The advantages of why ASP.NET is popular? It’s because, you can write least amount of code. Unfortunately, it depends on the programmer side which programming tools they are going to choose. The most interesting part of ASP.NET Web programming is the use of Master Page. The master page is the template for how your pages will look like. It enables you to store the same content among multiple content pages in a website.

For instance, if you would like to display a standard header and footer in each page of your website, then you can generate the standard header and footer in a Master Page. That’s how powerful a master page is to handle multiple forms and is easier to maintain throughout what the website looks like. Take note, the ID attribute uniquely identifies the placeholder, allowing you to put more than one placeholder in a master page.

To start - open your Visual Studio 2010, File and choose New Web Site, choose C#.

Image 1

Choose ASP.NET Empty Web Site. Make the default File System; you can change the file directory of your file. Just simply browse and name your folder where your file is being saved and click Ok.

image002.jpg

When we notice there’s no display, what are we going to do. We are going to Add a Master Page. To do that, in your solution explorer, right click the name of your website and choose Add new item. Choose MasterPage.master, the default name is MasterPage. Make sure that the check box is checked, only place code in a separate file, not a select master page.

This is the master build in code:

ASP.NET
<%@ Master Language="C#" AutoEventWireup="true" 
    CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Under the code, either you can choose Source, Split, and design. In order to show only the code, use the design just like above, split shows both source and design and design shows only a design.

Now, we are going to use design in order to see the full design of our Master Page. Click design; first delete the current placeholder because we are going to create a new one.

In the above menu, click table and insert table:

image003.jpg

Click Ok, we are going to merge cells, the header and footer. Highlight the entire first row, right click and choose modify merge cells. Expand the height - it looks like a website and fill some color to make it look like an interesting site, look at the properties settings. If you want to add color for header and footer, click the cells and locate the properties and choose Bgcolor.

In toolbox, choose Hyperlink and drag in your Page. Make 3 copies and name them Home, About, and Settings.

image004.jpg

So, this is how your Master Page looks like. In order to make multiple Web Forms, in your Solution Explorer, click your web site name, right click and Add new item. Choose C# and click Web Form. The default name is default, change it to Home to make it more meaningful. Remember; make sure to check the select master page and Add. When you notice another dialog box appears, it does mean that you are in the Master Page control. Click MasterPage.master, then Ok.

This is the build in code.

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

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

Do the same procedure like what you created in the Home web form and name it About and Setting. Now you’ve already created 3 Web Forms.

Back to the Master Page, drag Content PlaceHolder from your toolbox in your Master Page.

Gdf

image005.jpg

Click Home menu hyperlinks, in your properties setting, locate Navigate URL, click … and choose Home Web Form that corresponds to your menu. Do the same procedure when you link About and Settings Menu.

image006.jpg

In Solution Explorer, double click Home Web Form. When you notice your cursor, only ContentPlaceHolder is active, it means you could not write anything except the place holder. Now, we are going to put something in the place holder. Type “This is my Home Page”, do the same as what you created in your home web form and type that relate in every pages.

Note: If you couldn’t write in the placeholder, click the place holder and click the greater than arrow >.

Save your work.

Now, click debug to start debugging or press F5 to run you program. The first time you run your program, it shows dialog box, click ok to continue. Then the output of your program looks like:

image007.jpg

Try to navigate your HOME, ABOUT, and SETTING menus to see if they work!

History

  • 6th February, 2012: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Comments and Discussions

 
QuestionNice Article Pin
heemanshubhalla19-Apr-14 8:03
heemanshubhalla19-Apr-14 8:03 
GeneralMy vote of 3 Pin
Siva Hyderabad25-Mar-14 19:03
Siva Hyderabad25-Mar-14 19:03 
QuestionCreating Master Pages in ASP.net Pin
shine joseph30-Jan-14 0:38
shine joseph30-Jan-14 0:38 
QuestionHow to add two tables side by side in master page.... Pin
Iranna K7-Oct-12 18:01
Iranna K7-Oct-12 18:01 
GeneralMy vote of 3 Pin
;ksklvdsfdsa;lkfdsma1-Aug-12 4:30
;ksklvdsfdsa;lkfdsma1-Aug-12 4:30 
Questionnew master page Pin
Mohammed Abdul Muqeet18-Jun-12 20:21
Mohammed Abdul Muqeet18-Jun-12 20:21 
GeneralMy vote of 3 Pin
vtirumalaraju8-Feb-12 20:12
vtirumalaraju8-Feb-12 20:12 
BugThere is no such thing as ASP.NET 2010 Pin
Madhur Ahuja7-Feb-12 17:45
Madhur Ahuja7-Feb-12 17:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.