Aleksander Dudek Aleksander Dudek - 3 months ago 12
JSON Question

Passing json into MVC controller

I've seen many posts on SO considering this topic, though applying solutions didn't work for me and I am confused right now. Mb I'm missing sth?

Please consider I'm a noob at .js stuff.

So I get my values from dynamicly created form elements with this JS and attempt to post it:

EDIT 12:21: I got this script which should parse each element from form into custom made array resembling json. I still get null reference though. Got any idea how to get it?

var getValues = function (myForm) {
var array = [];
var parser;

$("formElement").each( function (i, elem) {

parser.empty()
parser = {
Id: $(elem,"#Id ").val(),
someOption: $(elem, "#someOption ").val(),
someText: $(elem, "#someText ").val(),
someNumber: $(elem, "#someNumber ").val()
}
array.push(parser);

});

console.log(array);


$.ajax({
type: "POST",
url: 'angus',
traditional: true,
data: {json: array },
success: function (data) {
$("#getData").empty();
$("#getData").append(array);
}
});
};


I get this in log:
(objects of index like i,i+1,i+2,i+3 match the viewmodels - is it right? and I have mixed feelings about those proto and functions - what is it?)
enter image description here

In my controller action I get null exception:

[HttpPost]
public ActionResult angus(IEnumerable<TrashViewModel> json)
{

return View(json.ToList());
}


I created my viewmodel:

[Serializable]
public class TrashViewModel
{
public int Id { get; set; }
public string someOption { get; set; }
public string someText { get; set; }
public string someNumber { get; set; }

}


I had my forms HTML attributes names match those of viemodel class.

EDIT:
html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="formExample" ng-controller="ExampleController">

<button class="btn btn-primary" ng-controller="addRow" ng-click="addLine()">Dodaj przycisk</button>

<form novalidate class="simple-form">
<div class="here">
<div class="formElement row">

<input type="hidden" name="Id" value="1"/>
<div class="col-md-2">
<select name="someOption" class="optns form-group col-md-12" ng-model="user.class">
<option selected value="1"> Rodzaj... </option>
<option value="test">2</option>
<option value="2">test</option>
<option value="2">2</option>
<option value="3">3</option>
@*tutaj beda dodane opcje*@
</select>
</div>
<div class="col-md-1">
<input name="someNumber" class="form-group col-md-12" type="number" ng-model="user.number" value="" text="Ilość..." /><br />
</div>
<div class="col-md-9">
<input name="someText" class="form-group col-md-12" type="text" ng-model="user.text" value="" text="Uwagi..." /><br />
</div>
</div>
</div>
<input type="button" value="Reset" />
<input type="submit" value="Save" />
</form>
</div>


appended html:

var strVar = "";
strVar += "<div class=\"formElement row\">";
strVar += " <input type=\"hidden\" name=\"Id\" value=\" "+ $scope.counter +"\"\/>";
strVar += " <div class=\"col-md-2\">";
strVar += " <select name=\"someOption\" class=\"optns form-group col-md-12\" ng-model=\"user.class\">";
strVar += " <option selected value=\"1\"> Rodzaj... <\/option>";
strVar += " <option value=\"test\">2<\/option>";
strVar += " <option value=\"2\">test<\/option>";
strVar += " <option value=\"2\">2<\/option>";
strVar += " <option value=\"3\">3<\/option>";
strVar += " @*tutaj beda dodane opcje*@";
strVar += " <\/select>";
strVar += " <\/div>";
strVar += " <div class=\"col-md-1\">";
strVar += " <input name=\"someNumber\" class=\"form-group col-md-12\" type=\"number\" ng-model=\"user.number\" value=\"\" text=\"Ilość...\" \/><br \/>";
strVar += " <\/div>";
strVar += " <div class=\"col-md-9\">";
strVar += " <input name=\"someText\" class=\"form-group col-md-12\" type=\"text\" ng-model=\"user.text\" value=\"\" text=\"Uwagi...\" \/><br \/>";
strVar += " <\/div>";
strVar += " <\/div>";


I end up with null exception which by what other posts suggest is because of viemodel class doesn't match the serialized objects. Don't know what to do at this point.

Thank you!

Answer

In order to POST your array, you need to stringify the data and set the contentType option. You ajax code needs to be

$.ajax({
    type: 'POST',
    url: '@Url.Action("angus")', // do not hard code url's
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ model: array }), 
    success: function (data) {

and the controller

[HttpPost]
public ActionResult angus(IEnumerable<TrashViewModel> model)