views:

7252

answers:

4

I have a view using a master page that contains some javascript that needs to be executed using the OnLoad of the Body. What is the best way to set the OnLoad on my MasterPage only for certain views?

On idea I tried was to pass the name of the javascript function as ViewData. But I dont really want my Controllers to have to know about the javascript on the page. I really don't like this approach...

<body onload="<%=ViewData["Body_OnLoad"]%>">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />

Edit - I suppose one idea would be to use jQuery's document ready event instead...

Any other ideas?

A: 

You should definitely be using jQuery or another JavaScript framework anyway.

Have your controllers pass some kind of status indicator to your views, but not views-specific things like the names of JavaScript functions. It is up to your views to map status indicators to JavaScript function names.

Justice
+2  A: 

I have been using the following pattern with my current MVC project and it seems to be working pretty good for my .js work thus far...

Within my Master Page I load up my standard script files that I want to be used in all of my content pages (things like jquery.js, global.js, jquery-plugins, .css files, etc.). I then define whatever events that are needed in my master page (onLoad, onSave, etc.). Each content page that I create will have it's own .js file associated with it and I load that script file within the content .aspx page. Any .js events that need to be implemented differently between content pages are handled within the individual content .js file. So basically my Master Page has a set of .js functions that my content page scripts will implement. Right now I just store those template .js function signatures in a file and copy and paste them into every new content.js file that I need to create. However, I'm thinking about building a code generator or tool that would spit these template signatures out for me in any new .js file I need created (if .js has some form of interface capability or inheritance features let me know).

So to recap:

MasterPage.Master Loads: jquery.js, global.js, plugins.js

ContentPage Loads: ContentPage.js

Global.js contains functions that the master page invokes that do not change between content pages along with any other global routine functions.

Each ContentPage.js implements it's own functions for the content page along with those functions the master page invokes that have different behavior.

SaaS Developer
Thanks for your suggestion. I just might play around with this idea. If you ever do create a tool or generator be sure to post it here!
Vyrotek
+3  A: 

Now that JQuery is officially part of ASP.NET MVC, I would recommend using it. It's small, and adds tons of value to your application.

I would recommend adding Mustafa's version of JQuery that has the Intellisense comments included:

jquery-1.2.6-intellisense.js

Then add it to your Scripts folder (new in MVC Beta 1), and reference it like this:

<script language="javascript" type="text/javascript" src="../../Scripts/jquery-1.2.6-intellisense.js"></script>

In your code you can now add a function like this:

$(document).ready(function() {
   // do stuff when DOM is ready
});

Since you mentioned that you only want it to happen in certain views, you could add a placeholder in your Master Page like this:

<asp:contentplaceholder id="JavascriptPlaceholder" runat="server"></asp:contentplaceholder>

Then in your View, you could choose to put code in there, or not.

which would go inside of the head section

David P
+4  A: 

Solution from Blog: Using body onload with ASP.net 2.0 MasterPages

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();">

Default.aspx

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