MVC - is there a nice way to bundle controls with their respective javascript?

Question

I'm pretty new to MVC and I can't decide on the best way to store cshtml files and their respective javascript code. Some JS code in my project needs to run globally, but most of it is entirely tied to specic views or partial views.

If I put the javascript in the views, I get a mess of inline uncacheable javascript, if I put it in one central file, I lose modularity.

I heard that in MVC4 there are going to be minification features, is there something I can do with MVC3 that will allow me to choose in the Views which javascripts to include and then group them and minify them automatically? (maybe even in groups?)

Have both, code that's reused in a global file and code that is view specific in the view. — aziz punjani, Mar 06 '12 at 20:33
One of my concerns is having many http calls to many different files, so if I put control specific code in a separate file, I end up with a lot of requests — Madd0g, Mar 06 '12 at 20:39

Paolo Moretti · Accepted Answer · 2012-03-06T21:45:43.790

Cassette it's essentially the same thing as the upcoming MVC4 bundles.

In your view page, you can reference scripts and stylesheets using Cassette's Bundles helper class.

@{
    Bundles.Reference("Scripts/jquery.js");
    Bundles.Reference("Scripts/page.js");
    Bundles.Reference("Styles/page.css");
}
<!DOCTYPE html>
    <html>
...

In addition, Cassette has native support for Less and CoffeScript. It has also support for HTML Templates, if you are interested in client side MVC frameworks like Knockout.js or Backbone.js.

Still you have to choose how to group your content. As the official documentation is suggesting, probably the best choice is to treat bundles as units of deployment.

Keep in mind that a bundle is a unit of deployment. If any asset in a bundle changes, then the entire bundle has to be downloaded again by web browsers. So perhaps group shared code into a bundle and put page scripts into their own bundles.

score 1 · Answer 2 · answered Mar 06 '12 at 20:35

1

You can put the javascript in separate files, for each view. Then in the _Layout.cshtml enter a @RenderSectionto the head:

<head>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
    @RenderSection("head",false)
</head>

Then in each view, you can put a section that will be rendered into the header:

@section head{
    <script src="@Url.Content("~/ViewScripts/Order/New.js")" type="text/javascript"></script>
}

answered Mar 06 '12 at 20:35

Anders Abel

67,989
17
150
217

yep, I know about sections, but what if two partials need the same javascript? I don't want multiple calls to the same file, I know that practically the browsers won't call them twice, but they'll still be in the html – Madd0g Mar 06 '12 at 20:38
My solution only handles the "specic views" views case. I haven't had the need for partial-specific scripts (yet), so I haven't thought out a solution. – Anders Abel Mar 06 '12 at 20:40
nitpick, put the JS section before the closing `
` tag, not the `
` tag (prevent blocking)
– RPM1984 Mar 06 '12 at 22:15

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

You'll want to use a method like this: http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution/

See this post: Using Rails 3.1, where do you put your "page specific" javascript code?

edited May 23 '17 at 10:24

Community

1
1

answered Mar 06 '12 at 20:38

tybro0103

48,327
33
144
170

I was hoping that this already exists as part of some minification addon for Visual Studio that would allow to group a lot of little js files together by controller or controller group – Madd0g Mar 06 '12 at 20:52

Kevin Junghans · Answer 4 · 2012-03-07T14:51:10.027

0

@Anders approach is good if you require the scripts to be in the head tag. But I find that most times it is not required if it is page specific JavaScript. You can put your script tags that reference your script files wherever they are required in the View. Automatically bundling and minification will be supported in ASP.NET 4.5. Until that time you can integrate yuicompressor into Visual Studio.

edited Mar 07 '12 at 14:51

answered Mar 06 '12 at 20:52

Kevin Junghans

17,475
4
45
62

I'm really surprised, I thought I was asking a silly question and that people are going to laugh and provide me with lmgtfy links. I'm not even that far into my project yet and it hurts me every time I need to write page-specific javascript. The layered controller/view system of MVC is perfect for something like this.. – Madd0g Mar 06 '12 at 21:18
It depends on the type of application. If you are going to have a rich UI that depends a lot on AJAX then page specific javascript is required. In this case you move the MVC or MVVM into the page using a framework like Knouckout.js or Backbone.js. – Kevin Junghans Mar 07 '12 at 13:06

score 0 · Answer 5 · answered Mar 06 '12 at 22:05

It is not a best practice to use script in partials (in my point of view)

is suggest you to write partial specific script to separate js and bind events on page load or if partial was loaded via ajax then on success event.

then you can be sure that events are not bound multiple times and view is just a view

MVC - is there a nice way to bundle controls with their respective javascript?

5 Answers5