Home Ask Login Register

Developers Planet

Your answer is one click away!

Eric February 2016

JSON data to MVC controller actionresult

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 stri        

Answers


BenG February 2016

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 });


Stephen Muecke February 2016

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

Post Status

Asked in February 2016
Viewed 3,288 times
Voted 11
Answered 2 times

Search




Leave an answer


Quote of the day: live life