Execute Javascript in MVC Partial View

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.