ASP.NET MVC 3 Razor Partial View - jQuery Included In Main Layout

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:

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

score 1 · Accepted Answer · answered Oct 31 '11 at 21:47

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.

score -1 · Answer 2 · answered Sep 26 '11 at 19:34

-1

I usually have a different approach, and consider that ALL libraries used on the web site should be referenced on every page. It does make the first load a bit slower, but then the loading of all the following pages is faster, as it uses the browser-cache.

To improve it even better, you can make all your libraries available in only one file.

I used SquishIt for that at some point. I integrates rather well in ASP.NET MVC.

answered Sep 26 '11 at 19:34

tsimbalar

5,790
6
37
61

Referencing all libraries on every page is not a great idea if the libraries are only needed on a few pages. This needlessly wastes bandwidth and complicates the page. – Anthony Gatlin Oct 31 '11 at 15:19
I disagree. I think it is not wasting bandwidth to compress ALL your references and have the client browser download it once (only one request instead of 1 request per library) and rely on the browser's cache. And I do not see how it complicates the page ... loading it differently on each page does complicate the maintenance ... – tsimbalar Oct 31 '11 at 16:33
It depends on how many files you are downloading and whether you actually need all those files on every page. There are many times I will have 20+ Javsascript files which are being used on different pages. There is absolutely no reason to have all of these on every page--especially if a user is unlikely to visit pages which require some of the files. Also, when you are doing a lot of jQuery, you do run the risk of collisions and other issues. And... there is nothing that prevents the minification of all your files. Additionally, multiple minified files can be loaded in simultaneously. – Anthony Gatlin Nov 01 '11 at 21:56

ASP.NET MVC 3 Razor Partial View - jQuery Included In Main Layout

2 Answers2