Home Passing json to mvc controller
Reply: 2

Passing json to mvc controller

Code
1#
Code Published in 2017-09-14 09:01:33Z

I am trying to post some data via jQuery ajax to an Asp.Net MVC controller. I have the follow class which I am working with:

public class InnerStyle
{
   [JsonProperty("color")]
   public string HeaderColor { get; set; }
   [JsonProperty("font-size")]
   public string HeaderFontSize { get; set; }
   [JsonProperty("font-family")]
   public string HeaderFontFamily { get; set; }
}

The post method looks like:

public JsonResult UpdateRecord(InnerStyle innerStyle)
{
   //Do some validation 

   return Json("OK");
}

And my jQuery looks like:

$('#font-size-ddl').change(function () {
   var value = $(this).val();
   headerObj["font-size"] = value;
   console.log(JSON.stringify({ innerStyle: headerObj }));
   $.ajax({
          type: "POST",
          url: "@Url.Action("UpdateRecord", "Document")",
          data: JSON.stringify({ innerStyle: headerObj}),
          contentType: "application/json; charset=utf-8",
          success: function (data) {
          console.log(data);
          }
     });
});

The console.log in the above change event produces the following JSON string:

{"innerStyle":{"text-align":"","font-size":"20px","color":""}}

Now the issue I am having is if I set a break point on my UpdateRecord Action and see what is coming through the innerStyle object is null. Can someone tell me where I am going wrong please.

Vijay
2#
Vijay Reply to 2017-09-14 11:48:14Z

I tried using the below code and it's working fine.

$.ajax({
          type: "POST",
          url: "@Url.Action("UpdateRecord", "Document")",
          data: JSON.stringify({"text-align":"","font-size":"20px","color":""}),
          contentType: "application/json; charset=utf-8",
          success: function (data) {
          console.log(data);
          }
     });

I simply removed the parameter name "innerStyle". I just noticed one thing which might be a typo error. You are passing a property "text-align":"" instead of "font-family". So it's not populating all properties inside the controller's action UpdateRecord(InnerStyle innerStyle). You should pass similar to the below json object to map the entire object on controller's action UpdateRecord(InnerStyle innerStyle)

{
  "color": "sample string 1",
  "font-size": "sample string 2",
  "font-family": "sample string 3"
}
Archana Parmar
3#
Archana Parmar Reply to 2017-10-04 07:55:47Z

@Code, your code is fine. It's just you cannot use [Json Property] while you are hitting controller via ajax. you have to use real class properties.

 $('#font-size-ddl').change(function () {
    var value = $(this).val();
    var headerObj = {};
    headerObj["HeaderColor"] = "Red";
    headerObj["HeaderFontSize"] = value;
    headerObj["HeaderFontFamily"] = "Arial";
    console.log(JSON.stringify({ custom: headerObj }));
    $.ajax({
        type: "POST",
        url: "@Url.Action("UpdateRecord", "Employee")",
        traditional: true,
        data: JSON.stringify({ custom: headerObj }),
        dataType: JSON,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log(data);
        }
    });
});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.315052 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO