CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-post
scottm
scottm

Reputation: 28701

jQuery posts data to wrong relative URL

I have an ASP.Net MVC application. I am trying to post data to an action, and then just render the output. I have a page where you can view a product, so www.mysite.com/product/details/1 shows the product. On this page, I render a partial view through RenderAction() that contains some pricing logic. I want the user to select some options and then have jquery post the options to get the new price.

However, when I call 

$.post({
  url : "price/getprice",
  data : {"options" : chosenOptions},
  success : function(data) {
              $("#price").text(data);
            }
});

The url is posting to www.mysite.com/product/details/price/getprice which doesn't exist. I've tried posting to "~/price/getprice/" but it does the same thing. Why won't it go to my PriceController's GetPrice(FormCollection form) action??

This should post to www.mysite.com/price/getprice. When I look in the Net tab in firebug, it says it's posting this:

http://localhost:42427/Product/Details/%5Bobject%20Object%5D

If I look at the response in Firebug, the application is throwing an exception:

The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Details(Int32)' in 'PrintPlaceWebsite.Controllers.ProductController'.

But I'm not trying to post to that location so...ugh.

Upvotes: 1

Views: 4613

Answers (5)

Dev
Dev

Reputation: 1541

The one which worked for me is:

In the view : add 

<span data-url="@Url.Content("~/ControllerName/ActionName")" id="getValues" class="hidden"></span>

Note: Make sure to use the forward slash('/')

In the Jquery file,

var getValues = $('span#getValues').attr('data-url');

In the Ajax call, Set 

 $.ajax({
            type: 'GET',
            url: getValues,
            data: { id: abc},
            cache: false,
            success: function(result) {
             }
       });

Upvotes: 0

scottm
scottm

Reputation: 28701

So, it turns out it was a little typo on my part (an everyone else's because you all copied it).

To reiterate:

$.post({
  url : "/price/getprice",
  data : {"options" : chosenOptions},  <<<<< Right here. dang.
  success : function(data) {
          $("#price").text(data);
        }
});

Do you see it?

$.post({
  url : "/price/getprice",
  data : { options : chosenOptions},  <<<<< no quotes. arg.
  success : function(data) {
          $("#price").text(data);
        }
});

Upvotes: 0

Makram Saleh
Makram Saleh

Reputation: 8701

It seems that the URL router is mixing things up. Just replace the path with an absolute (full) one.

$.post({
  url : "http://mywesbite.com/price/getprice",
  data : {"options" : chosenOptions},
  success : function(data) {
          $("#price").text(data);
        }
});

Upvotes: 0

Stuart
Stuart

Reputation: 3258

As far as JQuery knows it is basing its AJAX calls on the current location which, im guessing, is www.mysite.com/product/details/. Just as if you had a link to "myPage.html" would try to go to www.mysite.com/product/details/myPage.html.

I would suggest you resolve the URL in your View with something like..

<% = ResolveUrl("~/price/getprice") %>

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816404

Well you specified a relative URL, so if this code is on site www.mysite.com/a/b/c, the URL will point to /a/b/price/getprice.

You probably want to specify an absolute URL:

$.post({
  url : "/price/getprice",
  //     ^-- leading slash
  data : {"options" : chosenOptions},
  success : function(data) {
              $("#price").text(data);
            }
});

Upvotes: 5

Related Questions