MVC pass json data to controller

Question

EDIT: Thanks for catching these errors Ash There were 3 problems here

1. The JSON request was too large to be deserialized I had to add <add key="aspnet:MaxJsonDeserializerMembers" value="150000" /> in the app settings
2. I forgot the getters and setters in one of my classes
3. I misspelled one of my properties

I am trying to pass some json data to a controller. When ever I pass a js Object to the Controller my model is null. Shouldn't the default model binder take care of this? I can't find out why I am getting null when passing data to the controller. I have looked at other SO questions but none have helped so far.

The data looks like this

{
Data: [{
       duration: 5,
       end_date: "06-04-2013 00:00"
       id: 1,
       open: true,
       parent: 0,
       progress: 0,
       start_date: "01-04-2013 00:00",
       text : "PcB ddCcgoMordiF Arr e"
      }]
Links: //empty array of something similar
}

These are what my DTO's look like

public class GanttRequestDto
{
    public IEnumerable<GanttTaskDto> Data;
    public IEnumerable<GanttLinkDto> Links;
}



 public class GanttTaskDto
    {
         public int Id { get; set; }
         public string Test { get; set; }
         public DateTime Start_date { get; set; }
         public DateTime  End_date { get; set; }
         public int Duration { get; set; }
         public bool Open { get; set; }
         public decimal Progress { get; set; }
         public int? ParentId { get; set; }
}

public class GanttLinkDto
{
     public int Id { get; set; }
     public string Type { get; set; }
     public int Source { get; set; }
     public int Target { get; set; }
}

My controller looks like this

[HttpPost]
public BetterJsonResult SaveGanttChartData(GanttRequestDto ganttDataModel)
{
    //do something
    return null;
}

My JS code

InitSaveButton() {
    $("#save-btn").click(function() {
        var ganttData = gantt.serialize();
        var model = {
            Data: ganttData.data,
            Links: ganttData.links
        };
        Ajax.ajaxRequest(null, "/Gantt/SaveGanttChartData?ganttDataModel",  model, null, "Saving Gantt Data", "Success", null);
    });
}

Here is what my Ajax request looks like

//url:string
//model:json object
//updateId (optional): area to update,
//toastMessage: optional toast message
//toasTitle: optional toast title
//onComplete: optional callback function
Ajax.ajaxRequest = function (httpVerb, url, model, updateId, toastMessage, toastTitle, onComplete) {
    if (httpVerb === null || httpVerb.length === 0) httpVerb = "POST";
    $.ajax({
        url: url,
        type: httpVerb,
        cache: false,
        data: JSON.stringify(model),
        dataType: "json",
        contentType: 'application/json; charset=utf-8'
    }).done(function (data) {
        Ajax.ajaxSuccess(data, updateId, toastMessage, toastTitle);
    }).fail(function (err) {
        Ajax.ajaxFailure(err);
    }).always(function (data) {
        if (onComplete && typeof onComplete === 'function') {
            onComplete(data);
        }
    });
};

your controller BetterJsonResult is returning null which is why your object is not populated, return ganttDataModel — Fuzzybear
– Fuzzybear, Commented Jan 23, 2017 at 23:35
@Fuzzybear Sorry but that's not it, It doesn't return anything yet that's why I put null. The ganttDataModel is null no matter what I return. — Train
– Train, Commented Jan 23, 2017 at 23:38

dbc · Accepted Answer · 2017-01-24 05:03:52Z

1

Here is the fix for your issue.

Two things here:

I assume the JSON sample data you provided is pure hand tailored, but still mentioning that the data is having few typos.

var data = {
Data: [{
       duration: 5,
       end_date: "06-04-2013 00:00",
       id: 1,
       open: true,
       parentId: 0,
       progress: 0,
       start_date: "01-04-2013 00:00",
       test : "PcB ddCcgoMordiF Arr e"
      }],
Links: [{Id : 1, Type: "sdsd"}]
}

You have not marked the data members as properties with getters and setters.

public class GanttRequestDto
{
    public IEnumerable<GanttTaskDto> Data { get; set; }

    public IEnumerable<GanttLinkDto> Links { get; set; }
}

Well try now and let me know if it works for you or not.

edited Jan 24, 2017 at 5:03

dbc

120k27 gold badges273 silver badges404 bronze badges

answered Jan 24, 2017 at 1:21

Ash

2,6152 gold badges22 silver badges28 bronze badges

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

1 Comment

Train Over a year ago

Good Lord! Nice Catch. I forgot the getters and setters And my property was misspelled. ` public string Test { get; set; }` instead of ` public string Text { get; set; }` as well as the JSON data being too large to be serialized.

Collectives™ on Stack Overflow

MVC pass json data to controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related