JSON data to MVC controller actionresult

Question

My Jquery code creates three object and then places them in an other object which is posted to the action in the controller with JSON.stringify.

The string in the action looks like this:

{"sources":{"0":{"Name":"aaaaa","IP":"1.1.1.1","Username":"vvvv"},"1":{"Name":"bbbb","IP":"2.2.2.2","Username":"fdfdfdf"}},"destinations":{"0":{"Name":"aaaaa","IP":"1.1.1.1"},"1":{"Name":"bbbb","IP":"2.2.2.2"}},"protocols":{"0":{"Name":"dsfsdfsdf","Type":"FTP,SSH","Port":"22,33"}},"remarks":"sdfsdfsdf"}

So the three objects are:

var sources = {};
var destinations = {};
var protocols = {};

filled with:

sources[iS] = { 'Name': field1, 'IP': field2, 'Username': field3 };

(iS is a counter)

destinations[iD] = { 'Name': field1, 'IP': field2 };

(iD is a counter)

protocols[iP] = { 'Name': field1, 'Type': field2, 'Port': field3 }

(iP is a counter)

They are put together with:

var remarks = $('#txtRemarks').val();
var postdata = { "sources": sources, "destinations": destinations, "protocols": protocols, "remarks": remarks };

and then posted with:

$.ajax({
 url: ThisController + '/AddRule',
 type: 'POST',
 data: 'postdata='+JSON.stringify(postdata),
 dataType: 'json',
 traditional: true,
 success: function (data) {
 $('#pnDataCollection').html(data);
 });

and received with:

 [HttpPost]
 public ActionResult AddRule(string postdata) 
 {
 return HttpNotFound();
 }

I have three classes:

public class Source
{
 public string Name { get; set; }
 public string IP { get; set; }
 public string UserName { get; set; }
}
public class Destination
{
 public string Name { get; set; }
 public string IP { get; set; }
}
public class Protocol
{
 public string Name { get; set; }
 public string Type { get; set; }
 public string Port { get; set; }
}

How can I get the three objects in the JSON string to something like:

List<Source> = DoSomeThingWith(JsonString for Sources)
List<Destination> = DoSomeThingWith(JsonString for Destinations)
List<Protocol> = DoSomeThingWith(JsonString for Protocols)

??

• user3559349: There are no arrays in your code, just objects!
• Eric: thanks, updated the question.
• user3559349: Show the signature of the method you posting to. And if your wanting to bind to IEnumerable<Source> then you do need an array - [{"Name":"aaaaa","IP":"1.1.1.1" ...}, {"Name":"bbbb","IP":"2.2.2.2"}] etc
• Eric: I have added the method. It's not much yet.
• user3559349: No time right now, but I will add an answer in about 45 min

Answer 1

Your code suggests you want to post back 3 collections and the value of one of your form controls so your controller method needs to be

[HttpPost]
public ActionResult AddRule(List<Source> sources, List<Destination> destinations, List<Protocol> protocols, string remarks)

But the json your posting back has no relationship to what you need and you need to generate collections.

var sources = [];
var destinations = [];
var protocols = [];
// add some objects
sources.push({"Name":"aaaaa","IP":"1.1.1.1","Username":"vvvv"});
sources.push({"Name":"bbbb","IP":"2.2.2.2","Username":"fdfdfdf"});
// ditto for destinations and protocols
var data = { source: sources, destinations: destinations, protocols: protocols, remarks: $('#txtRemarks').val() };
$.ajax({
 url: '@Url.Action("AddRule")'; // don't hard code url's!
 type: 'POST',
 data: JSON.stringify(data),
 dataType: 'json',
 // traditional: true, // delete this
 contentType: "application/json; charset=utf-8", // add this
 success: function (data) {
 $('#pnDataCollection').html(data);
 });

Side note: Its not clear where the values for your collections are coming from. Assuming you have form controls to generate items in the collections, then all you need to do is use $('form').serialize(); to correctly serialize your data and post back to a model assuming you have correctly generated your view

• Eric: yes, that's it. It works now. The urls are not really hardcoded, part of it comes from a hidden control which is filled on every ajax update. The data does not come from input controls. In a previous screen the user can put that data and in the screen this code is from, the user selects checkboxes to create a combination of the data. Thank you and BG101 for helping!!
• user3559349: You are hard coding it - don't do it - always use @url.Action()

Answer 2

Try changing your action to:

 [HttpPost]
 public ActionResult AddRule(List<Source> sources, List<Destination> destinations, List<Protocol> protocols) 
 {
 return HttpNotFound();
 }

and change your data to:-

$.ajax({
 url: ThisController + '/AddRule',
 type: 'POST',
 data: postdata,
 dataType: 'json',
 traditional: true,
 success: function (data) {
 $('#pnDataCollection').html(data);
 }
});

$.ajax will handle converting the object for you. Just make sure the actions parameter names match the javascript objects property name.

Then change

var sources = {};
var destinations = {};
var protocols = {};

to

var sources = [];
var destinations = [];
var protocols = [];

When adding an object to the array, do it like

sources.push({ 'Name': field1, 'IP': field2, 'Username': field3 });

• Eric: thanks, but the arguments in the method are still empty. the method looks like this: public ActionResult AddRule(List<Source> sources, List<Destination> destinations, List<Protocol> protocols, string remarks)