How to generate the right URLs in javascript when externalizing scripts

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?

Joe · Accepted Answer · 2012-02-13 18:55:23Z

2

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.

answered Feb 13, 2012 at 18:55

Joe

82.8k18 gold badges130 silver badges147 bronze badges

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

3 Comments

Giscard Biamby Over a year ago

I'd also go with something like this.

Ann L. Over a year ago

@JoeTuskan I suppose I'm stuck with having some JS in the view, no matter what, if I'm going to use Url.Action. Thank you!

Joe Over a year ago

yeah, unfortunately. However, this allows you to minimize the amount at least. Good luck!

Joel Etherton · Accepted Answer · 2012-02-14 16:11:35Z

1

You can't. The moment the script leaves the parsed page it loses all access to the model. If you added this code into a PartialView, you would be able to parse things with the Helper classes, but since your link is dependent on the model, your scripts will have to be generated in the page itself.

A way to externalize it might be to have a mapped array of links that is populated by the model view itself. You could then add link text into this array mapping based on some key that would then be accessible by the external script after load. I would recommend not using the global variables for this and prototype an object for this purpose.

Some documentation for this: http://www.javascripttoolbox.com/bestpractices/#namespace

edited Feb 14, 2012 at 16:11

answered Feb 13, 2012 at 18:54

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

1 Comment

Ann L. Over a year ago

That link is great! And I appreciate your suggestions!.

Collectives™ on Stack Overflow

How to generate the right URLs in javascript when externalizing scripts

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related