jQuery Ajax: Reference MVC controller url from App root

Question

I have an ASP.NET MVC web application running from http://localhost/myappname. From jQuery, I make jQuery $.ajax() calls to return partial views based on some user action. I usually call this from a view in the same controller that contains the function I am calling via Ajax. For example, a view in my Home controller has the following function (which works well):

function loadMyPartialView() {
    $.ajax({
      type: 'GET',
      url: 'Home/GetNavigationTreePV/',
      success: function (data) { onSuccess(data); },
      error: function (errorData) { onError(errorData); }
    });
    return true;
}

This above url gets resolved to http://localhost/myappname/Home/GetNavigationTreePV and the partial view is returned correctly.

Now, I am trying to use qUint to unit test my functions. In this test case, I just want to verify I get to the end of the function and return true. I have created a QUNIT controller and corresponding view (which loads my unit test JavaScript file). From the test.js file that contains my unit tests, I try to make calls to the same functions that are in my Home views, like the one above. But, since I am now running out of the QUNIT controller, the url gets resolved to http://localhost/myappname/qunit/Home/GetNavigationTreePV.

I have tried changing the url of my ajax request to /Home/GetNavigationTreePV/ (with the preceding forward slash), but when I do that I get the following url http://localhost/myappname/Home/GetNavigationTreePV.

So, to be clear, I am trying to write my ajax request in a way that will always start from the root of my MVC application, and then append the url parameter given in my $.ajax() function.

Is there an easy way to do that? Am I going about this in a weird way?

Steve · Accepted Answer · 2011-10-10 14:29:55Z

11

I think in your MVC View page you need @Url.Action

   function loadMyPartialView() {
        $.ajax({
          type: 'GET',
          url: '@Url.Action("GetNavigationTreePV", "Home")',
          success: function (data) { onSuccess(data); },
          error: function (errorData) { onError(errorData); }
        });
        return true;
    }

Alternatively you can use @Url.Content

   function loadMyPartialView() {
        $.ajax({
          type: 'GET',
          url: '@Url.Content("~/home/GetNavigationTreePV")',
          success: function (data) { onSuccess(data); },
          error: function (errorData) { onError(errorData); }
        });
        return true;
    }

If this is in a .js file, you can pass in the Url like

loadMyPartialView('@Url.Action("GetNavigationTreePV", "Home")')

edited Oct 10, 2011 at 14:29

answered Oct 10, 2011 at 14:21

Steve

2,9972 gold badges32 silver badges48 bronze badges

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

4 Comments

MattW Over a year ago

No luck. In that case, the URL was resolved as: localhost/ctsw/qunit/@Url.Action ....

MattW Over a year ago

Ahh ok ... in this case, I think I may need to do this from a .js file in order to make use of the qUnit testing framework. Let me see of I can write unit tests in the view.

Steve Over a year ago

You can pass in the url into the javascript e.g. loadMyPartialView('@Url.Action("GetNavigationTreePV", "Home")')

MattW Over a year ago

That was a thought of mine as well, but I am looking for a way to not do that first. That is a last resort type of thing. I do appreciate the input though!

MattW · Accepted Answer · 2011-10-17 16:18:31Z

10

I was able to accomplish this with straight JavaScript using window.location.pathname. See the following example:

function loadMyPartialView() {
    $.ajax({
      type: 'GET',
      url: window.location.pathname + 'Home/GetNavigationTreePV/',
      success: function (data) { onSuccess(data); },
      error: function (errorData) { onError(errorData); }
    });
    return true;
}

answered Oct 17, 2011 at 16:18

MattW

13.2k5 gold badges42 silver badges65 bronze badges

1 Comment

binu Over a year ago

This is exactly what I was looking for as well. I was facing problem when deploying my app on IIS, in that case the url mentioned in the js file was not resolving correctly.

Collectives™ on Stack Overflow

jQuery Ajax: Reference MVC controller url from App root

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related