curiouswebster
asked on
How to use a MasterPage and a ContentPlaceHolder
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
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
ASKER
I have dropped a .png file into the ContentPlaceHolder on the MasterPage and have referenced the MasterPage this way:
<%@ Page Language="C#" MasterPageFile="~/MasterPa ge.Master" AutoEventWireup="true" CodeFile="Page_DisplayRese rvation.as px.cs" Inherits="Page_DisplayRese rvation" %>
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
<%@ Page Language="C#" MasterPageFile="~/MasterPa
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
Can u show us the content page? i.e. the child page!!!
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>
ASKER
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page_EnterRecord Locator.as px.cs" Inherits="Page_EnterRecord Locator" %>
<!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("r ecordLocat orTextBox" );
if (elem != null)
{
if (!isAlphaNumeric(elem.valu e))
{
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("f indReserva tionBtn");
button.src="images/btn_for ward_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("f indReserva tionBtn");
button.src="images/btn_for ward_flow_ dis.gif";
return false;
}
}
}
}
/*function SubmitPage()
{
window.location = "../Page_DisplayReservatio n.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()"></as p: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>
<asp:ImageButton ID="findReservationBtn" runat="server" Height="77px" ImageUrl="~/images/btn_for ward_flow_ dis.gif"
Style="z-index: 103; left: 515px; position: absolute; top: 471px" Width="197px" OnClick="findReservationBt n_Click" />
</div>
</form>
</body>
</html>
MasterPage
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.maste r.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>
<!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("r
if (elem != null)
{
if (!isAlphaNumeric(elem.valu
{
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("f
button.src="images/btn_for
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("f
button.src="images/btn_for
return false;
}
}
}
}
/*function SubmitPage()
{
window.location = "../Page_DisplayReservatio
}*/
</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()"></as
<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>
<asp:ImageButton ID="findReservationBtn" runat="server" Height="77px" ImageUrl="~/images/btn_for
Style="z-index: 103; left: 515px; position: absolute; top: 471px" Width="197px" OnClick="findReservationBt
</div>
</form>
</body>
</html>
MasterPage
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.maste
<!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>
ASKER
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
Thanks,
newbieweb
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
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
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.aspfree.com/c/a/ASP.NET/How-to-Use-Master-Pages/