MVC: capture route url's and pass them to javascript function

Question

Short:
Is there a way to have a route-definition that will pass the "CONTROLLER/ACTION" string value to a javascript function in stead of actually going straight for the controller action?

More:
I have a masterpage which contains the navigation of the site. Now, all the pages need this navigation wrapped around it at all times, but because I didn't want the navigation to constantly load with each pagecall, I changed all my pages to partialviews. These partial views are loaded via the JQuery.Load() method whenever a menu item is clicked in the navigation.

This all worked very good, up till now because I noticed it's also a requirement of the website to be able to link directly to page X, rather then default.aspx.

So, as an example:
The main page is my "default.aspx" page, this utilizes my master page with the nagivation around it. And each call to a new page uses a javascript function that loads that particular partial view inside a div that is known in my masterpage. So, the url never changes away from "default.aspx", but my content changes seemlesly.

The problem is, those url's also need to be available when typed directly into the address bar. But, they're partial views, so loading them directly from the address bar makes them display without any masterpages around them. Therefore my question if it might be possible to capture the route typed into the address bar and pass that on to my javascript function that will load that route in the content div.

(I hope I explained it ok enough, if not, feel free to ask more information)

Answer 1

You could use hash anchor (#) on your url and read it with javascript.

var url = document.location.toString();
if (url.match('#')) {
  anchor = url.split('#');
  // do whatever with anchor[1] .. 
}

Answer 2

First challenge, as you are using AJAX to load the partial pages you need client accessible URLs for the javascript to call. Second challenge, you need URLs that will load the HomeController and pass the 'page' portion of the URL into the javascript.

For the first aspect I'd create some abstracted routes, i.e. "/ajaxaccess/{controller}/{action}/{id}" for the partial pages. That would be the first registered route. A second route would accept any controller/action reference and always get processed by the HomeController Index action.

In the /Home/Index action you grab the requested URL and slice it up, take the /{controller}/{action}/... section and pass that into your default.aspx using TempData. In your page check for the existence of the TempData and if it exists use the value therein to trigger your AJAX page load for the partial page (don't forget that you'll need to prepend '/ajaxaccess' (or whatever you choose) to the URL before it's passed to your page.

I'm not going to provide code here as I think the information you'll gain from working through this yourself will be invaluable to you moving forward.

Answer 3

you can do something like this, put this in your javascript code on the view

var szUrl=<%= ViewContext.RouteData.Route.ToString()%>;

then the current route will be stored on the variable szUrl

Answer 4

You are 100% correct to not want to hard code your URLs in your javascript code as it demolishes one of the primary tenants of MVC to do so. I'm one of those "separation of concerns" guys who will not write a single line of javascript outside of a dedicated .js file so I cannot dynamically specify the URL the way tuanvt has. What I do is use MVCs Url.Action method to emit my service URLs into hidden inputs on the master page (or the specific page if it is not used in multiple places). Then my script file simply pulls the value out of that hidden input and uses it just fine.

ASP.NET MVC View Source

<input id="serviceUrl" type="hidden" value="<%= Url.Action("Action", "Controller") %>" />

JS Source

$.getJSON($("#serviceUrl").val(), function(data) {
    //write your JS success code here to parse the data
});