Passing array of integers to webapi Method - asp.net-mvc

I am trying to pass an array of int but I can not get the value in the webapi method
var postData = { "deletedIds": deletedIds };
$.ajax({
type: "DELETE",
traditional: true,
dataType: 'json',
contentType: 'application/json',
cache: false,
url: "/api/Management/Models",
data: JSON.stringify(postData),
success: ModelDeleted,
error: ModelNotDeleted
});
and in apiController :
[HttpDelete]
public bool DeleteModel(int[] deletedIds)
{
return modelsRepository.DeleteModels(deletedIds);
}

Your code looking pretty Ok to me. Please define structure of "deletedIds" object.
one suggestion is to Use
new Array()
object to initialize deletedIds property and remove JSON.stringify() .
A similar question asked here.
EDIT
Web API supports parsing content data in a variety of ways, but it does not deal with multiple posted content values. A solution for your problem could be to create a ViewModel with a property of int[] type.
Like code below,
public class SimpleViewModel
{
public int[] deletedIds{ get; set; }
}
//Controller
[HttpDelete]
public bool DeleteModel(SimpleViewModel deletedIds)
{
return modelsRepository.DeleteModels(deletedIds.deletedIds);
}
and use it as parameter type.

At last, based on #Shashank Answer it worked and the code modified as :
var deletedIds = new Array();
deletedIds.push(modelId);
var postData = { "DeletedIds": deletedIds };
$.ajax({
type: "Delete",
traditional: true,
dataType: 'json',
cache: false,
url: "/api/Management/Models",
data: postData,
success: ModelDeleted,
error: ModelNotDeleted
});
and the apiController :
[HttpDelete]
public bool DeleteModels(DeleteViewModel dvm)
{
return modelsRepository.DeleteModels(dvm.DeletedIds);
}
and for the DeleteViewModel :
public class DeleteViewModel
{
public int[] DeletedIds { get; set; }
}

I suspect that the stringify bit is messing up your object - have you tried assigning it to a variable to see if it's the expected formatting?
You're stringifying the whole thing at the moment:
{ "deletedIds": deletedIds }
while what you probably want to send as post body is this:
{ "deletedIds": JSON.stringify(deletedIds) }

Related

asp .net mvc postdata always 0 in controller

I have very simple code (asp .net mvc c#) but just couldn't make it work. The companyId is always zero, while the booleans are returning correctly. My postdata is class called SomeObj with the ff properties
public bool isSomeBoolean1 { get; set; }
public bool isSomeBoolean2 { get; set; }
public bool isSomeBoolean3{ get; set; }
public int CompanyId { get; set; }
js:
var formData = formModule.createFormData(containerSelector + someContainer, false);
formData.append("companyId", $("#myCompanyId").val());
var promise = baseAjaxWithUpload('/SomeController/SomeAction', 'POST', formData).execute();
promise.done(function (operationStatus) {
if (operationStatus.isSuccess) {
}
});
The boolean properties returns correctly according to my input in form, but not CompanyId. I have tried wrapping it in JSON.stringify, made the companyId string type, put it back to int but parseInt(CompanyId) before passing. I also made the "CompanyId" to "companyId" but nothing worked.
I made sure that the formdata has value coz I typed in console formData.get("CompanyId") or formData.get("companyId") when I changed it to that spelling, both have values, but turns to zero in the controller.
I have also tried doing this:
var data = {
CompanyId: $("#myCompanyId").val(),
isSomeBoolean1 : true,
isSomeBoolean2 : true,
isSomeBoolean2: false,
}
var promise = baseAjaxWithUpload('/SomeController/SomeAction', 'POST', JSON.stringify(data) ).execute();
all booleans are passed correctly in controller just like formData, but not companyid. it always is 0;
this is my controller that uses it.
[HttpPost]
public ActionResult SomAction(SomeObj someObj )
{
}
I have also tried isolating the issue by adding a property called CompanyIdString with type string, then put hardcoded values like this formData.append("companyIdString", "test"), and tried to peek the value thru get, and it has, but that string returns null in controller. I also tried upper case spelling.
I mean I have been passing companyId all over the app, and never had a problem until now. What am I missing?
You can try to use application/x-www-form-urlencoded content type in the AJAX call:
var data = {
CompanyId: $("#myCompanyId").val(),
isSomeBoolean1 : true,
isSomeBoolean2 : true,
isSomeBoolean2: false,
}
$.ajax({
url: 'myUrl',
type: "POST",
contentType: 'application/x-www-form-urlencoded',
data: data,
success: function (result) {
console.log(result);
}
});

ASP.NET mvc 4 controller parameter always null when sending json to controller, why?

There are some similar posts already here, and tried every solution suggested, and still does not work... I can not get value inside controller, it is always null. Below is the code. Am I missing something?
Client side javascript
function getChart() {
JSONString3 = { HAxis : [{ Name : "monday" }] };
jQuery.ajaxSettings.traditional = true;
$.ajax({
url: "#Url.Action("getChart","SBM")",
type: 'POST',
contentType: 'json',
dataType: 'html',
data: JSONString3,
success: function (data) {
var imagestring = btoa(data);
$('#ChartImage').attr('src', "data:image/png;base64," + imagestring + "?" + new Date().getTime());
}
})
jQuery.ajaxSettings.traditional = false;
}
MVC Controller
[Authorize]
[HttpPost]
public ActionResult getChart(YAxis HAxis)
{
YAxis XAxisvalue = HAxis;
Charts chart = new Charts();
MemoryStream ms = new MemoryStream();
chart.Chart.SaveImage(ms);
string image = Convert.ToBase64String(ms.GetBuffer());
return File(ms.GetBuffer(), "image/png", "Chart.png");
}
Model
public class YAxis
{
public string Name { get; set; }
}
Thank you guys for the directions and solutions. The solution is a combination of all of your suggestions, so I decided to round it up in one post.
Solution to the problem is as follows:
contentType should be application/json (as Ant P suggested above)
json data should be in form of JSONString3 = {"Name" : "monday" } (as Ant P suggested above)
before sending to controller, json should be stringifyed as follows: JSONString3 = JSON.stringify(JSONString3) (as Quan suggested)
Client side javascript
function getChart() {
JSONString3 = { "Name" : "monday" };
jQuery.ajaxSettings.traditional = true;
$.ajax({
url: "#Url.Action("getChart","SBM")",
type: 'POST',
contentType: 'application/json',
dataType: 'html',
data: JSON.stringify(JSONString3),
success: function (data) {
var imagestring = btoa(data);
$('#ChartImage').attr('src', "data:image/png;base64," + imagestring + "?" + new Date().getTime());
}
})
jQuery.ajaxSettings.traditional = false;
}
MVC Controller
[Authorize]
[HttpPost]
public ActionResult getChart(YAxis HAxis)
{
YAxis XAxisvalue = HAxis;
Charts chart = new Charts();
MemoryStream ms = new MemoryStream();
chart.Chart.SaveImage(ms);
string image = Convert.ToBase64String(ms.GetBuffer());
return File(ms.GetBuffer(), "image/png", "Chart.png");
}
Model
public class YAxis
{
public string Name { get; set; }
}
Instead of this:
JSONString3 = { "Name" : "monday" };
we can do this:
var JSONString3 = {};
JSONString.Name = "monday";
But we still need to stringify object before posting to controller!!!
To pass multiple objects to controller, below is the example
Client side javascript
function getChart() {
//first json object
//note: each object Property name must be the same as it is in the Models classes on server side
Category = {};
Category.Name = "Category1";
Category.Values = [];
Category.Values[0] = "CategoryValue1";
Category.Values[1] = "CategoryValue2";
//second json object
XAxis = {};
XAxis.Name = "XAxis1";
XAxis.Values = [];
XAxis.Values[0] = "XAxisValue1";
XAxis.Values[1] = "XAxisValue2";
//third json object
YAxis = {};
YAxis.Name = "YAxis1";
//convert all three objects to string
//note: each object name should be the same as the controller parameter is!!
var StringToPost = JSON.stringify({CategoryObject : Category, XAxisObject : XAxis, YAxisObject : YAxis});
$.ajax({
url: "#Url.Action("getChart","SBM")",
type: 'POST',
contentType: "application/json",
dataType: 'html',
data: StringToPost,
success: function (data) {
var imagestring = btoa(data);
$('#ChartImage').html(data);
}
})
}
MVC Controller
[HttpPost]
public ActionResult getChart(Category CategoryObject, XAxis XAxisObject, YAxis YAxisObject)
{
//do some stuff with objects here and return something to client
return PartialView("_Chart");
}
Category model
public class Category
{
public string Name { get; set; }
public List<string> Values { get; set; }
}
XAxis model
public class XAxis
{
public string Name { get; set; }
public List<string> Values { get; set; }
}
YAxis model
public class YAxis
{
public string Name { get; set; }
}
Hope it will help someone to clarify the whole picture!
I had same problem (parameter always null), but my solution was different.
Make sure that your ActionResult method parameter doesn't have the same name as the JSON object property.
In this example I renamed myParam to myNewParam to differentiate from MyParam property.
Example:
This won't work:
var myObj = {
ID: '0',
MyParam: $('#mycontrol').val(),
};
$.ajax({
type: "POST",
url: '#Url.Action("MyAction", "MyModel")',
cache: false,
data: JSON.stringify(myObj),
datatype: 'json',
contentType: "application/json; charset=utf-8",
success: function (result) {
}
})
[HttpPost]
public ActionResult MyAction(Class1 myParam)
This will work:
var myObj = {
ID: '0',
MyParam: $('#mycontrol').val(),
};
$.ajax({
type: "POST",
url: '#Url.Action("MyAction", "MyModel")',
cache: false,
data: JSON.stringify(myObj),
datatype: 'json',
contentType: "application/json; charset=utf-8",
success: function (result) {
}
})
[HttpPost]
public ActionResult MyAction(Class1 myNewParam) -->renamed
Looks to me like you're trying to pass an array of objects:
JSONString3 = { HAxis : [{ Name : "monday" }] };
When your action only wants one:
public ActionResult getChart(YAxis HAxis)
Maybe you only meant to pass one?
JSONString3 = { "Name": "monday" };
JSONString3 = { "Name": "monday" };
You should post it to controller as a string, so use JSON.stringify to convert, i dont know how to use your ajax type, i just know to use $.post... T_T
$.post('#Url.Action("getChart","SBM")', {yourJson : data:JSON.stringify(JSONString3)} , function(data) {
if (data.success) {
var imagestring = btoa(data.name);
$('#ChartImage').attr('src', "data:image/png;base64," + imagestring + "?" + new Date().getTime());
}
});
In controller,
public ActionResult getChart(string yourJson)
{
YAxis yAxis= JsonConvert.DeserializeObject<YAxis>(yourValue);
// ....... your code here
return Json(new{success=true,name=yAxis.Name},JsonRequestBehavior.AllowGet);
}
** Note : JsonConvert is method of using Newtonsoft.Json; , please add Newtonsoft reference.
Adding a datatype attribute to the controller method solved it for me.
[JsonFilter(Param="yourParamName", JsonDataType=typeof(YourParamType))]
[HttpPost]
public ActionResult yourFunction(YourParamType YourParamName)
{
//do some stuff
}

Posting object AJAX to MVC controller results in all properties being null

I am trying to post an object from jquery to MVC controller. The object is passed successfully but all the properties are null (or false for bools).
fwiw, if I JSON.stringify myObect then it does not pass at all, theObect in the controller is null.
I am using MVC4, .net 4.5, jQuery 1.9.1
Any help appreciate.
jQuery function
var myObject =
{
Property1: true,
Proerty2: true
};
$.ajax({
type: 'POST',
url: '/myController/StartProcess/',
data: { theObject: myObject }
});
Controller
private async void StartProcess(myObject theObject)
{
// theObect can be seen successfully but property1 and property2 are false
// if I change them to strings they are null
...
}
Class
public class myObject
{
public bool Property1 { get; set; }
public bool Property2 { get; set; }
}
EDIT:
The solution was:
$.ajax({
type: 'POST',
url: '/myController/StartProcess/',
data: myObject
});
If anyone can shed some light as to why this works and nothing else does it would be greatly appreciated. It is not a great solution because I have to put all my parameters in myObject, I cannot pass any additional parameters using this technique. also curious as to why all the info I find online, including official tutorials, say to use data: JSON.Strinify(myObect) but for me this causes all the properties of myObject to be null (or false).
Thanks to Roar all the same, at least I can move past this.
Get this JSON library and stringify() the object like this:
$.ajax({
type: 'POST',
url: '/myController/StartProcess/',
data: JSON.stringify(myObject)
});
try this
$.ajax({
type: 'POST',
url: '/myController/StartProcess/',
data: myObject
});
If you tried to POST your object to an API controller, it would probably work. I had some trouble with this myself. If you're using jQuery, you need to specify that you're sending JSON so the MVC controller will correctly interpret the data.
You could try this:
$.ajax({
contentType: 'application/json',
data: { theObject: myObject },
dataType: 'json',
type: 'POST',
url: '/myController/StartProcess/'
});
Here's what can also make all properties null :
public ActionResult GetPaymentView(CardModel Card)
{
}
If the view is a collection of a model, when you pass a serialized form of one element in the collection to ajax call, the controller expects the same name instance as the class name. I assume that this is the same way without collection but never tried. In this code example we serialize one element of the collection
$.ajax({
url: '/Shipments/GetPaymentView',
type: 'POST',
data: $('#' + ID).serialize(),
success: { onSuccess(); },
error: { onError(jqXHR, textStatus, errorThrown); }
});
The reason why this happens is because the view model is a collection of the CardModel and the serialization is adding CardModel before each properties like this : CardModel.ID=foo&CardModel.bar The model binder takes it as granted and tries to match the instance sent with the property of the controller which it can't and instantiate a new instance for you hence all properties are nulls.
Try adding contentType: "application/json; charset=utf-8" to your ajax call.
OK, finally figured it out. Here is a full and proper solution showing how to pass additional parameters along with the object:
jQuery:
var myString= "my paramter";
var myObject =
{
Property1: true,
Property2: true
};
var DTO = { param1: myString, param2: myObject };
$.ajax({
contentType: "application/json; charset=utf-8",
type: 'POST',
url: 'myController/StartProcess',
data: JSON.stringify(DTO)
});
Controller:
[HttpPost] // notice this additional attribute!
private async void StartProcess(string param1, myObject param2)
{
// param2 parameters are all true! param1 shows correctly too.
...
}
Class
public class myObject
{
public bool Property1 { get; set; }
public bool Property2 { get; set; }
}

Received parameter from ajax POST empty in controller + passed parameter in firebug MVC 4

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.

Model binder does not convert json to IEnumerable<T>

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

Resources