.jpg)
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>
</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>
</td>
<td>
<asp:Button ID="btnSaveImage"
runat="server"
Text="Show with
Master Page "
onclick="btnSaveImage_Click" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:TextBox ID="ChildTextBox1"
runat="server"></asp:TextBox>
<asp:Button ID="btnSelectDate"
runat="server"
Text="Select Date
with Master"
onclick="btnSelectDate_Click" />
</td>
</tr>
<tr>
<td>
</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:
