Question

A partial view that I’m using requires certain jQuery libraries to be included, and I’m currently trying to think of the best way to nicely add them.

My current setup is as follows:

_Layout.cshtml:

...
@if (ViewBag.jQuery)
{
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
            type="text/javascript"></script>
}
...

Index.cshtml:

...
@{ Html.RenderPartial("PartialView", 
       new MVCModel.Models.MyModel(), 
       new ViewDataDictionary { { "ViewBag", ViewBag } }); }
...

PartialView.cshtml:

...
@{
    if (ViewBag.ViewBag != null)
    {
        var vb = (dynamic)ViewBag.ViewBag;
        vb.jQuery = true;
    }
}
...

So what I’m trying to do is “turn on” the library in the partial view, and have that boolean propagate up to the master layout. This makes it so that I can enable the library as much as I want wherever I want (many partial views, or one view used multiple times), but it will only get included once. On top of that, I get control over the ordering of the includes, so I can make sure a files dependencies are included first.

I’m just wondering if there is a nicer way of pulling this off.

Right now my two biggest issues are:

1. The ViewBag is not strongly typed, so intellisense won’t tell me which libraries are available to me.
2. Passing the ViewBag to the partial view, just so I can re-use it.

Answer 1

Here is a simple way to accomplish your objective.

There is a function in MVC Razor views called RenderSection. It has a syntax like

@RenderSection ("occasionalScripts", false)

(occasionalScripts is the name of the section and false means the section is optional and may not appear in every page.)

You would want to include this in your _Layout.cshtml which is Views\Shared. This will allow your main script template to display a section with your script definitions if you have it defined for a particular view.

Generally, you want to put this at the bottom of your page just before the closing </body> tag. (This is a best practice for performance.) I would list all of my other scripts (the ones which load on every page) just above it. The reason is because the load order of jQuery scripts is very important.

In each of your views where you have special scripts, add the following:

@section occasionalScripts {
... put script references here
}

If you have a view which requires no special scripts, then you don’t need to include this section there. The false on the @RenderSection tag will accommodate any view where the @section tag is missing.

On each page where this functionality is implemented, you can select different scripts.

Optionally, you could have multiple sections defined for different categories of files.