How to pass complex JSON object to ASP.net controller

Question

I want to pass a complex JSON object. But when I debug the Controller Action all virtual Properties are null. Working with ASP.NET, EF and CF.

JSON is send:

    POST http://localhost:53214/api/trans/ HTTP/1.1
    Pragma: no-cache
    Content-Type: application/json; charset=utf-8
    Host: localhost:53214
    Content-Length: 221

{
    "trans": {
        "Location": {
            "locID": 2
        }
    }
}

The Model trans:

    public class trans
    {
        [Key]
        public int tID { get; set; }
        //public int? locID { get; set; }
        public virtual Location Location { get; set; }

    }
}

So when I always post the JSON via Fiddler all Virtual properties are null.

Debugsession

Before I worked with Foreign Keys as commented in the Model. That works fine.

I want to rebuild the code to optimize the code itself.

How can I initialize the Properties and deserialize the JSON correct?

Regards Marcus

ramiramilu · Accepted Answer · 2015-05-13 13:05:19Z

14

I created a small working sample for you (please find below solution). It mainly depends on how you construct your client side object.

Model -

public class trans
{
    [Key]
    public int tID { get; set; }
    public virtual Location Location { get; set; }
}

public class Location
{
    public int locID { get; set; }
}

Controller Actions -

 public ActionResult Index()
 {
      return View();
 }

 [HttpPost]
 public JsonResult Submit(trans trans)
 {
      return null;
 }

Simple View -

@{
    ViewBag.Title = "Home Page";
}   

<table id="example" class="display">
</table>

@section scripts{
    <script>
        $(function() {
            var o = new Object();
            o.tID = 123;
            o.Location = new Object();
            o.Location.locID = 456;

            $.ajax({
                url: '@Url.Action("Submit", "Home")',
                type: "POST",
                cache: false,
                data: JSON.stringify({ trans : o }),
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    if (data) {
                        alert("Success");
                    }
                },
                error: function(jqXhr, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        })
    </script>
}

When you run the page, it will hit the controller post action and check the below output -

enter image description here

edited May 13, 2015 at 13:05

answered May 13, 2015 at 12:57

ramiramilu

17.2k6 gold badges51 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marcus Over a year ago

Can you give me the Json String your script generates?

ramiramilu Over a year ago

{"tID":123,"Location":{"locID":456}}

Dragon Over a year ago

@ramiramilu , here you are binding the form values to javascript object and then converting them to json using Json.stringigy. var o = new Object(); o.tID = 123; o.Location = new Object(); o.Location.locID = 456; Is there any alternate so that i don't have to bind these values one by one. Since i have a very complex and large form which consist of large no of dynamic generated elements , and i need to post them to controller.

Dragon Over a year ago

@ramiramilu Thanks, it works as i wanted , i don't know if its the best option but i am using it since on posting it passes values to controller in a strongly type model , so i am happy

heymega · Accepted Answer · 2015-05-13 13:00:21Z

2

You're really close! My answer depends on your name of your model parameter.

Lets say your action is as follows

[HttpPost]
public ActionResult Test(trans model)
{

    return View();
}

Then your request body will be as follows

{
   "model.tID":3,
   "model.Location":{
      "locID":2
   }
}

Notice how the parameter name matches that of the JSON keys.

Hope this helps!

answered May 13, 2015 at 13:00

heymega

9,4518 gold badges45 silver badges63 bronze badges

2 Comments

Marcus Over a year ago

i tested you´re solution and rename the JSON key "Location" to "trans.Location" but there is no change in the debug session

heymega Over a year ago

My answer is definitely correct as I've even tested it in a sample app. You only needed to change the "model" to reflect your argument name. If you don't understand what this means then give me you action code and I'll update my answer to reflect it.

Deblaton Jean-Philippe · Accepted Answer · 2015-05-13 12:57:31Z

1

You can add [FromBody] inside the signature of your action :

public ActionResult SomeAction([FromBody] trans trans)
{

    //Access trans here

}

answered May 13, 2015 at 12:57

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

1 Comment

Marcus Over a year ago

No effect, the Propertie is null

Marcus · Accepted Answer · 2015-05-13 13:53:52Z

1

solved. Send the Worng Json string.

The Correct JSON is:

Pragma: no-cache
Content-Type: application/json; charset=utf-8
Host: localhost:53214
Content-Length: 144

{
    "Location": {
        "locID": 2
    }
}

please compare with the JSON from my Question. As you see you doesen´t need to describe the model "trans" in the JSON. Start your JSON Object from the Content od the model an deserialzer work.

Regards, Marcus Thanks ramiramilu your JSON String gives me the hint.

answered May 13, 2015 at 13:53

Marcus

7773 gold badges9 silver badges15 bronze badges

Comments

Bellash · Accepted Answer · 2015-05-13 13:03:05Z

0

From this post, You need to use json2.js to serialize your json object

  var json = JSON.stringify({'trans':{...}});

    $.ajax({
        url: '/api/trans',
        type: 'POST',
        dataType: 'json',
        data: json,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            $("#target").html(data);
        }
    });

If this is not suitable for you, you may use the $.toDictionnary plugin specialy for submiting json objects collections.

  var trans={'trans':{...}};//trans
   $.ajax({
       url: "api/trans",
       type: "POST",
       data: $.toDictionary(trans),
       ...
      });

answered May 13, 2015 at 13:03

Bellash

8,2776 gold badges57 silver badges95 bronze badges

1 Comment

Marcus Over a year ago

i dont get an idea how that helps to solve my problem, can you give me another hint?

Collectives™ on Stack Overflow

How to pass complex JSON object to ASP.net controller

5 Answers 5

4 Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related