MVC3 call controller method from ajax

Question

I have the following code:

$.ajax({
    type: "GET",
    url: "/Search/GetNewData"  //Controller/ActionMethod
   ---snip---
)};

This works fine when run via localhost, however when it is deployed, it cannot find the controller method. I think it's probably a routing problem? But, with only a small limited knowledge using ASP.net, I would appreciate some advice.

Thanks.

There might be a problem with virtual directories in you deployment environment? Fire up Fiddler and inspect the request being made and where it goes. Make sure you can issue a request to /Search/GetNewData — Mikael Östberg
– Mikael Östberg, Commented Aug 30, 2011 at 8:41
I'm not sure Bertrand. It has been deployed by a colleague on an internal works server. — Darren Young
– Darren Young, Commented Aug 30, 2011 at 8:41
Spoke with my team lead, and yes we are running on a virtual directory. Any tips on how this should be handled? Thanks. — Darren Young
– Darren Young, Commented Aug 30, 2011 at 8:45

Bertrand Marron · Accepted Answer · 2011-08-30 08:53:11Z

3

You really don't want to specify the URL directly in your JavaScript.

You need to use helpers; otherwise if you change your routes, you'll have to rewrite all the URLS in your JavaScript code. Also, it won't work if your website is hosted in a IIS virtual directory (what seems to be the issue here).

You have a couple solutions here, if your JavaScript code is embedded inside a view, simply use

$.ajax({
    type: 'GET',
    url: '@Url.Action("GetNewData", "Search")'
)};

If it's inside an external JavaScript file, you could, for example, use HTML5 data-* attributes to share the URL to your JavaScript code.

For example:

<div id="foo" data-update-url="@Url.Action("GetNewData", "Search")">
</div>

Then the JavaScript code would be something like

var updateDiv = $('#foo');
$.ajax({
    type: 'GET',
    url: updateDiv.data('update-url'),
    success: function(data) {
       updateDiv.append(data);
    }
)};

edited Aug 30, 2011 at 8:53

answered Aug 30, 2011 at 8:46

Bertrand Marron

22.3k8 gold badges63 silver badges95 bronze badges

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

5 Comments

Darren Young Over a year ago

Thanks, this looks like an ideal solution, unfortunately I didn't set the project up to use HTML 5 semantics!

Bertrand Marron Over a year ago

It doesn't really matter as long as you can access them with jQuery.

Darren Young Over a year ago

I get an error saying that the data-* attribute is not a valid member of div. I thought this may have been due to not having HTML5 semantics? Thanks.

Bertrand Marron Over a year ago

Yeah, the validation schema is probably just set to HTML4.01, you can change that anytime, there's a drop down list somewhere in Visual Studio to do so.

Darren Young Over a year ago

I think I may need to update VS2010 then, as that option is not in the drop down. I think i'll need to grab SP1. Thanks.

jgauffin · Accepted Answer · 2011-08-30 08:47:02Z

2

The following snippet would work for both virtual directories and web sites.

var baseUri = '@Url.Content("~/")';
$.ajax({
    type: "GET",
    url: baseUri + "Search/GetNewData"  //Controller/ActionMethod
   ---snip---
)};

You can also define the baseUri variable in your layout (above all <script tags) to be able to use it in all included javascripts.

answered Aug 30, 2011 at 8:47

jgauffin

101k45 gold badges245 silver badges378 bronze badges

3 Comments

jgauffin Over a year ago

no, but the OPs problem seems to be root vs virtual dir. And it will work for that.

Darren Young Over a year ago

I am using a seperate JS file, and the razor syntax will not work there. Thanks anyway.

jgauffin Over a year ago

@Darren Young: Read my answer again, especially the last sentence

user338195 · Accepted Answer · 2011-08-30 08:51:14Z

0

Install FireBug for FireFox. Open .NET panel and Console panels. Request the URL to see whether you get any errors. If none found, then learn to use a debugger. This is by no means a quick fix, but it will help you in the future to fix these sort of problems yourself. Good luck.

answered Aug 30, 2011 at 8:51

user338195

Collectives™ on Stack Overflow

MVC3 call controller method from ajax

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related