Pass JSON data to action method

Question

I am trying to pass JSON data from ajax call to my action method -

Ajax call - 

$.ajax({
         type: "POST",
         url: '/ProjectList/getProjects',
         dataType: "json",
         contentType: "application/json; charset=utf-8",
         data: JSON.stringify(modelData),
         success: function (data) {
                        alert("Testing");
         }
      });

Model -

EbitModel.cs

public class EbitModel
{
    public string ProgramName { get; set; }
    public string ProjectName { get; set; }
    public string SubprojectName { get; set; }
}

action method of Controller -

ProjectListController.cs


    [HttpPost]
    public ActionResult getProjects(List<EbitModel> modelData)
    {
        return null;
    }

But I am getting null here in modelData in this action method.

Is there anything am I missing here?

Edit -

JSON data in ModelData as -

[{"ProgramName":"South East","ProjectName":"XYZ","SubprojectName":"LMZ"},{"ProgramName":"South East","ProjectName":"ACB","SubprojectName":"LMZa"}]

@DanielA.White .. it contains JSON data .. E.G. [{"ProgramName":"South East","ProjectName":"XYZ","SubprojectName":"LMN.....] — omkar patade, Jan 17 '17 at 11:24
Please show modelData, the problem probably is their. do you have any error in console ? — mybirthname, Jan 17 '17 at 11:25
public ActionResult getProjects([FromBody] List modelData){} and change contentType: 'application/json' not contentType: "application/json; charset=utf-8" — MMK, Jan 17 '17 at 11:46
try this: http://stackoverflow.com/a/28360661/1662459 or pass data as string and deserialize it. — G J, Jan 17 '17 at 11:55

score 1 · Answer 1 · answered Jan 17 '17 at 13:48

1

you have to pass modelData along with Json passing to controller.
Try following code.

var jsonString = [{"ProgramName":"South East","ProjectName":"XYZ","SubprojectName":"LMZ"},{"ProgramName":"South East","ProjectName":"ACB","SubprojectName":"LMZa"}];
var jsonData = JSON.parse('{"modelData":'+jsonString +'}')

$.ajax({
    type: "POST",
    url: '/ProjectList/getProjects',
    dataType: "json",
     contentType: "application/json; charset=utf-8",
     data: jsonData,
     success: function (data) {
        alert("Testing");
     }
});

answered Jan 17 '17 at 13:48

Pranav Patel

1,541
14
28

Not sure why.. but i am getting internal server error 500 when i use method – omkar patade Jan 18 '17 at 05:56
@omkarpatade did you get data in your controller ? – Pranav Patel Jan 18 '17 at 05:57
Nope.. I have place a break point in my action method. But request is going to the action method itself. when i check in console .. its giving internal server error 500 – omkar patade Jan 18 '17 at 06:00
Do i need to make any changes at controller level (parameter of action method)? – omkar patade Jan 18 '17 at 06:06
no all is seems good, need to check something is missing or what – Pranav Patel Jan 18 '17 at 06:10

score 0 · Answer 2 · answered Jan 17 '17 at 11:30

Create a variable to hold the model and pass this variable to ajax data

var modelHolder = { "Value": @Model.Value }
$.ajax({
         type: "POST",
         url: '/ProjectList/getProjects',
         dataType: "json",
         contentType: "application/json; charset=utf-8",
         data: modelHolder,
         success: function (data) {
                        alert("Testing");
         }
      });

score 0 · Accepted Answer · answered Jan 18 '17 at 12:12

I found some work around for this -

var modelData = { "modelData": dt };
$.ajax({
          type: "POST",
          url: '/ProjectList/getProjectsFromEbit',
           dataType: "html",
           contentType: "application/json; charset=utf-8",
           data: JSON.stringify(modelData),
            success: function (data) {

           },
           error: function (data) {

                    }

                });

in controller - i took that string and deserialised it

public ActionResult getProjectsFromEbit(string modelData)
    {
        var systemOutputList = new List<EbitModel>();
        systemOutputList = JsonConvert.DeserializeAnonymousType(modelData, systemOutputList);
        return PartialView("_getProjects",systemOutputList);
    }

Pass JSON data to action method

3 Answers3