CODEWITHSUNDEEP
c#asp.netasp.net-mvcasp.net-mvc-3
Nistor Alexandru
Nistor Alexandru

Reputation: 5393

Get query string from an ajax call

Hi I am trying to get a querystring from an ajax call and it does not seem to work so well.Here is my code:

@Ajax.ActionLink("Add To Cart" ,
                             "AddToCart" ,
                             "Products", 
                             new {
                                    ProductId = @products.ElementAt(0).Value
                                 },
                             new AjaxOptions{
                                               Url = "/Products/AddToCart",
                                               InsertionMode = InsertionMode.Replace,
                                               UpdateTargetId = "UpdateCart",
                                               HttpMethod = "GET"
                                            })

Each link I have in my application calls something like this:

Products/AddToCart?ProductId=5

This is the controller it calls:

public ActionResult AddToCart(string ProductId)
    {
            string ProductCeva = ProductId;
    }

Now from what I learned so far about MVC3 I assumed that the parameter ProductId would be 5 in our case , but when I debug the code , I get that it is null.

What am I doing wrong here and how can I get the ProductId query string in this casE?

Upvotes: 0

Views: 2075

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038770

Remove the Url = "/Products/AddToCart", bit from your AjaxOptions.

Why?

Here's why. The following code:

@Ajax.ActionLink(
    "Add To Cart" ,
    "AddToCart" ,
    "Products", 
    new {
        ProductId = @products.ElementAt(0).Value
    },
    new AjaxOptions {
        Url = "/Products/AddToCart",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "UpdateCart",
        HttpMethod = "GET"
    }
)

generates:

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#UpdateCart" data-ajax-url="/Products/AddToCart" href="/Products/AddToCart?ProductId=5">Add To Cart</a>

Now even if the href of the generated anchor is correct (/Products/AddToCart?ProductId=5) that's not what is used for the AJAX request. The jquery.unobtrusive-ajax.js that you are using and which unobtrusively AJAXifies all anchors uses the data-ajax-url attribute (if present) when sending the AJAX request instead of the href attribute. Now look at the value of the data-ajax-url attribute and you will understand why you get null in your controller action.

You would also have seen this if you had used FireBug or a similar javascript debugging tool because when you would have inspected the Network tab to see why your AJAX request is not working you would have seen the wrong url being used.

Long story short two things to remember from this question (the first being more important as it allows you to deduce the second):

  1. Use FireBug
  2. the Url property of the AjaxOptions allows you to override the url to be used when sending the AJAX request.

Upvotes: 4

Related Questions