Solved

How to use a MasterPage and a ContentPlaceHolder

Posted on 2008-10-24
10
1,020 Views
Last Modified: 2013-11-07
Hi,

I hope to create a standard look from one page to the next with a MasterPage.  But I am new to useing them as well as using ContentPlaceHolders.

Could someone show me how?

I would like the top ContentPlaceHolder for some form of title that's the same from page to page.  But want the second ContentPlaceHolder to be used for content that's unique from page to page.

Thanks,
newbieweb
0
Comment
Question by:newbieweb
10 Comments
 
LVL 16

Expert Comment

by:Gyanendra Singh
ID: 22799324
0
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 22799421
0
 

Author Comment

by:newbieweb
ID: 22801798
I have dropped a .png file into the ContentPlaceHolder on the MasterPage and have referenced the MasterPage this way:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeFile="Page_DisplayReservation.aspx.cs" Inherits="Page_DisplayReservation" %>


But I get this error:

Content controls have to be top-level controls in a content page or a nested master page that references a master page.

I'm not sure what to do next.

Could someone tell me?

newbieweb
0
 
LVL 20

Expert Comment

by:informaniac
ID: 22801954
Can u show us the content page? i.e. the child page!!!
0
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 22802047
The code below assumes you have a ContentPlaceHolder in your MmasterPage named contentPlaceHolder.
<%@ Page Language="C#" AutoEventWireup="true" Inherits="_DefaultPage" MasterPageFile="~/MyMaster.master" Codebehind="Default.aspx.cs" %>
 

<asp:Content ID="contentDefault" ContentPlaceHolderID="contentPlaceHolder" Runat="Server">

	Hello MasterPages!

</asp:Content>

Open in new window

0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:newbieweb
ID: 22804209
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page_EnterRecordLocator.aspx.cs" Inherits="Page_EnterRecordLocator" %>

<!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">
    <link href="images/styles.css" rel="stylesheet" type="text/css" />
    <title>Enter Record Locator</title>
    <script>
    function isAlphaNumeric(str){
        return /^[a-zA-Z0-9]+$/.test(str);
    }

    function CheckSize()
    {
        var elem = document.getElementById("recordLocatorTextBox");
       
        if (elem != null)
        {
            if (!isAlphaNumeric(elem.value))
            {
                alert("The confirmation number consists only of alphanumeric characters.  Please try again.");
            }
            else
            {
               number_of_characters = parseInt(elem.value.length);
               if(number_of_characters == 6)
                {
                        //display enabled button image
                        var button = document.getElementById("findReservationBtn");
                        button.src="images/btn_forward_flow.gif";
                       

                        return true;
                }
                else
                {
                    if (number_of_characters>6)
                    {
                        alert("The confirmation number is only 6 characters long.  Please try again.");
                    }

                    // display disable button image
                    var button = document.getElementById("findReservationBtn");
                    button.src="images/btn_forward_flow_dis.gif";
                   

                    return false;
                }
            }
        }
    }
   
    /*function SubmitPage()
    {
        window.location = "../Page_DisplayReservation.aspx";
    }*/
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="recordLocatorTextBox" runat="server" Style="z-index: 100; left: 535px;
            position: absolute; top: 308px" onkeyup="CheckSize()"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Font-Size="Large" Style="z-index: 101; left: 99px;
            position: absolute; top: 309px" Text="Enter your 6 character confirmation number: "
            Width="431px"></asp:Label>
        &nbsp;
        <asp:ImageButton ID="findReservationBtn" runat="server" Height="77px" ImageUrl="~/images/btn_forward_flow_dis.gif"
            Style="z-index: 103; left: 515px; position: absolute; top: 471px" Width="197px" OnClick="findReservationBtn_Click" />
   
    </div>
    </form>
</body>
</html>


MasterPage

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
            <img src="images/dialog.png" style="z-index: 100; left: 0px; position: absolute;
                top: 0px" />
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>
0
 

Author Comment

by:newbieweb
ID: 22804214
I need to display the same background on each page and I have a .png file for that.  Do I simply drag it into the ContentPlaceHolder on the Master Page?  And properly reference the Master Page from the child pages??

Thanks,
newbieweb
0
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 22804545
Hmm... I think this is not related to master pages. Add style sheet file (css) to your project and put this into it:

body
{
   background-image: url(/myfolder/myimage.png);
}

then in your master or each page add this to between  and  tags:



This will make all browsers show your image as page background.

If you put  in a master page then all content pages "inherit" this style sheet so there is no need to add this tag to content pages.


R
0
 

Author Comment

by:newbieweb
ID: 22804604
Thank you!  As you can see I am new to this.

I have this code in each of my pages:

<head runat="server">
    <link href="images/styles.css" rel="stylesheet" type="text/css" />
    <title>Display Reservation</title>
</head>

Is this the right place for it?

The pages are not yet showing the image so I wonder if my path is not right:

None of these work:

   background-image: url("/images/dialog.png");
   background-image: url("~/images/dialog.png");
   background-image: url("images/dialog.png");

Yet my project has a root level folder called "images" and it contains dialog.png

Any ideas?

newbieweb
0
 
LVL 14

Accepted Solution

by:
Ramuncikas earned 500 total points
ID: 22804630
Try the ones below. Quotation marks are not needed.
I'm not sure how browsers treat URLs in style sheets. They may look for a target relative to css file or application or page. Just try theese and you'll see.

If no luck then please attach you master file, content page and css file in next post.

R

background-image: url(/images/dialog.png);

background-image: url(images/dialog.png);

background-image: url(dialog.png);

Open in new window

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now