CodeProject: Adding attributes to the <body> tag when using Master Pages. Free source code and programming help

If you are using Master Pages in an ASP.NET application and you need to add an attribute to the <BODY> tag from a Content Page -- for instance, to set a client script function for the onload event of the page -- you will find that you can't do it directly because the <BODY> tag is in the Master Page, not in your Content Page.

Solution

Make the <BODY> tag on the Master Page a public property, so you can access it from any Content Page. First, promote the <BODY> tag in the Master Page to an ASP.NET server control. Change:

<BODY>

to:

<BODY id="MasterPageBodyTag" runat="server">

Now that the body tag is a server control, you can configure access to it as a public property in the Master Page code behind file:

using System.Web.UI.HtmlControls;
public partial class MyMasterPage : System.Web.UI.MasterPage
{
    public HtmlGenericControl BodyTag
    {
        get
        {
            return MasterPageBodyTag;
        }
        set
        {
            MasterPageBodyTag = value;
        }
    }
...

Note that the MasterPageBodyTag server control is of type System.Web.UI.HtmlControls.HtmlGenericControl. To demonstrate this, just set a breakpoint in the Page_Load function in the code behind file, run the ASP.NET project in debug mode to that point, and execute ?MasterPageBodyTag.GetType().ToString() in the Immediate Window. To use this property from a Content Page, first declare the type of your Master Page in your Content Page's ASPX file:

<%@ MasterType TypeName="MyMasterPage" %>

Then somewhere in your Content Page's code behind file, use the Master Page's BodyTag property to add an attribute to the <BODY> tag:

protected void Page_Load(object sender, EventArgs e)
{
    Master.BodyTag.Attributes.Add("onload", "SayHello()");
...

This example, of course, assumes that there is a SayHello() client script in this Content Page. Running the application to the Content Page and then viewing the source code in the browser will show that the onload="SayHello()" attribute was added to the <BODY> tag. This technique should work for any HTML tag in the Master Page that you wish to access from a Content Page.

History

28 June, 2007 -- Original version posted
30 June, 2007 -- Article moved to main CodeProject.com article base
30 July, 2007 -- Article edited

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Chuck Bevitt

Member

Location:

United States

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
10 ASP.NET Performance and Scalability Secrets
10 easy ways to make ASP.NET and AJAX websites faster, more scalable and support more traffic at lower cost
Exploring Session in ASP.Net
This article describe about session in ASP.Net 2.0 . Different Types of Session , There Configuration . Also describe Session on Web Farm , Load balancer , web garden etc.
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET

Article Top

You must Sign In to use this message board.

FAQ
Noise Tolerance Layout Per page

Msgs 1 to 25 of 26 (Total in Forum: 26) (Refresh)

FirstPrevNext

perfect

ev cabrera

7:35 5 Jun '08

exactly what i was looking for. needed javascript to disable back navigation in onunload event, but only for certain conditions within a content page. thanks.
Sign In·View Thread·PermaLink

Help...

AD34

11:41 28 Apr '08

Does anyone have samples of doing this with VB? I can't get this to work, I have to be close but just missing something, if anyone has a sample using VB with Code Behind file, I would sure appreciate it if you would be willing to share it. Thanks AD34
Sign In·View Thread·PermaLink

I dont get this...

Member 3851879

21:34 25 Mar '08

I am new to asp.net, so this might be a silly question Smile

Most tutorials i have followed, has a masterpage. The contentplaceholder is a holder for the aspx pages and usercontrols
are where you can have MenuSystem, and so on in a usercontrol and link it to the masterpage.

isent it better to make a <body> in a aspx page global rather than the master's body? If you have a create Textbox button control inside a user control, in the masterpage, you would rather create to a certain aspx page than the masterpage body - or am i wrong??? Smile

</body>

A more simple way

justin.moses

10:38 21 Aug '07

If you set your master page body tag to:


<body id="master_body"  runat="server">

Then all you need to do is add this on any page that uses the master:


	public void Page_Load(Object sender, EventArgs e)
	{		
		//Inject onload and unload
		HtmlGenericControl body = (HtmlGenericControl)Master.FindControl("master_body");
		body.Attributes.Add("onload", "someFunction()");
		body.Attributes.Add("onunload", "anotherFunction()");
		
	}

I don't use code behind pages and this works great.

Re: A more simple way

psychrometrics

4:36 28 Sep '07

I like this simple approach but can not get it to work. I think I am missing something simple. In my Content page I have: function void SayHello() { alert("Hello"); } and in the Content page code behind: body.Attributes.Add("onload", "SayHello()"); everything else is the same as your post.
Sign In·View Thread·PermaLink

Re: A more simple way

justin.moses

5:11 28 Sep '07

I use the method I mentioned a lot... I know it works. Are you sure you have runat="server" in your body tag?
Sign In·View Thread·PermaLink

Re: A more simple way

psychrometrics

8:26 1 Oct '07

You are absolutely right it works perfectly. I had another issue in my script that wa causing a problem. Thanks!
Sign In·View Thread·PermaLink

Re: A more simple way

mln6937

23:38 15 Feb '08

Hi, A long time You wrote this, I know but I'm trying to convert Your code and use in VB. It would really be nice if You could help me. Thanks
Sign In·View Thread·PermaLink

Good job

CoolBreeze812

17:01 7 Aug '07

I have a similar write up I did on my blog. I essentially do the same thing to provide an alternative to using FindControl for accessing the properties of controls on MasterPages from other Content pages. This allows you to access for instance the text property of a TextBox control on the MasterPage from a Content page in a strongly type manner. http://lspence.blogspot.com lspence.blogspot.com
Sign In·View Thread·PermaLink

What about Master page body attributes ???

CWinKY

6:20 7 Aug '07

I found this solution very interesting, cause I'm trying to solve the same issue. Trying to run a onload javascript function from the content page.

What about if also have a onload function in the Master Page?

<body id="MasterPageBodyTag" runat="server" önload="setInterval('refeshLogo()',10000);">

Currently I'm getting a error "Too many characters in character literal".

But it works if I remove the onLoad function from Master page.

Any thoughts?

I've also looked at Page.ClientScript.RegisterStartupScript which will works okay to add a onLoad function in content page, BUT I also need a onUnLoad event to that I need to attach code to ... but not sure how with ClientScript. It makes sense I should be able to use the code from this article to accomplish, but the error I'm getting isn't giving me much hope.

Thanks ....

user control access

Kamagurka

19:12 6 Aug '07

Hi,
Great article!
I'm trying to read attribute values from within a user control. So I could easily configure the user control to behave in certain ways depending on it's tag attribute values. Currently I'm having difficulties accessing it's tag's attributes in the Master page. Can anyone point me in the right direction?
The Master page tag looks like this: <hnuc:UCIHeaderNav id="UsRTab" runat="server" /> and it renders custom html just fine, but I don't know how to access it's defining tag's attributes from within the control itself. What am I missing?

5.00/5 (1 vote)

Great, but question

Jamie Nordmeyer

6:25 30 Jul '07

Great tip, but one question. Have you, or anybody else, ever been able to figure out how to modify the base element in the header? Currently, I'm just doing something like this:


// HTML head element must, of course, have runat="server" specified.
HtmlGenericControl baseElm = new HtmlGenericControl("base");
baseElm.Attributes["href"] = "Some/Sub/Folders/";
Page.Header.Controls.Add(baseElm);

Kyosa Jamie Nordmeyer - Taekwondo Yi (2nd) Dan
Portland, Oregon, USA
www.defaultn.com

HELP I had this problem few days ago and abandoned this solution....

KarmasAgent

21:19 17 Jul '07

... because when I added attributes to my body tag it wiped out all other body tag attributes in my actual stylesheet.
The stylesheet is loaded in code-behind after a browser check (stewwwwpid IE6 makes "gymnastics" my second hobby) in the Page_Load method that also displays different header and logos if its IE6. When I attempt to alter the <body> properties in the same manner, by appending styles at runtime to those in the stylesheet it has no effect.

NOW, obviously I could do another browser check on the client side to control specific background attributes with JavaScript but I'd like to only do that once per page load frankly and not maintain two spots for browser sniffs..

Let me clarify, I didn't abandon YOUR solution, I came to this same solution on my own after a few hours and even more grey hairs, seeing YOUR solution gave me hope I actually was on the right track... I'm sorry if this is a stupid question, i'm a designer doing c# to make my designs work, worse than a n00b I tell ya.

Confused

access from Control

OmidH

19:58 17 Jul '07

You have any Idea how to access the BodyTag from a Control??? thanks in advance, Omid
Sign In·View Thread·PermaLink

good!!

nikhilmittal

1:49 16 Jul '07

hi very nice thought
Sign In·View Thread·PermaLink

good job!

york zhang

0:29 15 Jul '07

very nice ! in this way i can do more things i want!thx!
Sign In·View Thread·PermaLink

Good thinking

Adam Tibi

6:32 6 Jul '07

Hi You can use this idea to access all HTML elements contained in the MasterPage, not just the body element. You can access the meta tags and the html tag, for example. Going a step further you can reuse this in all your projects and a good way to do that is to use the Page Controller design design. Regards, Adam Tibi Make it simple, as simple as possible, but not simpler.
Sign In·View Thread·PermaLink

Why would you want to do this?

Kevnz

18:53 1 Jul '07

For the life of me I can't see this being a good idea. There are such better ways to attach javascript events to a page.
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

Re: Why would you want to do this?

Chuck Bevitt

14:03 2 Jul '07

OK - I'm always willing to learn. What would be another way to do this?
Sign In·View Thread·PermaLink

Re: Why would you want to do this?

Davide Icardi

15:08 2 Jul '07

Currently I'm not sure that this is the exact syntax but I think that you can register a client script with a code like this: `page.load = yourJsFunction;` ... or a similar code. But in my opinion your solution is a little better (more object oriented ...). Davide
Sign In·View Thread·PermaLink

Re: Why would you want to do this?

shroomy

8:05 16 Oct '07

Its much easier to maintain if you keep all the code in the codebehind. I used this approach for adding an onresize handler for the few pages that needed it. and also to change the scroll to be no. I even know of a way to change the body to scroll ="no" besides this, though im sure there is a way. thanks for the post
Sign In·View Thread·PermaLink

Re: Why would you want to do this?

KellyLeahy

15:37 2 Jul '07

You're missing the point. The point of this is to show how to add attributes to the body tag, not how to add script to the page. Of course, adding script to the page is one possible use for this, but as you said, this may not be the best way to do that. It is, however, the best way to gain access to the entire "body" object in server-side code so that you can make attribute additions, style changes, etc. I've done this many times, in fact, both in master pages and in my regular pages as well. I also recommend the use of the @MasterType directive on your "child" pages, so that you can refer to the master page by a strongly typed reference.

Kelly

Re: Why would you want to do this?

Edelman

3:21 7 Aug '07

basically, you can use the same masterpage and style it differently. <body id="homepage"> and <body id="downpage"> can be two completely different looking pages if you write your CSS correctly. this is a very useful idea. DotNetDiscussion[^]
Sign In·View Thread·PermaLink

Great

Ben Daniel

16:12 28 Jun '07

I've wondered how to do this very thing before myself so this is great. Thanks. Thanks, Ben
Sign In·View Thread·PermaLink

Body tag...

KellyLeahy

15:16 28 Jun '07

Not bad, but I'd recommend you remove the set accessor for the property declaration. Otherwise, you could replace the body tag with an improper object inadvertently (a very bad thing, since it wouldn't properly update the hierarchy of the master page as the code is written now). Kelly Leahy Milliman, Inc.
Sign In·View Thread·PermaLink

Last Visit: 13:41 6 Jul '09 Last Update: 13:41 6 Jul '09

12 Next »

General News Question Answer Joke Rant Admin

PermaLink | Privacy | Terms of Use
Last Updated: 30 Jul 2007
Editor: Genevieve Sovereign