How to organize external JavaScript files in ASP.NET MVC

Question

I have inline JS that is specific to the view it's in, but the code is long enough that I would like to move it to an external script. However, I don't know how to do this without polluting my scripts folder*, nor do I know what to name it.

Currently I have two folders:

• ~/Scripts for libraries (jQuery, etc.). This is where Visual Studio puts these by default so I've left it that way.
• ~/Scripts/Custom for JavaScript used in more than one view.

I'm considering creating a folder for each controller and/or its views, which would look like
~/Scripts/Custom/[Controller] . Does this bring up any maintainability concerns?

* If I put everything into ~/Scripts/Custom , I will end up with a bunch of files that look like client-create.js , client-edit.js , ticket-index.js , etc. This is more difficult to navigate than a folder structure and puts useless junk in front of what could be a useful file name.

Answer 1

create one js file for one controller. For example if you a ClientController, create one Client.js, treat your js files as javascript controllers.

This is a maintainable approach and I have worked on several huge projects using this approach.

screenshots from some projects i have worked on. The first project is pure .net mvc based project and the other project has angularjs on the frontend and .net on the backend.

Furthermore, what comes out of the box in a new mvc project makes the application complicated when it grows so its always better to customize your architecture according to the best practices(but still this is just my opinion).

Hope my answer helps you in some way.