Question

I am working on an ASP.NET MVC3 app. I was reading about good Javascript practices in various places and decided it would be best if I externalized the javascript and jQuery calls that were sitting in a <script/> tag at the bottom of my views.

I put each view’s Javascript in a separate file with a standardized naming convention so I could generate the <script/> tag to include the appropriate file in my layout view.

But it’s on the verge of being too complicated to be maintainable, and I have run into one problem that breaks the whole scheme, namely the need to occasionally insert URLs into the javascript.

For example: if I’m doing a $.getJSON call, I need to provide a URL. I’ve been generating them on the server side, in the views, using the UrlHelper class, like so:

var _RegistrationSelectClassUrl = '@Url.Action("SelectClass", "Student", new { area = "Registration", id = Model.Person.PersonID })';

And this worked nicely … up to the point where I externalized the javascript. No longer being part of views, calls to UrlHelper were just strings again.

So my question is this: if I stick with the externalized javascript, I need a way to insert or generate the appropriate URLs. Other than sticking a script section in the layout file that uses UrlHelper to define a constant for every URL I might want to use, I can’t think of a good one.

Any suggestions?

Answer 1

External JS:

var namespace = {
    init: function (url) {
        this._RegistrationSelectClassUrl  = url;
    },
    _RegistrationSelectClassUrl: ''
};

View:

<script src="external/js.js" />
<script>
    namespace.init('@Url.Action("SelectClass", "Student", new { area = "Registration", id = Model.Person.PersonID })');
</script>  

This is a basic example.