How to pass json POST data to Web API method as an object

Question

ASP NET MVC4 Web API application defines post method to save customer  Customer is passed in json format in POST request body  Customer parameter in post method contains null values for properties   How to fix this so that posted data will passed as customer object    If possible Content-Type  application x-www-form-urlencoded should used since I dont know how to change it in javascript method which posts form   Controller   public class CustomersController   ApiController      public object Post  FromBody  Customer customer                        return Request CreateResponse HttpStatusCode OK              new                               customer   customer                                    public class Customer               public string company name   get  set            public string contact name   get  set             Request   POST http   localhost 52216 api customers HTTP 1 1 Accept  application json  text javascript       q 0 01 X-Requested-With  XMLHttpRequest Content-Type  application x-www-form-urlencoded  charset UTF-8    contact name   sdfsd   company name   ssssd

User · Answer

model MVCClient Models ProductDetails         ViewBag Title    ProductDetails      lt script src    Scripts jquery-1 8 2 min js  gt  lt  script gt   lt script type  text javascript  gt         document  ready function                  Save   click function                  var ProductDetails   new Object                ProductDetails ProductName        txt productName   val                ProductDetails ProductDetail       txt desc   val                ProductDetails Price      txt price   val                  ajax                   url   http   localhost 24481 api Product addProduct                   type   Post                   dataType  JSON                   data ProductDetails                    success  function  data                        alert  Updated Successfully                          window location href       Index                                      error  function  msg    alert msg                                              lt  script gt   lt h2 gt ProductDetails lt  h2 gt    lt form id  form1  method  post  gt       lt fieldset gt           lt legend gt ProductDetails lt  legend gt             lt div class  editor-label  gt               Html LabelFor model   gt  model ProductName           lt  div gt           lt div class  editor-field  gt                lt input id  txt productName  type  text  name  fname  gt               Html ValidationMessageFor model   gt  model ProductName           lt  div gt            lt div class  editor-label  gt               Html LabelFor model   gt  model ProductDetail           lt  div gt           lt div class  editor-field  gt                lt input id  txt desc  type  text  name  fname  gt               Html ValidationMessageFor model   gt  model ProductDetail           lt  div gt            lt div class  editor-label  gt               Html LabelFor model   gt  model Price           lt  div gt           lt div class  editor-field  gt                lt input id  txt price  type  text  name  fname  gt               Html ValidationMessageFor model   gt  model Price           lt  div gt              lt p gt               lt input id  Save  type  button  value  Create    gt           lt  p gt       lt  fieldset gt    lt  form gt       lt div gt           Html ActionLink  Back to List    Index        lt  div gt    lt  form gt      section Scripts        Scripts Render    bundles jqueryval

User · Answer

Working with POST in webapi can be tricky  Would like to add to the already correct answer    Will focus specifically on POST as dealing with GET is trivial  I don t think many would be searching around for resolving an issue with GET with webapis  Anyways    If your question is - In MVC Web Api  how to- - Use custom action method names other than the generic HTTP verbs  - Perform multiple posts  - Post multiple simple types  - Post complex types via jQuery   Then the following solutions may help   First  to use Custom Action Methods in Web API  add a web api route as   public static void Register HttpConfiguration config        config Routes MapHttpRoute          name   ActionApi           routeTemplate   api  controller   action         And then you may create action methods like    HttpPost  public string TestMethod  FromBody string value        return  Hello from http post web api controller      value      Now  fire the following jQuery from your browser console    ajax       type   POST       url   http   localhost 33649 api TestApi TestMethod       data       hello        contentType   application x-www-form-urlencoded       dataType   json       success  function data   console log data          Second  to perform multiple posts  It is simple  create multiple action methods and decorate with the  HttpPost  attrib  Use the  ActionName  MyAction    to assign custom names  etc  Will come to jQuery in the fourth point below  Third  First of all  posting multiple SIMPLE types in a single action is not possible  Moreover  there is a special format to post even a single simple type  apart from passing the parameter in the query string or REST style    This was the point that had me banging my head with Rest Clients  like Fiddler and Chrome s Advanced REST client extension  and hunting around the web for almost 5 hours when eventually  the following URL proved to be of help  Will quote the relevant content for the link might turn dead   Content-Type  application x-www-form-urlencoded in the request header and add a   before the JSON statement     Name   Turbo Tina   Email   na Turbo Tina     PS  Noticed the peculiar syntax   http   forums asp net t 1883467 aspx The received value is null when I try to Post to my Web Api  Anyways  let us get over that story  Moving on   Fourth  posting complex types via jQuery  ofcourse    ajax   is going to promptly come in the role   Let us say the action method accepts a Person object which has an id and a name  So  from javascript   var person     PersonId 1  Name  James      ajax       type   POST       url   http   mydomain api TestApi TestMethod       data  JSON stringify person       contentType   application json  charset utf-8       dataType   json       success  function data   console log data          And the action will look like    HttpPost  public string TestMethod Person person        return  Hello from http post web api controller      person Name      All of the above  worked for me   Cheers

User · Answer

EDIT   31 10 2017  The same code approach will work for Asp Net Core 2 0 as well  The major difference is  In asp net core  both web api controllers and Mvc controllers are merged together to single controller model  So your return type might be IActionResult or  one of it s implementation  Ex  OkObjectResult     Use  contentType  application json    You need to use JSON stringify method to convert it to JSON string when you send it   And the model binder will bind the json data to your class object   The below code will work fine  tested     function          var customer    contact name   Scott  company name  HP          ajax           type   POST           data  JSON stringify customer           url   api Customer           contentType   application json                Result    contentType property tells the server that we are sending the data in JSON format  Since we sent a JSON data structure model binding will happen properly   If you inspect the ajax request s headers  you can see that  the Content-Type value is set as application json   If you do not specify contentType explicitly  It will use the default content type which is application x-www-form-urlencoded      Edit on Nov 2015 to address other possible issues raised in comments  Posting a complex object  Let s say you have a complex view model class as your web api action method parameter like this  public class CreateUserViewModel      public int Id  set get      public string Name  set get        public List lt TagViewModel gt  Tags  set get     public class TagViewModel     public int Id  set get     public string Code  set get       and your web api end point is like  public class ProductController   Controller        HttpPost      public CreateUserViewModel Save  FromBody  CreateUserViewModel m                   I am just returning the posted model as it is              You may do other stuff and return different response             Ex   missileService LaunchMissile m           return m            At the time of this writing  ASP NET MVC 6 is the latest stable version and in MVC6  Both Web api controllers and MVC controllers are inheriting from Microsoft AspNet Mvc Controller base class   To send data to the method from client side  the below code should work fine    Build an object which matches the structure of our view model class var model         Name   Shyju       Id  123      Tags     Id  12  Code   C       Id  33  Code   Swift           ajax       type   POST       data  JSON stringify model       url      product save       contentType   application json     done function res               console log  res   res          Do something with the result          Model binding works for some properties  but not all   Why    If you do not decorate the web api method parameter with  FromBody  attribute   HttpPost  public CreateUserViewModel Save CreateUserViewModel m        return m      And send the model raw javascript object  not in JSON format  without specifying the contentType property value    ajax       type   POST       data  model      url      product save     done function  res         console log  res   res         Model binding will work for the flat properties on the model  not the properties where the type is complex another type  In our case  Id and Name properties will be properly bound to the parameter m  But the Tags property will be an empty list   The same problem will occur if you are using the short version    post which will use the default Content-Type when sending the request     post     product save   model  function  res          res contains the markup returned by the partial view     console log  res   res

User · Answer

1 In your client side you can send you http post request in string like below  var IndexInfo   JSON stringify this scope IndexTree   this  http post           api EvaluationProcess InsertEvaluationProcessInputType         IndexInfo         then  response  any    gt       2 Then in your web api controller you can deserialize it   public ApiResponce InsertEvaluationProcessInputType  FromBody string IndexInfo        var des    ApiReceivedListOfObjects lt TempDistributedIndex gt  Newtonsoft Json JsonConvert DeserializeObject DecryptedProcessInfo  typeof ApiReceivedListOfObjects lt TempDistributedIndex gt        3 Your ApiReceivedListOfObjects class should be like below  public class ApiReceivedListOfObjects lt T gt                public List lt T gt  element   get  set             4 make sure that your serialized string  IndexInfo here  becomes like below structure before JsonConvert DeserializeObject command in step 2  var resp                      element                              A      A Jones                  B      500015763                                      A      B Smith                  B      504986213                                      A      C Brown                  B      509034361

User · Answer

Make sure that your WebAPI service is expecting a strongly typed object with a structure that matches the JSON that you are passing   And make sure that you stringify the JSON that you are POSTing   Here is my JavaScript  using AngluarJS     scope updateUserActivity   function   objuserActivity             http                        method   post               url   your url here               headers     Content-Type    application json                data  JSON stringify  objuserActivity                      then function  response                        alert  success                        catch function  response                        alert  failure                        finally function                            And here is my WebAPI Controller    HttpPost   AcceptVerbs  POST    public string POSTMe  FromBody Models UserActivity  activity        return  hello

User · Answer

I ve just been playing with this and discovered a rather odd result  Say you have public properties on your class in C  like this   public class Customer       public string contact name      public string company name      then you must do the JSON stringify trick as suggested by Shyju and call it like this   var customer    contact name   Scott  company name  HP      ajax       type   POST       data  JSON stringify customer       url   api Customer       contentType   application json        However  if you define getters and setters on your class like this   public class Customer       public string contact name   get  set        public string company name   get  set        then you can call it much more simply     ajax       type   POST       data  customer      url   api Customer        This uses the HTTP header   Content-Type application x-www-form-urlencoded   I m not quite sure what s happening here but it looks like a bug  feature   in the framework  Presumably the different binding methods are calling different  adapters   and while the adapter for application json one works with public properties  the one for form encoded data doesn t   I have no idea which would be considered best practice though

User · Answer

Use the JSON stringify   to get the string in JSON format  ensure that while making the AJAX call you pass below mentioned attributes    contentType   application json    Below is the give jquery code to make ajax post call to asp net web api    x000D   x000D  var product   x000D      JSON stringify   x000D          productGroup   Fablet   x000D          productId  1  x000D          productName   Lumia 1525 64 GB   x000D          sellingPrice  700 x000D          x000D   x000D    ajax   x000D      URL   http   localhost api Products   x000D      type   POST   x000D      contentType   application json   x000D      data  product  x000D      success  function  data  status  xhr    x000D          alert  Success     x000D         x000D      error  function  xhr  status  error    x000D          alert  Update Error occurred -     error   x000D        x000D      x000D   x000D   x000D

User · Answer

Following code to return data in the json format  instead of the xml -Web API 2  -  Put following line in the Global asax file   GlobalConfiguration Configuration Formatters JsonFormatter SerializerSettings ReferenceLoopHandling   Newtonsoft Json ReferenceLoopHandling Ignore          GlobalConfiguration Configuration Formatters Remove GlobalConfiguration Configuration Formatters XmlFormatter

User · Answer

Microsoft gave a good example of doing this   https   docs microsoft com en-us aspnet web-api overview advanced sending-html-form-data-part-1  First validate the request  if  ModelState IsValid    and than use the serialized data    Content   new StringContent update Status    Here  Status  is a field in the complex type  Serializing is done by  NET  no need to worry about that

[javascript] How to pass json POST data to Web API method as an object?

Examples related to javascript

Examples related to asp.net-mvc

Examples related to json

Examples related to asp.net-mvc-4

Examples related to asp.net-web-api