.Net MVC Pass JSON To Controller Via AJAX

Question

Here are my Models:

public class Inspection
{
    public string InspectionId { get; set; }
    public string Description { get; set; }
}

public class InspectionReasons : Inspection
{
    public string ReasonId { get; set; }
    public string ReasonDesc { get; set; }
    public string NotUsedInUpdate { get; set; }
    public bool CheckedFlag { get; set; }
}

I am getting this data from a dynamically built table and updating it via AJAX call:

table.rows().every(function (rowIdx, tableLoop, rowLoop) {
    var data = this.data();
    var row = this.node();
    var checked = $(row).find('input').prop('checked');

    reasons.push({
        InspectionId: data['id'],
        Description: data['desc'],
        ReasonId: data['reasonId'],
        ReasonDesc: data['reasonDesc'],
        CheckedFlag: checked,
        NotUsedInUpdate: ""
    });
});

$.ajax({
    type: 'POST',
    url: '/InspectionReason/UpdateInpsectionReasons',
    dataType: 'json',
    data: {
        reasons: JSON.stringify(reasons)
    }
});

And here is my action:

[HttpPost]
public JsonResult UpdateInpsectionReasons(List<InspectionReasons> reasons)
{
    UpdateReasons(reasons);
    return Json(string.Empty);
}

When I debug List<InspectionReasons> reasons is empty. I've alerted my client side reasons object and it is valid JSON. Do the properties need to be in the same order as they appear in the models? If they do, do the inherited properties go below the other properties? I see a lot of examples working like this but I can't seem to get mine to work.

Win · Accepted Answer · 2017-03-23 17:48:53Z

1

Ajax is missing contentType. For example, contentType: "application/json; charset=utf-8",

$.ajax({
    type: 'POST',
    url: '@Url.Action("UpdateInpsectionReasons", "InspectionReason")',
    dataType: 'json',
    data: JSON.stringify(reasons),
    contentType: "application/json; charset=utf-8",
    success: function(result) {
        console.log(result);
    }
});

Working Code

public class InspectionReasonController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult UpdateInpsectionReasons(List<InspectionReasons> reasons)
    {
        return Json(reasons);
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <button id="btnSubmit" type="button">Submit</button>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        var reasons = [];

        $("#btnSubmit").click(function () {
            reasons.push({
                InspectionId: "Test InspectionId",
                Description: "Test Description",
                ReasonId: "Test ReasonId",
                ReasonDesc: "Test ReasonDesc",
                CheckedFlag: true,
                NotUsedInUpdate: "Test NotUsedInUpdate"
            });

            $.ajax({
                type: 'POST',
                url: '@Url.Action("UpdateInpsectionReasons", "InspectionReason")',
                dataType: 'json',
                data: JSON.stringify(reasons),
                contentType: "application/json; charset=utf-8",
                success: function(result) {
                    console.log(result);
                }
            });
        });
    </script>
</body>
</html>

edited Mar 23, 2017 at 17:48

answered Mar 23, 2017 at 17:35

Win

62.4k13 gold badges106 silver badges190 bronze badges

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

5 Comments

Davey Jones Over a year ago

That got me further! I am now getting an error "Invalid JSON Primative: reasons". I changed my controller from a JsonResult to an ActionResult type. Would that have anything to do with the new error? It's failing before it returns anything so I can't see how it would be.

Davey Jones Over a year ago

At the AJAX call. It doesn't even drop into my public ActionResult. I am working on getting my actual JSON object to show what I'm passing in.

Davey Jones Over a year ago

[{"DisasterNum":"9001","RegId":"150304791","InspectionSeq":"2","ReviewReasonId":"159","Checked":true,"ReviewDesc":"","PriorityId":"","PriorityDesc":"","Sort":""}] This is my actual json. I know it doesn't match my generic example, but it looks valid to me. I'll work with what you've given and see what I come up with.

Win Over a year ago

I'll be damned. It seems like valid JSON, but when I copy to Visual Studio, VS complains that one of : is a special character. Here is the screen shot

Davey Jones Over a year ago

I was able to get your example to work. I will work backwards from there and fine where my disconnect is. Thanks!!!

Collectives™ on Stack Overflow

.Net MVC Pass JSON To Controller Via AJAX

1 Answer 1

Working Code

View

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Working Code

View

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related