Friday, June 8, 2018

Easy Understand about Master Page design in ASP.Net

Easy Understand about Master Page design in ASP.Net

First we understand about Master Page, 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 it. 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 in same format.

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


Process to Add 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 for Master Page design
Item Add process

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

Content Description:
When you open it. It will contain only “ContentPlaceHolder1” inside HTML body.
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 for Master Page Design
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>

Add Content 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 for Master Page Design
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 ObjectByVal e As EventArgsHandles Button1.Click

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

End Sub
Content design Process for Master Page
Content design Process
Run Application:
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.
Master Page Output description
What is Necessary to Design a Master Page:
  • Creation
  • Designing
  • Adjust ContentPlaceHolder
  • Create Content Page
  • Design Content Page
Now, you can understand that how to use Master Page in ASP.Net.

0 comments: