Sending parameters in AJAX call

Question

This has been asked before by others, but I have not been able to use their answers.

I am trying to sending some data by doing the following:

 function addForumPost() {
            var title = jQuery('#forumTitle').val();
            var message = htmlEncode(jQuery('#message').htmlarea("toHtmlString"));
            var tagNames = addTags();

            var dataPost = $.toJSON({ title: 'testingsadf', message: message, tagNames: tagNames });
        jQuery.ajax({
            type: "POST",
            url: "/Create",
            data: dataPost,
            dataType: "json",
            success: function (result) {
            }
        });
    }

I have checked, and doubled checked that the input contains data, but I only receive the data from the message parameter in my controller. The other two values are null. As you can see in the the example above, I have even assigned some static text to the title parameter, but I still only receive data for the message parameter.

The controller looks like this:

  [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(string title, string message, List<string> tagNames)
        {
          ....
        }

Answer 1

Try setting the traditional parameter starting from jQuery 1.4. This works for me:

var title = 'title';
var message = 'message';
var tagNames = ['tag1', 'tag2'];

jQuery.ajax({
    type: 'POST',
    url: '/Home/Create',
    data: { title: title, message: message, tagNames: tagNames },
    dataType: 'json',
    traditional: true,
    success: function (result) {
    }
});

With this action:

[HttpPost]
public ActionResult Create(
    string title, 
    string message, 
    IEnumerable<string> tagNames
)
{
    return Json(new
    {
        Title = title,
        Message = message,
        TagNames = tagNames
    });
}

Answer 2

Your error is very simple. If you have an action which returns JsonResult then it means not that you have to send also JSON encoded input parameters to the method. Just remove the usage of $.toJSON() and use the object as a value of data parameter of jQuery.ajax (see the answer of Darin for example).

If you call ASMX Web Service instead of ASP.NET MVC action you have to use contentType: "application/json; charset=utf-8" and convert the values of all web-method parameters to JSON but in a little other way (see http://stackoverflow.com/questions/2737525/how-do-i-build-a-json-object-to-send-to-an-ajax-webservice/2738086#2738086). But ASP.NET MVC hat no such requirement. MVC converts the input parameters which you send with respect of Parse method (int.Parse, DateTime.Parse and so on) and not deserialize from JSON. So if you search for code examples look exactly which technology are used on the backend: ASP.NET MVC, ASMX web serveces or WFC.

Answer 3

1. You don't have to post json for the type of action you described.

2. You don't have to manually assemble the fields into a map. Use .serializeArray()

   var postData = $('.myform').serializeArray()