The Wight Stuff

Thursday, 22 March 2007

Using body onload with ASP.net 2.0 MasterPages

I was recently scratching my head trying to figure out how to use Master Pages with .net 2.0 and Visual Web Developer. There didn't seem to be an out-of-the-box way to do this, so this is how I did it.

MasterPage.master


...

<head>

  <asp:ContentPlaceHolder runat="server" id="Headers">

  </asp:ContentPlaceHolder>
  <script language=javascript>
    function mp_onload()
    {
      if(window.body_onload != null)
      window.body_onload();
    }
  </script>
</head>
<body onload="mp_onload();">

...



This way, if i have a content page that may require an onload event then I just create a function called body_onload in Headers content area of each page that requires it.

Default.aspx


<asp:Content ID="Content2" ContentPlaceHolderID="Headers" Runat="Server">
  <script language="javascript">
    function body_onload()
    {
      //do something
    }
  </script>
</asp:Content>

posted by Alex Wight at 13:29

34 Comments:

  • Hai, Thanks, I was trying almost all those methods found in the Net and found yours the most easy and working as required
    Saleem

    By Anonymous Saleem, At 16 September 2007 20:29  

  • Did the trick for me too!
    Thumbs up!

    Tom

    By Anonymous Anonymous, At 22 October 2007 15:17  

  • exactly what I've been trying to find out all afternoon.. thanks!

    By Anonymous swordfishBob, At 19 November 2007 06:08  

  • Thanks - used this construct for the body unload event too. Could not find any other way of firing a body unload event on a slave page.

    By Anonymous Donal, At 19 November 2007 16:09  

  • Thank u very much ;) a good trick.
    thanks my friend!!

    By Anonymous Ana, At 09 January 2008 22:16  

  • Work perfect. Thanks just what I needed.

    By Anonymous Anonymous, At 12 March 2008 05:49  

  • I've been trying to do this for an hour. Nice Trick!!!...Thanks

    By Anonymous Anonymous, At 28 March 2008 23:12  

  • npsgxqwWonderful, easy to understand and worked beautifully.

    By Anonymous Anonymous, At 08 April 2008 17:43  

  • wow thx hello from mexico city

    By Anonymous Anonymous, At 17 April 2008 18:34  

  • I'm new to javascript

    Sorry but it's not working for me
    I'm using a alert in both master and content page. However the alert in master page is working
    while that in content page is not working.

    i'm not too sure how to call body_onload in the content page.


    Hopefully one can find a solution .

    By Anonymous Bikram, At 24 April 2008 16:41  

  • genius! thank you, that worked wonderfully.

    By Blogger Troy, At 09 July 2008 14:46  

  • wonderfull solution!!!

    By Anonymous Anonymous, At 07 September 2008 03:06  

  • WoW!
    so simple and great,
    u r a genius!

    By Anonymous Anonymous, At 30 September 2008 21:14  

  • Groso!!!, gracias chabon...

    By Anonymous Anonymous, At 14 November 2008 17:41  

  • Right on the money! Thanks!!!

    By Blogger Rick, At 15 January 2009 23:26  

  • Thanks,

    Very nice tip!

    By Anonymous Ricardo Lourenço - Portugal, At 19 January 2009 23:31  

  • Thank you

    By Anonymous Anonymous, At 19 February 2009 06:04  

  • Thanks it works perfectly

    By Anonymous Priyanka, At 24 February 2009 04:52  

  • merci beaucoup! greetings from france...

    By Blogger kanielii, At 27 February 2009 18:53  

  • Thank you very much, it helped me so much.

    By Anonymous Anonymous, At 01 March 2009 17:00  

  • Your code is wonderful. It works perfectly on my webpage.

    By Anonymous Anonymous, At 16 March 2009 03:36  

  • Thanks DUDE! I appreciate your placing this good stuff on the inet.

    By Blogger Larry, At 16 March 2009 17:48  

  • Thanks a lot, I implemented this solution in my code!

    By Anonymous Psicologi Roma, At 23 March 2009 16:20  

  • Hi !
    Thank U very much
    It is very useful to me.
    Again thanks.

    By Anonymous Anonymous, At 29 July 2009 06:38  

  • How to set onload function from user control.
    Masterpage -> Content Page -> User Control.
    How to set it from User Control. I tried your control but didn't succeed. Any suggestions.

    Niraj

    By Anonymous Anonymous, At 30 July 2009 14:38  

  • Thank you! Worked like a charm!

    By Blogger Natalie, At 30 July 2009 21:55  

  • Thanks, much appreciated!

    By Anonymous Anonymous, At 12 August 2009 09:07  

  • Thanks! Much appreciated

    By Anonymous Anonymous, At 12 August 2009 09:07  

  • This is the easiest and complete solution. I really appreciate it.

    By Anonymous Anonymous, At 30 August 2009 04:50  

  • You made my day..had been struggling a lot to get this working.

    By Anonymous TechIT, At 28 September 2009 05:24  

  • works like a charm! easiest solution I found. thx

    By Anonymous Anonymous, At 21 October 2009 16:14  

  • This solution requires code on 2 pages. At that, one page's code is dependent upon another page's code.
    Not the "idea" scenario, cuz weeks down the road you may 'forget' about this interdependent code locking (e.g. one needs the other).

    The ideal solution should be as easy as 1-2-3. That is, have the JS OnLoad call *and* script only exist on the ContentPage with no dependence upon the MasterPage.

    So, here's 1-2-3:

    1) Set up your MasterPage and related ContentPage, having at least ONE asp:content control in the body of the MasterPage to then put content in on the ContentPage.

    2) the FIRST available body ASP:Content Control (NOT* the header content control), put this code:

    >script type="text/javascript">
    document.body.onload = function() { alert("Put OnLoad function call here."); }
    >/script>

    (NOTE: the GreaterThan is reversed so blogger.com will accept the comment)

    3) You [should!] get a JS alert displaying "Put OnLoad function call here."

    By Anonymous Anonymous, At 21 October 2009 16:35  

  • No need to have code in two pages or even to trigger the js function...

    aspx will run scripts on your content pages automatically.

    Furthermore usually when you create the master page, automatically two contentplaceholders are created: one for head and another for body. You may then, on the content page add scripts the first contentplaceholder area and it will run as a normal script in the master page.
    If you choose to put on the body of the content page, I advise to put it as far down as possible, considering the browser will process the html code sequentially from top to bottom. This way, when the script is run, you're guaranteeing that all the controls will exist.

    By Anonymous Arcélio Silva, At 04 November 2009 14:16  

  • Thanks mate. This is exactly what I needed!

    By Anonymous Anonymous, At 16 November 2009 12:02  

Post a Comment



<< Home