如何将复杂的JSON对象传递给ASP.net控制器

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.

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

Answer 1

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 -

Answer 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!

Answer 3

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

public ActionResult SomeAction([FromBody] trans trans)
{

    //Access trans here

}

Answer 4

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.

Answer 5

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),
       ...
      });