organizing custom javascripts in asp.net mvc 4

Question

I'm new to mvc 4 and I'm wondering where I should put my custom javascript files. By 'custom', I mean scripts that are only used in specific Views or PartialViews.

I use Areas too, so that adds up the complexity. I was thinking about placing my scripts in the Script folder at the root of the application and then in a Custom sub-folder.

How would I then reference the scripts in my Views ? Should I use custom Bundles ?

Yoav · Accepted Answer · 2013-06-26 16:24:51Z

24

i think that adding your scripts to a custom folder in your scripts folder is the way to go. you can create a new bundle in the appstart\BundleConfig.cs file as follows:

bundles.Add(new ScriptBundle("~/bundles/custom").Include(
                   "~/Scripts/Custom/myCustom.js",
                   "~/Scripts/Custom/myCustom2.js"));

and than add the bundle to your view like this:

@section scripts{

 @Scripts.Render("~/bundles/custom")

}

this will be rendered at the @RenderSection("scripts", required: false) line on your layout file.

OR
To call only one specific script for your view you can do:

@section scripts{
<script src="~/Scripts/Custom/myCustom.js"></script>
}

note: you can drag the script file from the solution explorer into the section. you don't have to write the entire path.
EDIT - seems important so i copied this from my last comment:
in order to use minification you need to add your script to the bundle table and either add BundleTable.EnableOptimizations = true; to the BundleConfig file or set <compilation debug="false" in your web.config file.

edited Jun 26, 2013 at 16:24

answered Jan 31, 2013 at 9:19

Yoav

3,4064 gold badges36 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sam Over a year ago

thanks. I just have one problem with this approach: obviously one is likely to load only one View at a time, with one associated custom script. With a scriptbundle, I would be loading ALL of the custom scripts for every Views whenever I browse to a View. That seems overkill to me, let alone the risk of conflict between scripts (e.g: my custom scripts usually start with $(document).ready)

Yoav Over a year ago

not sure if i understand your question. the bundle defined at the scripts section will be rendered only for the view that called it. also there is no problem calling (document).ready() multiple times, see this.

Sam Over a year ago

what I meant is that if I create one bundle for all of my custom scripts, then whenever a View calls this bundle all of my custom scripts will be loaded. So I was wondering if instead I should create one bundle per custom script.

Yoav Over a year ago

if you only need to load one script then you don't need to create a bundle for it, just call the specific script in the scripts section on your view (see my edited answer).

Sam Over a year ago

yes, that's what I do at the moment. But then I don't take advantage of optimization (minifying in particular).

|

Darin Dimitrov · Accepted Answer · 2013-01-31 09:14:22Z

2

You could organize your scripts in the Scripts folder:

~/Scripts/Home/foobar.js
~/Scripts/Admin/baz.js
...

Should I use custom Bundles ?

Sure, you could bundle the scripts that always go together.

answered Jan 31, 2013 at 9:14

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

3 Comments

Sam Over a year ago

often, I only have one script per View. Would that be ok to create one bundle per unique script ? Is this not too much ?

Darin Dimitrov Over a year ago

Minifying should be enough. Also you might consider grouping functionality in one larger script that is reused between the views. It's much better to have one single minified bundle, even if not all the functionality is being used in a given view, rather than having hundreds of small scripts for each view.

Odys Over a year ago

@DarinDimitrov Isn't it better to create bundles per view? Then they can be merged and have only one or few scripts per View.

Collectives™ on Stack Overflow

organizing custom javascripts in asp.net mvc 4

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related