ASP.NET MVC and JQuery get info to controller

Question

I am totally confused on how to do ajax stuffs with jQuery and it seems the more I try the more confused I get. At this point all I want to do is get data to my controller using jQuery ajax. Some code for my jquery ajax call is.

$(function() {
    $('#buttonAddLink').click(function() {
        var AjaxLink = {
            title: $("#linkTitle").val(),
            url: $("#linkUrl").val()
        };

        $.ajax({
            url: '/User/AddLink',
            type: 'POST',
            data: AjaxLink,
            dataType: 'json',
            success: function(result){
                $('.added').html(result.Result).show();
            }
         });         
    });    
});

Here is my controller and Action I am using. From trying to look at several tutorials it "should" work to the best of my knowledge, but apparently I don't get it like I thought I did.

public ActionResult AddLink(string title, string url)
{
    return Json(new { Result = string.Format(title + " " + url)});
}

All I am basically trying to do with that is do the Ajax call and return it to display just to make sure data was sent to the controller.

Solution 1

It has to do with the way you're structuring your request. Your JQuery call is sending the data to the AddLink action on the User controller as POST data, which means in your C# code, you'll access it via the Request.Form object. With what you're trying to do, you'd structure the jQuery URL as

/User/AddLink/{Title}/{URL}

This would require you to write a rule in your Global.ASAX file that handled that sort of input. In short, if you just modify your AddLink method as follows:

public ActionResult AddLink()
{
    return Json(new { Result = string.Format(Request.Form["title"] + " " + Request.Form["url"])});
}

I believe you'll get the response you're looking for.

Solution 2

Ok, try this code using Ajax to pass data to your action method:

jQuery.ajax({
            url: '@Url.Action("AddLink", "User")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ title: title, url: url }),
            success: function (result) { }
        });

Solution 3

Have you tried writing out the full URL? I had a project running on my local IIS that had the same problem. The full url was http://localhost/myproject/user/addlink, but using "/user/addlink" in the jQuery ajax call was submitting to http://localhost/user/addlink (notice that "myproject" is missing because it's not actually the base url as far as jQuery knows).

Solution 4

Use a tool such as firebug to make sure that the url you expect is being called.

Debugging routine =>

1. Use Firbug to determine that the correct url is being called and the correct data is being sent in the post
2. Break the call in the action and make sure the parameters are being populated correctly
3. Use Firebug again to check the response

IE developer Toolbar can also be used instead of Firebug if you prefer IE. if the call url and post data seem correct, and the action isn't being called you should check your routing rules. ie does it have any default values in which case the MVC framework will be looking for a method signature that contains those default values (do you have {id} in your url rule?)

View more solutions

Comments

[buildmaster]

have you used firebug to check what data is being sent? is the action being called (which would relate to a routing problem)?

[Andrew Barber]

You just keep posting this same code snippet as the answer to every mvc/ajax question you can find. It's actually not helpful here. -1