Jquery Ajax and asp.net mvc controller

Question

I am having some trouble with $.post() and my mvc controller.

I have tried a couple of examples on the web and stack overflow like this : How can I post an array of string to ASP.NET MVC Controller without a form?

but without success. I simply want to pass an array of string to my controller :

[HttpPost]
        public HttpResponseMessage Post([FromBody]List<string> idList, string request, bool auto)
        {
            LogHelper.Log(Severity.Info, "Just entered in POST api/files");

            var fileList = new List<string>();

            switch (request)
            {
                case "Activate":
                    fileList = auto ? _bendingsServies.GetBendigsToCome() : idList;
                    _filesServices.Activate(fileList);
                    break;
                case "Archive":
                    fileList = auto ? _filesServices.GetFilesToArchive() : idList;
                    _filesServices.Archive(fileList);
                    break;
                default:
                    return ControllerContext.Request.CreateResponse(HttpStatusCode.BadRequest);
                    break;
            }
            return ControllerContext.Request.CreateResponse(HttpStatusCode.OK);
        }

and my jquery :

@using System.Configuration
var api_url = "@ConfigurationManager.AppSettings["apiUrl"]";
$(document).ready(function() {
    // ---- Ajax calls ---- //
     $("#archivebutton").click(function() {
         var url = api_url + "Files?request=Archive&auto=false";
         var fileList = ["10", "14", "12"];
         var postData = { idList: fileList }
         $.post(url, $.param(postData,true));
     });
});

With everything I tried, the idList always contain 0 elements when I try it.

// ---- EDIT ---- //

I am able to send the data if I encapsulate it in a json object :

   $("#activatebutton").click(function() {
                var url = api_url + "Files?request=Activate&auto=false";
                var fileList = ["this", "is", "a", "test"];
                $.post(url, { fileList: fileList});
            });

and this is the request : enter image description here

What happens if you pass the fileList directly without wrapping it in postData? $.post(url, $.param(fileList, true)); — swestfall, Jul 07 '14 at 14:36
Try without specifying `traditional` for a "*shallow*" collection. Just `$.param(postData)`. — Jonathan Lonowski, Jul 07 '14 at 14:45

score 0 · Answer 1 · answered Jul 07 '14 at 14:38

0

You've wrapped $.param around the whole object, which ends up just sending a string that doesn't match anything when the modelbinder does its thing. You should've done:

var postData = { idList: fileList };
$.post(url, postData);

You should also add a callback to $.post, if for no other reason than to just notify the user once the process completes properly.

EDIT

Sorry, I wasn't really thinking about it, but you shouldn't use $.param at all in this scenario. Just pass the full object to $.post.

answered Jul 07 '14 at 14:38

Chris Pratt

232,153
36
385
444

Per my edit, I didn't think it through all the way before answering and goofed. You shouldn't be using `$.param` *at all*. There's no reason to. Have you tried simply submitting the whole object, as my corrected answer indicates? – Chris Pratt Jul 07 '14 at 14:56
Alright, then you've got some other issue at play. That should work. Use the developer console in your browser to inspect the request being made and please post all relevant details from that in your question: the URL being requested, the payload sent, etc. – Chris Pratt Jul 07 '14 at 15:02
okay I made some discoveries. You can check my edits content type is not json. I wonder if thats the problem... – ESD Jul 07 '14 at 15:15
The undefined jazz is what when get when you try to call `$.params` on an array (it needs something with name-value pairs). Pass the whole object without any calls to `$.params` anywhere, and then post your request information again. – Chris Pratt Jul 07 '14 at 15:20
still same thing. You can also see that I tried using the $.ajax functionality. One thing that bothers my is this in the request :Content-Type:application/x-www-form-urlencoded; charset=UTF-8 shouldn't that be json? – ESD Jul 07 '14 at 15:23
1) It's not the *same* thing, because now your payload actually includes a variable called `fileList[]` with values. However, you changed the name there from `idList` to `fileList`, so it still doesn't match anything on your action. If you post that to `idList` instead, you should be in business (`{ idList: fileList }`). 2) It doesn't have to be JSON. `x-www-form-urlencoded` just means you're posting a name-value pair string. The modelbinder is just as capable of parsing and using this as it is using JSON, though, so it doesn't matter. – Chris Pratt Jul 07 '14 at 17:47

score 0 · Accepted Answer · answered Jul 07 '14 at 15:57

Actually my problem was not with ajax but it was the fact that my web interface was making calls to my api which was on an another domain.

You want to look for this line in the console of your browser when debugging :

 GET http://localhost:49375/a5771720d9814c7faa43fd65fd3aa34d/arterySignalR/negot…9399%2FFile%2FManage&browserName=Chrome&clientProtocol=1.3&_=1404748489560 net::ERR_CONNECTION_REFUSED

This is how to enable cross-domain requests : http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Thanks to everybody for you help!

Jquery Ajax and asp.net mvc controller

2 Answers2