Use your Master Pages properly
Ημερομηνία: 20/02/2013
Δεν έχετε συμπληρώσει όλα τα απαιτούμενα στοιχεία
Το email που δώσατε δεν είναι σωστό
You have probably noticed that most sites share the same design patterns in more than one page. For example, take a look at the following Wikipedia pictures.
These pictures are not part of the same page. However, the top and left panel, exist in both pages. Instead of writing the same HTML and source code parts for every page, we create a single Master Page. Consider Master Page as the frame, while the page is the picture inserted.
Why should I use Master Pages?
Why would you create a method and then call it multiple times instead of writing the same piece of code anywhere you would need to call it? The same principles apply to Master Pages as well. Since we have a way we can avoid duplicating the same piece of code, it would be a good idea to do so. Suppose you have fifty web forms in your website and you would like to do a minor change, let's say adding a new image in the right section. That would result in modifying all of fifty pages. Instead, all you have to do is to modify one (or a few more, if existent) Master Page and that's all.
Being introduced to the Master Pages, it's time to see how they actually work.
A Simple Example
Let's create a simple example. All we're going to do is create an html with three vertical sections. The first and third section will belong to the Master Page; the middle section will be created by the content page. A web form inserted within a master page is called Content page. Actually it's not quite a page, just some html piece of code followed by its code behind part.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="RedMasterPage.master.cs"
Inherits="MasterPages_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>
</head>
<body>
<form id="form1" runat="server">
<div style='color:red'>
This is the red master page header
</div>
<hr />
<asp:ContentPlaceHolder id="ContentPlaceHolderID" runat="server"/>
<hr />
<div style='color:red'>
This is the red master page footer
</div>
</form>
</body>
</html>
This is our master page, the RedMasterPage.master. It looks like a simple web form. However it uses the @ Master directive and has a strange asp:ContentPlaceHolder part. This is the place where the content page html will be placed.
<%@ Page Title="Green Content Page" Language="C#" MasterPageFile="~/MasterPages/RedMasterPage.master" AutoEventWireup="true"
CodeFile="GreenContentPage.aspx.cs" Inherits="MasterPages_GreenContentPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderID" Runat="Server">
<div style='color:green'>
This is the green content page.
</div>
</asp:Content>
This is our GreenContentPage.aspx file. We need to have the MasterPageFile attribute within the @ Page directive. Even though it looks like a web form the content page has no head tag, no body tag, etc. It is not a web form at all. The only way a content page can exist, is within a master page. The master page cannot exist on its own, as well.
In order to use our pages we call the GreenContentPage.aspx page. Here's the result.
The header and the footer (red color) belong to the master page; the middle div (green color) to the content page.
Now, let's create one more content page, the BlueContentPage.aspx.
<%@ Page Title="Blue Content Page" Language="C#" MasterPageFile="~/MasterPages/RedMasterPage.master" AutoEventWireup="true"
CodeFile="BlueContentPage.aspx.cs" Inherits="MasterPages_BlueContentPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderID" Runat="Server">
<div style='color:blue'>
This is the blue content page.
</div>
</asp:Content>
Calling the BlueContentPage.aspx we get
As you can see the master page content is still the same. And, instead of the red, we now get blue text, created by the BlueContentPage content page.
This is the power of the master page. You can put anything within the content page. Text, images, web controls, anything. You will always get your content within the master page frame.
Default placeholder content
A master page can contain more than one content placeholder. It is quite common to use one within the head tag so we can add scripts and other type of info placed inside. It may also be that a page requires five content placeholders in its master page while another needs only three. What then? A content placeholder may get default content that will appear in case the page called has no relevant content control. So there is nothing to fear. Your page will still work.
For example, let's add some extra content placeholder within our master page and try to access the GreenContentPage.aspx.
<div style='color:red'>
This is the red master page header
</div>
<hr />
<asp:ContentPlaceHolder id="ContentPlaceHolderID" runat="server"/>
<asp:ContentPlaceHolder id="ContentPlaceHolderNo2ID" runat="server">
<div style='color:red'>
Default master page placeholder message
</div<
</asp:ContentPlaceHolder>
<hr />
<div style='color:red'>
This is the red master page footer
</div>
The result will be.
Communication between master and content pages.
There may be times when we want to form the content page based on the master page and vice versa. There is an easy way to do this. We will use the FindControl method located in the System.Web.UI library. This method allows us to get hold of a control in the code behind part. We will use C#.
For example
Label label = Page.FindControl("LabelID") as Label;
label.Text = "New Text";
-
To get a control from the content page we will use the placeholder's id instead of Page.
-
To get a control from the master page we will use the Master keyword instead of Page.
Here's an example
<asp:Label runat="server" ID="MasterLabelID" Text="Master Page label." />
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolderID" runat="server"/>
</div>
NewMasterPage.master
protected void Page_Load(object sender, EventArgs e)
{
//Finds the label in the content page control and interacts
Label contentLabel = ContentPlaceHolderID.FindControl("ContentLabelID") as Label;
//check for null
if(contentLabel != null)
contentLabel.Text += " --> This is added by the master page";
}
NewMasterPage.master.cs
This is the master page. Now let's do the content page.
<asp:Content ID="ContentID" ContentPlaceHolderID="ContentPlaceHolderID" Runat="Server">
<asp:Label runat="server" ID="ContentLabelID" Text="Content Page label." />
</asp:Content>
NewContentPage.aspx
protected void Page_Load(object sender, EventArgs e)
{
//Finds the label in the master page control and interacts
Label masterLabel = Master.FindControl("MasterLabelID") as Label;
//check for null
if(masterLabel != null)
masterLabel.Text += " --> This is added by the content page";
}
NewContentPage.aspx.cs
The content page will access the master page's label and so will the master page to the content page's label. The result will be
Master Page label. --> This is added by the content page
Content Page label. --> This is added by the master page
One last thing you should keep in mind. The content page's events occur before the master page's. This is to say, the content page's Page_Load will run before the master page's one.
So if the content page had
ContentLabelID.Text = "Content Page Loads";
and the master page had
contentLabel.Text = " Master Page Loads";
The result would be:
Master Page Loads
This should be taken into account when you are dealing with things like session variables that can be used by both master and content pages.
Conclusion
Using a master page, we can create a standard frame which can be used by as many pages as we want. These pages (called content pages) will create the content that will fit in our frame. This can save plenty of time, and will make our website much easier to handle. If we wish we can interact between the master and the content page.
Πίσω στο BlogΠροηγούμενοΕπόμενο