Send Multiple Objects Via Ajax (using Angular)

I have a list of user inputs in an object 'data'. (for e.g data.username, data.password, data.age) i am passing the data object to backend like this using angular. var submits = '

Solution 1:

Assuming you have a view model like this in your server side

publicclassCreateUserViewModel
{
  publicstring UserName{set;get;}
  publicstring Location {set;get;}
  publicint Age {set;get;}
}
publicclassRegisterViewModel
{
  public CreateUserViewModel User {set;get;}
  public List<string> Selections {set;get;}
  public List<string> Grid {set;get;}
}

and an MVC action method like this

public ActionResult Create(RegisterViewModel model){
  // read model and save and return some JSON response
}

You can simply build the javascript object which matches the structure of the view model and post it using angualr's $http service. No need to worrry about setting content-Type or Json stringifying it. Angualr will take care of it.

var model={ User : {} ,Selections :[], Grid=[] };
model.User.Age =23;
model.User.UserName ="test";
model.User.Location="New York";

model.Selections.push("dy.txt");
model.Selections.push("some.txt");

model.Grid.push("session");
model.Grid.push("id");

var url="replcaeUrltoYourActionMethodHere";

$http.post(url, model)
.then(function(response)
{
  // do something with the response// var result= response.data
});

Solution 2:

You can send multiple objects / variables in ajax with:

var submits = "=" + JSON.stringify(data);
$.ajax({
        type: "POST",
        url: serviceURL,
        data: {submits : submits, data1:data1, data2:data2}
});

In your C# you can access data1 and 2 in the same way as you handle submits now. Depending of what is in data1 and data2 you might need to stringify it first.

second option: You can also if you want to (but it is more ugly) use the stringify on everything at once and only pass the string:

data = {};
data["data1"] = data1;
data["data2"] = data2;
var submits = "=" + JSON.stringify(data);

Solution 3:

Are you using WebApi or MVC on the server? If so, the simplest approach would be to create a class which holds the 3 entities you need to send and leverage the built-in model-binding

So in your example you list what looks to be a user form, selections and grids. I'm not really sure what the last two are but an example Model might look something like this:

publicclassUserSubmissionViewModel
{
    publicUserSubmissionViewModel() { }

    public UserFormModel User {get;set;}

    public SelectionsModel Selections { get; set; }

    public GridModel Grids { get; set; }
}

Then on your web api controller or your MVC controller you'd have a method such as this:

publicasyncTask<IHttpActionResult> Submit(UserSubmissionViewModel model)

And your javascript would resemble something roughly like this:

var toSend = {"UserFormModel":data, "SelectionsModel":selections, "GridModel":grids};
$.ajax({
         type:"POST",
         data:toSend, //<--- you might need to JSON.stringify this, cant test this code at the moment
         url:serviceURL //<-- Calls your Submit method on the controller
    });