Question

Question:

What is a clear, safe and systematic way to call my MVC controllers/actions from JavaScript, but keep the related URLs in a central place for updating when controllers change? Or to dynamically generate the URLs at run-time? Or to get compile-time checking for AJAX controller linkage?

Research/Past Attempts:

I’ve recently plugged in T4MVC to my MVC project. Great! Compile-time checking for controller linkage in my views – but I still have controller URLs littered all over my JavaScript. Worse, I have evolved how I do it over the project lifetime, so I do it multiple ways that I’m still not satisfied with.

---

1) One way:

locationAutoComplete = new AjaxQueue({
 Controller: "Utilities", // null for current controller
 Action: "GetMatchingLocations",
 DataModel: null, // null for raw JSON, or a local model to populate
 MaxQueuedRequests: 0
});

---

2) Another way:

locationAutoComplete = function (location) {
 return $.ajaxPost(resolveUrl("~/Utilities/GetMatchingLocations"));
}

---

3) Both 1 and 2 above make use of a project root defined in a Master/Layout JavaScript snippet, but still use unchecked URL strings. So now I’ve started benefiting from T4MVC by simply defining controller strings in my .CSHTML view:

var locationLookupController = @Url.Action(MVC.Utilities.GetMatchingLocations());

---

4) The SO article ( Ajax call Into MVC Controller- Url Issue ) addresses this a little. It talks about method 3, but also suggests using the AjaxHelper namespace. Since I make heavy use of jQuery AJAX with some pretty customized interactions (e.g. loading results into a local data model, not at a click event but at a timed interval), I don’t think it will help me much. Today I don’t even include the MS AJAX JavaScript code on any of my pages.

Thanks!

Answer 1

Continue to use T4MVC. Mix it in with a little jQuery and HTML5 data-* attributes. Here’s an example:

<div data-location-lookup-url="@Url.Action(MVC.Utilities.GetMatchingLocations())">

...

locationAutoComplete = function (location) {
    var url = $('[data-location-lookup-url]').data('location-lookup-url');
    return $.ajaxPost(url);
}