Geeks With Blogs
Doug.Instance Improving the world one post at a time

First, some background information:  I have some javascript that requires data from the database to set values so I dynamically generate the script on the server via an action in my controller.  I only want to do this generation when the partial view using it is dispalyed.  So here is the problem:  You have javascript you only want to load when a certain partial view is displayed.  Depending on the state of data in the database, the partial view might load on page load or it might only load after an MVC AJAX call.

I use jquery in this example, however the basic principals are the same even if you don't want to use jquery and there are many examples of loading scripts into the DOM dynamically without jquery in case you are interested - just search yourelf.

There are several tasks we have to perform to get this to work:
 

  • Dynamically load a script and execute the desired function only after the script is loaded.
  • Make sure the script is loaded dynamically and not cached by the browser.
  • Make sure the script is loaded on page load if the partial view is rendered on page load.
  • Make sure the script is loaded when the partial view is rendered via AJAX.

First, we need to create a function in the page which will be called to load the script file and execute the javascript function.  This is done most easily using the jquery "getScript" function:

<script type="text/javascript">
   
function loadScriptAndInit() {
        $.getScript(
           
'<%= Url.Action("DynamicJavaScript", "MyController") %>',
           
function () {
                init();
            });
    }
</script>

This code does several important things:  It gives us a single point of access to load our script and run the required initialization function.  More specifically, it gets a dynamically generated script from my controller by using Url.Action to define the source of the script.  Finally, after the script is loaded, the "init" function in the dynamically generated script is called.
The action generating the javascript is marked with the OutputCache attribute to ensure the resulting script is not cached:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult DynamicJavaScript()

Next we will need to call the above method from inside our partial view.  This ensures the script will load and execute if the view is displayed when the page is loaded.  Once again, a simple bit of jquery will make sure the DOM is loaded before we try to load and initialize our script:

<
script type="text/javascript">
    $(document).ready( 
        function () {
            loadScriptAndInit(); 
        }); 

</
script>

This introduces our final problem to solve.  When a partial view is loaded via AJAX, javascript included in that partial view is not run by MVC AJAX.  Therefore we need to explicitly load and execute the script via AJAX.  So in the view which dynamically loads our partial view, we wire up the script once the partial view is successfully loaded via AJAX:

<%
= Ajax.ActionLink(
   
"LinkText",
    "MyAction",
   
"MyController",
   
new { id = Model.Id },
   
new AjaxOptions() { UpdateTargetId = "myTargetDiv", OnSuccess = "loadScriptAndInit" },
   
new { title = Model.Name }) %>

The important pieces here are the UpdateTargetId which identifies where the partial view is going to be displayed and the OnSuccess parameter which fires the function to load the script and execute the initialization function.
 
So that is my solution in a nutshell. There may be more robust and elegant solutions out there, but I think this one is pretty straight-forward.

Posted on Friday, November 12, 2010 1:50 PM MVC | Back to top


Comments on this post: Execute Javascript in MVC Partial View

# re: Execute Javascript in MVC Partial View
Requesting Gravatar...
Hi great tip can you post the complete sample?
Left by rene on Jun 25, 2011 6:24 AM

# re: Execute Javascript in MVC Partial View
Requesting Gravatar...
Funny how the more you learn, suddently the difficult problems go away. I haev taken a completely different approach based on some best practices others have posted. I now do all of my jQuery in a script file and not in-line. Then I uses class names or IDs to handle most of my jQuery needs. Then I have functions that "wire up" certain classes or IDs. I then call those functions using the OnSuccess parameter of the ajax options. If you look through my posts you will see some examples.

While this method works, I honestly don't even remember why I needed it because I don't do this any more.
Left by Doug on Jun 29, 2011 7:57 AM

# re: Execute Javascript in MVC Partial View
Requesting Gravatar...
Awesome article, please post complete example...
Left by manan on Jul 11, 2013 5:03 AM

# re: Execute Javascript in MVC Partial View
Requesting Gravatar...
new to mvc and jquery can you clear up what is done with


[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult DynamicJavaScript()

or provide source please..

Thank you,
Left by Modem56k on Jan 21, 2014 1:42 PM

# re: Execute Javascript in MVC Partial View
Requesting Gravatar...
Thank you, It was very informative. Can you please tell that which place is the best one to write javascript tags inside partial views?
Left by Moeen Naqvi on Feb 09, 2015 2:31 AM

# re: Execute Javascript in MVC Partial View
Requesting Gravatar...
how to do the same in jQuery? can you help with http://stackoverflow.com/questions/42941856/javascript-not-working-in-partial-view-mvc-razor-kendo-ajax
Left by samra on Mar 23, 2017 12:16 AM

Your comment:
 (will show your gravatar)


Copyright © Doug Lampe | Powered by: GeeksWithBlogs.net