I am sending json data to my controller action via jquery ajax post. The IEnumerable in my action is alway null.
Is my json wrong or why does the model binder not convert the json to the IEnumerable ?
public ActionResult Update(IEnumerable<Teststep> teststeps)
{
//
}
$.ajax({
url: '#Url.Action("Update", "Teststep")',
type: 'POST',
data: [{ "errortext": "oh something bad happended.", "unitid": "10" }, { "errortext": "you got it man.", "unitid": "20"}],
success: function (response) {
debugger;
if (response.success) {
dlg.dialog("close");
// Update UI
}
else {
// Reload the dialog with the form to show model/validation errors
dlg.html(response);
}
}
});
public class Teststep
{
[HiddenInput(DisplayValue = false)]
public int UnitId { get; set; }
public string ErrorText { get; set; }
// some other props removed for readability
}
In order to get collections (arrays, ienumerables, etc) to pass correctly through the modelbinder to the action method, I've always had to set the traditional: true option on the ajax call:
$.ajax({
url: '#Url.Action("Update", "Teststep")',
type: 'POST',
traditional: true,
...
Now it works! I get 1 item in the IEnumerable. The problem was the messed up json ;-)
var data = { teststeps: [{ ErrorText: 'bla', UnitId: 10}] };
$.ajax({
url: '#Url.Action("Update", "Teststep")',
type: 'POST',
data: JSON.stringify(data),
dataType: 'json',
contentType: 'application/json'
});
[HttpPost]
public ActionResult Update(IEnumerable<Teststep> teststeps)
{
}
Related
I have below lines of code in controller, model and in js file.
I am able to make call to controller, but model properties are always null.
...
[HttpPost]
public IActionResult CreateBooking(Country request)
{
return Ok();
}
public class Country
{
[JsonProperty("name")]
public string Name { get; set; }
[JsonProperty("code")]
public string Code { get; set; }
}
var request = {
name: 'Prateek',
code: 'US'
};
$.ajax('/Home/CreateBooking', {
data: JSON.stringify({ request }),
contentType: 'application/json',
type: 'POST',
dataType: 'json',
success: function (response) {},
error: function(response){}
Can anyone help please?
Thanks in advance
var request = jQuery.parseJSON('{ "Name": "Prateek", "Code": "US" }');
$.ajax({
url: "/Home/CreateBooking",
type: "POST",
dataType: "JSON",
data: request,
success: function (d) {
},
error: function (d) {
console.log(d);
}
});
I am passing back Json via a jQuery AJAX call to a MVC function that takes a Folder. MVC correctly parses some of the data but not the list I sent back.
MVC
public class Folder : IValidate
{
public int Id { get; set; }
public string Name { get; set; }
public ICollection<SearchCriteria> SearchCriteria { get; set; }
}
public class SearchCriteria
{
public int FolderId { get; set; }
public int SettingsEntryID { get; set; }
public string SearchParameter { get; set; }
}
public ActionResult EditFolder(Folder folder)
{
service.EditFolder(folder);
return this.Json(Json(new { Success = true }));
}
Javascript
var folder = {
Id: $("#groupID").val(),
Name: $("#groupName").val(),
SearchCriteria: []
};
$(".searchCriteria").each(function () {
folder.SearchCriteria.push(
{
FolderId: $("#groupID").val(),
SearchParameter: $(this).val(),
SettingsEntryID: $(this).attr("id").replace("searchCriteria", "")
});
});
$.ajax({
url: "/settings/editfolder/",
type: "POST",
dataType: "json",
data: folder,
traditional: true,
success: function (data) {
alert("wsaved");
}
});
folder, in this function gets set with Id and Name but SearchCriteria is not set properly. It is set to null. If I comment out the traditional: true the list gets created but all the values for each SearchCriteria are 0 or null.
Am I missing something?
You are missing two points
1. contentType: 'application/json; charset=utf-8',
2. data: JSON.stringify(folder)
And one correction.
URL should be like
url : "#Url.Action("ActionName", "ControllerName", new { area = "AreaName" })"
jQuery
$.ajax({
url: "#Url.Action("Action", "Controller", new { area = "Area" })",
type: "POST",
contentType: 'application/json; charset=utf-8',
dataType: "json",
data: JSON.stringify(folder),
traditional: true,
success: function (data) {
alert("wsaved");
}
});
I have looked over the net to figure out what my mistake is. All suggestions I found I tried, without any succes. I access the httppost action in my controller but the parameters stays empty.
AJAX function
var dataPost = { 'id': id, 'val': val };
debugger;
$.ajax({
type: 'POST',
url: '/Extensions/UpdateJson',
data: dataPost ,
contentType: 'json',
success: function () {
alert("succes");
},
error: function () {
alert("error");
}
});
On debug DataPost is populated.
Controller
[HttpPost]
public ActionResult UpdateJson(string id, string val)
{
//do stuff
return Json(true);
}
The parameters I used in my controller have the same name as in my Ajax function. The format passed is json, I have also tried populating my data with:
var dataPost = { 'id': 'id', 'val': 'val' };
But this doesn't make any difference. I have also tried to work with a Class, like -->
Class
public class ScheduleData
{
public string id { get; set; }
public string val { get; set; }
}
Controller
public ActionResult UpdateJson(ScheduleData data)
{//Do something}
Any help would be appreciated. Thanks in advance
The format passed is json
No, not at all. You are not sending any JSON. What you do is
data: { 'id': id, 'val': val }
But as the documentation clearly explains this is using the $.param function which in turn uses application/x-www-form-urlencoded encoding.
So get rid of this contentType: 'json' property from your $.ajax call.
Or if you really wanna send JSON, then do so:
var dataPost = { 'id': id, 'val': val };
$.ajax({
type: 'POST',
url: '/Extensions/UpdateJson',
data: JSON.stringify(dataPost),
contentType: 'application/json',
success: function () {
alert("succes");
},
error: function () {
alert("error");
}
});
Things to notice:
usage of JSON.stringify(dataPost) to ensure that you are sending a JSON string to the server
contentType: 'application/json' because that's the correct Content-Type value.
I have a viewmodel that has 2 properties, first property is a Model object and the second property is a List . In my View i have 2 parts.
First part populates the data for the first object, Firstname,lastname,email and some other stuff.
The second part of my view is a webgrid that a user adds multiple address.
Now what is my problem, i have a JSON action on my controller that gets the data from the form, adds them to the viewmodel List property, but nothing happens.
I checked that the data is coming from the view, added to the viewmodel but each time the viewmodel is empty.
[Authorize]
public JsonResult addAddress(Address addr, CustomerViewModel model)
{
if (model.CAddress== null)
model.CAddress= new List<Address>();
model.CAddress.Add(addr);
return Json(model, JsonRequestBehavior.AllowGet);
}
I am using Javascript :
function AddAddress()
{
var addID = $("#lstID option:selected").val();
var addName = $("#lstAddName option:selected").text();
var Address =
{
addID : addID.toString(),
addName : addName.toString()
};
$.ajax({
type: "POST",
url: "#Url.Action("addAddress","Customer")",
dataType: "json", contentType: "application/json; charset=utf-8",
data: JSON.stringify(Address),
success: function (data) {} }); };
Alright, start by writing a real view model, not some hybrids:
public class CustomerViewModel
{
public List<AddressViewModel> Addresses { get; set; }
... some other properties you already had
}
public class AddressViewModel
{
public string Id { get; set; }
public string Name { get; set; }
}
then adapt your controller action to take your real view model, and not some hybrids and mixtures between view models and domain models:
[Authorize]
[HttpPost]
public ActionResult AddAddress(CustomerViewModel model)
{
return Json(model);
}
and finally adapt your AJAX call:
function AddAddress() {
$.ajax({
url: '#Url.Action("AddAddress", "Customer")',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({
addresses: [
{
id : $('#lstID').val(),
name : $('#lstAddName option:selected').text()
}
],
someOtherPropertyOnYourViewModel: 'some other value'
}),
success: function (data) {
}
});
}
I have the following javascript snippet:
$.ajax({
url: self.LoadCirculationListUrl,
cache: false,
async: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: [ { "ColumnName":"France","Comparitor":"=","Value":"1"},{"ColumnName":"Germany","Comparitor":">","Value":"3"}]
});
Here is the controllre which is accessed from the above ajax call:
public ActionResult LoadCirculationData(IList<CirculationListFilter> filters)
{
}
Here is the CirculationListFilter class
public sealed class CirculationListFilter
{
public string ColumnName { get; set; }
public string Comparitor { get; set; }
public string Value { get; set; }
}
Now when I run the code, the controller does not get the JSON collection passed to it; filters is always null. However, if I do this:
$.ajax({
url: self.LoadCirculationListUrl,
cache: false,
async: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: { "ColumnName":"Germany","Comparitor":">","Value":"3"}
});
and the contoller is like this:
public ActionResult LoadCirculationData(CirculationListFilter filters)
{
}
The data is passed fine. Why can't the controller bind a collection of JSON items?
EDIT:
I changed the AJAX call to use this:
data: { filters: [{ "ColumnName": "France", "Comparitor": "=", "Value": "1" }, { "ColumnName": "Germany", "Comparitor": ">", "Value": "3" }]},
and the ActionResult:
public ActionResult LoadCirculationData(List<CirculationListFilter> filters)
Now filters has 2 items inside of it, but each of the CirculationListFilter classes are populated with NULL data in their properties. So I'm getting closer, but the actual values are not being binded.
The problem is in the .ajax() call.
.ajax() doesn't convert the data into JSON string.
The reason why it works for one item is because .ajax() was able to convert the data into a query string which MVC happily accepted.
The solution is to convert the JSON into string first:
$.ajax({
url: self.LoadCirculationListUrl,
cache: false,
async: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify([ { "ColumnName":"France","Comparitor":"=","Value":"1"},{"ColumnName":"Germany","Comparitor":">","Value":"3"}])
});
I've found another solution:
Ajax call:
data: { 'json': '[{ "ColumnName": "France", "Comparitor": "=", "Value": "1" }, { "ColumnName": "Germany", "Comparitor": ">", "Value": "3" }]' },
Controller:
public ActionResult LoadCirculationData(string json)
{
JavaScriptSerializer js = new JavaScriptSerializer();
var obj = js.Deserialize<List<CirculationListFilter>>(json);
}
The above gives me the items that I need. Really not sure why the JSON binder doesn't do this by default.
If you want to recieve in this format
public ActionResult LoadCirculationData(IList<CirculationListFilter> filters)
{
}
You need to post it in next format data: {
{
"ColumnName[0]":"Germany","Comparitor[0]":">","Value[0]":"3",
"ColumnName[1]":"Germany","Comparitor[1]":">","Value[1]":"3",
"ColumnName[2]":"Germany","Comparitor[2]":">","Value[2]":"3",
"ColumnName[3]":"Germany","Comparitor[3]":">","Value[3]":"3",
"ColumnName[4]":"Germany","Comparitor[4]":">","Value[4]":"3",
}