Monday 29 September 2014

What is Master Page in Asp.Net

What is MasterPage in Asp.net?..............................
Master pages allow you to create a consistent look and behavior for all the pages (or group of pages) in your web application all in a single page. When you create your Master Page create it as if you would a template for your site, like when you first start your site you work with a single "template" file until you get the layout, look and feel you want. Except with a Master Page, instead of adding all the content to a single page, you add a Content Place holder that will hold the content for that specified region in your application.
Basic terminology that needs to be understood before jumping into master pages:
  • Masterpage: Gives us a way to create common set of UI elements that are required on multiple pages of our website.
  • ContentPage: The ASP.NET web page that will use master page to have the common UI elements displayed on rendering itself.
  • ContentPlaceHolder: A control that should be added on the MasterPage which will reserve the area for the content pages to render their contents.
  • ContentControl: A control which will be added on content pages to tell these pages that the contents inside this control will be rendered where the MasterPage's ContentPlaceHolder is located.


For Example.
First we create a Master Page in our WebSite which name is FirstMasterPage

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

<!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>
<style type="text/css">
.style1
{
width: 100%;
}

.style2
{
height: 23px;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<table class="style1">
<tr>
<td colspan="2">
<asp:Image ID="MImage1" runat="server"  Width="1275px" Height="75px"
ImageUrl="~/Image/Desert.jpg"/>
</td>

</tr>
<tr>
<td style="width:400px">
<table class="style1">
<tr>
<td>
<asp:Image ID="MasterImage1" runat="server" Height="93px" Width="110px" />
</td>
</tr>
<tr>
<td class="style2">
</td>
</tr>
<tr>
<td>
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="MasterTextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</td>
<td style="width:875px;margin-top:0px;margin-left:0px">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
&nbsp;</td>
</tr>
</table>

</div>
</form>
</body>
</html>

After that we add a WebPage which name is Default.aspx with FirstMasterPage.master
Source Code with Default.aspx...........................
<%@ Page Title="" Language="C#" MasterPageFile="~/FirstMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<table class="style1">
<tr>
<td>
Upload Photo
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
<asp:Button ID="btnSaveImage" runat="server" Text="Show with Master Page "
onclick="btnSaveImage_Click" />
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
<asp:TextBox ID="ChildTextBox1" runat="server"></asp:TextBox>
&nbsp;
<asp:Button ID="btnSelectDate" runat="server" Text="Select Date with Master"
onclick="btnSelectDate_Click" />
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
<asp:Calendar ID="ChildCalendar2" runat="server"
onselectionchanged="ChildCalendar2_SelectionChanged"></asp:Calendar>
</td>
</tr>
</table>
</asp:Content>

Source Code with Default.aspx.cs………………………..
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.Cookies["img"] != null)

((Image)Master.FindControl("MasterImage1")).ImageUrl = Request.Cookies["img"].Value;
}

}
// code when you will upload any image with this Button Image will be visible Image Field Control with MasterPage……………………..

protected void btnSaveImage_Click(object sender, EventArgs e)
{
Image im = (Image)Master.FindControl("MasterImage1");
if (im != null)
FileUpload1.SaveAs(Server.MapPath("Image/") + FileUpload1.FileName);
im.ImageUrl = "~/Image" + FileUpload1.FileName;
Response.Cookies["img"].Value = "~/Image/" + FileUpload1.FileName;
Response.Cookies["img"].Expires = DateTime.Now.AddDays(5);
Response.Redirect("Default.aspx");
}
// code when you will select any date with Calendar Control(Default.aspx) then date will show with TextBox Control (Master)...............

protected void ChildCalendar2_SelectionChanged(object sender, EventArgs e)
{

TextBox t = (TextBox)Master.FindControl("MasterTextBox1");
t.Text = ChildCalendar2.SelectedDate.ToShortDateString();

}
// code when you input any date with TextBox Control(Default.aspx) then date will selected in Calendar Control (Master)...............

protected void btnSelectDate_Click(object sender, EventArgs e)
{
Calendar c = (Calendar)Master.FindControl("Calendar1");
c.SelectedDate = Convert.ToDateTime(ChildTextBox1.Text);
c.VisibleDate = Convert.ToDateTime(ChildTextBox1.Text);
}
}
Result:



0 comments:

Post a Comment