Easy Understand about Master Page design in ASP.Net

First we understand about Master Page, What is Master Page in Website Development? The Answer is, it is that page where you can fix your Logo, Image, Menu, and any Content which you want to view in its related all pages.

Suppose, if you have 5 pages and you want to view every one with same header and footer layout. Then here we use Master Page. SKOTechLearn describe the process to understand about Master Page Design in ASP.Net.

Advantage of Using Master Page

(1)

It provides a fix layout design like Logo, banner, navigation, footer etc.

(2)

There is no need to create same layout for every related page. Create one time and use it for every Form in same format.

(3)

It provide template with ContentPlaceHolder where your all related page will be view.

How to Add Master Page in ASP Web Application ?

For add it, first Start project with selecting “Empty Web Application”.

Suppose we create project with name “MasterPageWeb”.

After that, right click on your project from “Solution Explorer” window. Select “Master Page” option from “Add New Item” screen.

And input Name as “MMainPg.Master”.

Item Add process

After doing this process your created name's file will add to your Project.

Content Description (How to use ContentPlaceHolder in ASP.Net?)

When you open it. It will contain only “ContentPlaceHolder1” inside HTML body.

Website design through ASP.Net

This Place holder will hold all related content page related with it. First we design this. We write HTML script for it. Go to “Source” Tab and add 2 DIV before and after ContentplaceHolder like bellow.

Source Code Instruction

You can write it like:

<body>
<form id="form1" runat="server"> 
 <div> Header</div>
  <div>
   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
   </asp:ContentPlaceHolder>
  </div>
  <div>Footer</div>
 </form>
</body>

How To Add Header Footer in Master Page in ASP.Net?

How to Add or Create Content Page in ASP.Net WebForm?

Now After that we add some WebForm for further process. But in this process, we can not add forms through right click on Project.
In this time we have to right click on created Master Page from “Solution Explorer” window. And find “Add Content page” option and click on it.

This process will create its default form name such as “WebForm1.aspx”. You can change Form name according to requirement and also add controls according to requirement, you can add menu or design it for every related Webform.

The following picture example will show in details.

Content Page Process

You can change your content page name according to your desire. You will see that this page contain Master Page Layout.

You can not change Master’s layout through content page. You can only modify or design inside ContentPlaceHolder.

Add or Drag Controls in ContentPlaceHolder

Suppose, we drag some controls inside ContentplaceHolder. Suppose we drag HTML Table, TextBox1, TextBox2, Label1, Button1.

You can also change the style of Textbox with glowing border or normaly design through bellow code.

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 <style type="text/css">
    .style1 {
      height : 23px;  }
    .style2 {
      width : 116px; }
    .style3 {
      width : 162px;}
 </style>
</asp:Content>                                   <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 <p>
   <table style="width:100%;">
     <tr>
       <td class="style1" colspan="3">
         <strong>This is First Content Page.</strong></td>
     </tr>
     <tr>
       <td class="style2"> First Num</td>
       <td class="style3">
           <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
       </td>
     <td rowspan="2"> &nbsp;Result:&nbsp;                           <asp:Label ID="Label1" runat="server" BorderStyle="Groove" BorderWidth="1px"    Width="67px"></asp:Label>
     </td>
   </tr>
   <tr><td class="style2">Second Num</td>
     <td class="style3">
       <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>                                    <asp:Button ID="Button1" runat="server" Text="Add" />
     </td>
   </tr>
  </table>
 </p>
</asp:Content>

Suppose we design site such as Addition of Number. So we write code in Button1's Click() event inside “WebForm1.aspx.vb” as given follows.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click

    Label1.Text = Val(TextBox1.Text) + Val(TextBox2.Text)

End Sub

Content design Process

Master Page Example in ASP.Net

After doing all this process when you run application, it will show the output. Like this you can create more than one content page to design website.