Do I need to create objects on the client and web api in order to post parameters as JSON?

Question

I need to pass a list of ids, a username, and id to my web api as a post. The list of ids I'm retrieving from a knockout array, id is the selected id from a radio button list (populated from a knockout array) and username is from a public variable. I tried passing it like this:

 self.editDocuments = function (userName, Id, listOfIds) {
        return $.ajax({
            type: "post",
            url: "DocumentsAPI/EditDocuments",
            data: { 'listOfIds': listOfIds, 'Id': Id, 'userName': userName },
            contentType: "application/json"
        });
    }

My web api is as follows:

 public string EditDocuments([FromBody] string listOfIds, int Id, string userName)
        {
            return listOfIds;
        }

I'm getting a 500 internal server error. If I run in fiddler it runs but the parameters are null. If I send only one parameter it also runs but the parameter is null.

Based on this post it seems like I should be passing an object. Does that mean I need to create an object on the server and client side? It seems to me a bit like double work creating an object from different existing objects.

if you don't want to create a view model on the server side you can use newtonsoft jtoken. http://peterkellner.net/2016/05/05/parsing-newtonsoft-jtoken-inside-webapi-call/ — Bryan Dellinger, Jul 30 '17 at 20:12
contentType: "application/json" its mean you need to send object to server in the form of json — Asif Raza, Jul 31 '17 at 05:07

Robert Moskal · Accepted Answer · 2017-07-30T16:05:34.553

1

You should have followed the link to the MSDN documentation for that question: http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-1

Short answer, you need to create a view model on the server side. This is just a POCO object that maps the json structure. That class is what your webapi handler takes as a parameter.

You are already sending a JSON structure in your ajax post call on the client:

   data: { 'listOfIds': listOfIds, 'Id': Id, 'userName': userName }

And yes, it does seem redundant and wasteful to need a class to map a simple data structure.

edited Jul 30 '17 at 16:05

answered Jul 30 '17 at 15:49

Robert Moskal

21,737
8
62
86

What about on the client side, would I need to create another object there as well? – shw Jul 30 '17 at 16:00
See edit. You are already sending a JSON object on the client side. – Robert Moskal Jul 30 '17 at 16:05
I did like above but the object is null within the webapi, what would be causing that? – shw Jul 31 '17 at 07:55
my data values (listOfids, userName) weren't formatted in JSON format properly I fixed it and it's working perfectly. thank you! – shw Jul 31 '17 at 09:55

score 0 · Answer 2 · answered Jul 31 '17 at 05:30

You can simply make model & map the client object as same

public class Mymodel {

public string listOfIds { get; set; }
public int Id { get; set; }
public string userName { get; set; }
}

Change your action method

 public string EditDocuments(Mymodel modelObj)
    {
        return listOfIds;
    }

Now , make the object same as per our model

//get the value from UI and mapp with

   var modelObj ={
    listOfIds:listOfIds,
    Id:Id,
    userName:userName


    } 
  //send it through ajax
  return $.ajax({
        type: "post",
        url: "/DocumentsAPI/EditDocuments",
        data: JSON.stringify(modelObj),
        contentType: "application/json"
    });

dataType: 'json',

Its mean return type of data from server should be json

contentType: 'application/json;

data should be into json format before send it server

score 0 · Answer 3 · answered Jul 31 '17 at 08:36

try this...I don't know if I've missed the point here

   public string EditDocuments( [FromBody]JObject data ){


       string listOfIds = (string)data["listOfIds"];
       int Id  = (int)data["Id"];
       string userName  = (string)data["userName"];

   return .....

}

Do I need to create objects on the client and web api in order to post parameters as JSON?

3 Answers3