MVC $.getJSON works first time on master page, then stops calling url on subsequent loads

Question

I have an MVC masterpage set up which loads a dynamic menu using AJAX Templates and JSON - the JSON is returned with the following call:

var tabList = []; //this holds the json data on the callback

var getTabs = function () {
    $.getJSON('Home/TabList', null, function (json) {
        Sys.Observer.clear(tabList); 
        Sys.Observer.addRange(tabList, json); 
    });
}

if (tabList == '') { getTabs(); }

So this calls a function on my HomeController to return JSON:

   public JsonResult  TabList()
    {
            //get tabs
            ... //call code to get tabs - removed for ease of reading this question
            JsonResult jsonTabs = Json(tabItems);

            jsonTabs.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return jsonTabs;
        }
        catch (Exception ex)
        { throw ex; }

    }

This is used in the following template: binding:

id="tabTemplate" sys:attach="dataview" class="sys-template grid_16 topnav" dataview:data="{{ tabList }}"

creating the menu items using an anchor tag:

sys:href="{{'/' + Controller + '/' + Action + '/'}}" target="_top"

Populating the menu text using a property from the JSON object:

{{Text}}

I then attached this master page to 2 different MVC pages ("Index" and "About", and global.asax takes me to "Index")

So, this works great the first time I go in to the page, and the menu is drawn correctly, but when I click the About menu item which has been generated in the above template with the link "Home/About" then it stops working. What happens is that the javascript is called correctly (i.e. it calls the "getTabs" function and passes through the getJSON call) BUT it doesn't actually hit my controller to get the JSON (I put a brekpoint on the controller action and it is not hit in this case).

I am totally at a loss and have been trying to solve this for days. Any help would be greatly appreciated.

Thanks.

Answer 1

I think it may be because your .getJSON request is calling the relative path Home/TabList.

When you are on the home page, e.g. http://localhost/, the .getJSON request will call http://localhost/Home/TabList which, as you say, works.

BUT then when you are on a subsequent page, e.g. http://localhost/Home/About the .getJSON request will call http://localhost/Home/About/Home/TabList which, as you say, won't work :-)

Anyway, try calling the absolute path /Home/TabList

E.g.

$.getJSON('/Home/TabList', null, function (json) {

NOTE: The extra forward slash at the beginning.

HTHs,
Charles