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);
}
});
Related
I'm running the following AJAX call.
var submission = {};
submission.input = [];
submission.input.push({ Id: "{ab684cb0-a5a4-4158-ac07-adff49c0c30f}" });
submission.input.push({ Id: "{bb684cb0-a5a4-4158-ac07-adff49c0c30f}" });
$.ajax({
url: "http://" + "localhost:49642/Controller/Action",
data: submission
});
It works as supposed to and in my controller I can see two elements. However, the Id fields is all-zeros. I'm certain I failed to match the definition of the object on the server-side but I'm to annoyed and frustrated right now to generate more suggestions how to shove the data to the service.
The data model is like this.
public class Thingy
{
public Guid Id { get; set; }
public IEnumerable<Guid> Blobb { get; set; }
}
I've tried to use different bracket types, apostrophes and such enclosing the guids on client-side. To no avail. What can I have forgotten?!
Edit
I need to clarify the structural definition of my information object. The controller is set up to receive the following.
public ActionResult SelectionStorage(IEnumerable<Stuff> stuff)
{
Session["Stuff"] = stuff;
return null;
}
The definition of the Stuff class is more complex but the following will suffice as a POC.
public class Stuff
{
public Guid Id { get; set; }
public IEnumerable<Guid> Ids { get; set; }
public Dictionary<String, decimal> Amounts { get; set; }
}
So, on the client, I'm performing the following set up of the submitted data object.
var submission = {};
var subIds = [];
subIds.push("{ab684cb0-a5a4-4158-ac07-adff49c0c30f}");
subIds.push("{bb684cb0-a5a4-4158-ac07-adff49c0c30f}");
submission.input = [];
submission.input.push({
Id: "{cb684cb0-a5a4-4158-ac07-adff49c0c30f}",
Ids: subIds,
Amounts: null
});
Note that the Amounts will differ from null but that headache I haven't even got to, yet.
Edit 2
New try - a simpler approach. In JS I send the following.
var stuff = {};
stuff.input = [];
stuff.input.push("{ab684cb0-a5a4-4158-ac07-adff49c0c30f}");
stuff.input.push("{bb684cb0-a5a4-4158-ac07-adff49c0c30f}");
$.ajax({
url: ...,
data: stuff,
type: "POST",
success: ...,
error: ...
});
On recieving end in C# I have this.
public ActionResult MyAction(List<String> input) { ... }
This gives null. I can't see why.
You should be able to simplify the jquery. With what you have here you don't need the submission. If you are sending a complex list back to the controller you need to name your variables but since you are just sending a string back you don't need to do that. Try changing your data to
var input = [];
input.push("{ab684cb0-a5a4-4158-ac07-adff49c0c30f}");
input.push("{bb684cb0-a5a4-4158-ac07-adff49c0c30f}");
then in the ajax call
data: input,
or
data: Json.stringify(input);
then on your controller
public ActionResult Action(List<String> input){...
Edit:
try changing your jquery to this:
var stuff= {};
stuff.Id = "{cb684cb0-a5a4-4158-ac07-adff49c0c30f}";
stuff.Ids= [];
stuff.Ids.push("{ab684cb0-a5a4-4158-ac07-adff49c0c30f}");
stuff.Ids.push("{bb684cb0-a5a4-4158-ac07-adff49c0c30f}");
then in your ajax have data: stuff, or data: Json.stringify(stuff),
I am trying to implement sorting on a custom grid I am working on and having an issue with jQuery to MVC parameter binding.
I have a Jquery request like the one shown below
// Javascript
var dataobj =
{
test: 3,
sortInfo: self.sortInfo,
pagingInfo: {
TotalItems: 34, //headercontainer.attr("data-pagingInfo-TotalItems"),
ItemsPerPage: headercontainer.attr("data-pagingInfo-ItemsPerPage"),
CurrentPage: headercontainer.attr("data-pagingInfo-CurrentPage")
}
};
$.ajax({
url: self.viewModel.GenericGridHeaderModel.SortingCallbackUrl,
type: 'POST',
data: dataobj,
dataType: "json",
success: function (html) {...}
});
// C#
public PartialViewResult GenericGridSort(int test, SortInfo sortInfo, PagingInfo pagingInfo){
...
}
At the moment I have non null values in sortInfo object in Javascript and I see that the values are posted correctly however inside the action method the values are not getting bound correctly. All I see is default values for the sortInfo and pagingInfo parameters. In fact the test parameter is getting the value 3 correctly.
For clarity here is my sortInfo model
public enum SortDirection
{
None = 0,
Ascending = 1,
Descending = 2
}
public class SortInfo
{
public int FieldIndex { get; set; }
public string FeildName { get; set; }
public SortDirection SortDirection { get; set; }
}
Can anyone tell me what am I missing here ?
Thanks all !
I believe that you are not encoding the JSON payload.
You should be using either:
data: $.toJSON(dataobj),
or
data: JSON.stringify(dataobj),
Also, for contentType use:
contentType: 'application/json; charset=utf-8',
Here is more information on POSTing JSON payload to MVC
Also, in the dataType option you specify the type of the return value, in your case, it looks like the action method will be returning HTML, but you are specifying JSON.
Wow, as soon as I know that will not work. When you attempt to pass inner objects in your ajax data you must reference the inner objects properties strictly in the root of data ("innerobject.property": value)
Example:
var dataobj =
{
test: 3,
"sortInfo.property1": self.sortInfo.property1,
/* other properties */
"pagingInfo.TotalItems": 34,
//headercontainer.attr("data-pagingInfo-TotalItems"),
"pagingInfo.ItemsPerPage": headercontainer.attr("data-pagingInfo-ItemsPerPage"),
"pagingInfo.CurrentPage": headercontainer.attr("data-pagingInfo-CurrentPage")
};
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) }
Edit: I've got the solution and have described it a bit more at the end of the post
Using: MVC 3, C#
Problem: A key/value obj array sent to controller via $.post/$.ajax results in a 500 internal server error at the controller (because the value passed to the method in the C# controller is null)
I have an array that's in the format:
{
"q_1": {
"qid": "1",
"tmr": 0
},
"q_2": {
"qid": "2",
"tmr": 0
}
}
I get this via $("#myid").data() - and this is all fine.
I need to send this to my controller, and tried both post and $.ajax
var d = $("#q_data").data();
$.post("/run/submit", d, function(data) { alert(data);}, "application/json");
and
$.ajax({
url: '/run/submit',
data: d,
contentType: 'application/json',
dataType: 'json',
success: function (data) { alert(data); }
});
The method on the C# side is
public ActionResult Submit(List<PerfObj> dict)
{
int x = dict.Count;
return PartialView("_DummyPartial");
}
Where PerfObj is my model
public class PerfObj
{
public string id { get; set; }
Perfvar perfVar;
}
public class PerfVar
{
public string qid { get; set; }
/* note I've tried both int and string for the tmr param */
public string tmr { get; set; }
}
When I execute this, the call goes to the controller correctly - i.e. it hits the submit method. However, the method parameter dict, in
List<PerfObj> dict
is null.
Why? It seems to be something with my model, can't figure out how else to design it so it extracts the values correctly to the method parameter.
When I print the JSON.Stringify on the console, it shows the key/value pair correctly so I'm thinking it's going correctly to the server but the server/MVC3 doesn't like it for some reason or can't map it to the List of PerfObjs.
EDIT: Solution
Maciej's answer to my post was how I solved it. What I did eventually was to create a arrays of perfObj at the client side
$("#q_data").data(e,{key: e, perfVar: { qid: e, tmr: 0 }})
(ps - ignore redundant usage of 'e', I've got other plans, this is a dummy case)
And then I mapped it to a JSON friendly array
var arr = [];
$.each($('#q_data').data(), function (i, e) {
var p = $(this).data(i);
var obj = { key: i, perfVar: { id: e.perfVar.qid, tmr: e.perfVar.tmr}};
arr.push(obj);
});
Then stringified it
var q = JSON.stringify(arr);
$.ajax'd it as described in Maciej's post.
I redefined my classes properly
public class PerfObj
{
public string key { get; set; }
public PerfVar perfVar { get; set; }
}
public class PerfVar
{
public string id { get; set; }
public int tmr { get; set; }
}
and changed the signature of my controller method
[HttpPost]
public ActionResult Submit(PerfObj[] dict)
{
return PartialView("_DummyPartial");
}
This now works perfectly and I can extend my classes fairly easily to do what I want.
Thank you all!
There are 3 things wrong with your code:
A. The property PerfVar must be made public and there must be a get and set on it:
public class PerfObj
{
public string id { get; set; }
public Perfvar perfVar { get; set; }
}
B. Your JSON representation of the list is incorrect. It should be:
var e = [
{ "id": "foo", "perfVar": { "qid": "a", "tmr": "b"}},
{ "id": "foo", "perfVar": { "qid": "a", "tmr": "b"}}
];
C. You have to stringify the array and specify type: 'POST' to pass it to your MVC controller via ajax:
$.ajax({
url: '/run/submit',
data: JSON.stringify(e),
contentType: 'application/json, charset=utf-8',
dataType: 'json',
type: 'POST',
success: function (data) { alert(data); }
});
You can't directly map a key/value pair to a flat sequence. MVC has no idea how to do that.
You either need a custom model binder, or a better/easier option would be to change how you create the JSON on the client-side, so it actually matches up to your model.
Something like this:
var perfObjs =
{
{ id: 1, perfVar: { qId: 1, tmr: 0 }},
{ id: 2, perfVar: { qId: 2, tmr: 0 }},
}
$.post("/run/submit", perfObjs, function(data) { alert(data);}, "application/json");
Because the controller does not recognize the json value as List.
Why not just pass the raw string to your controller and let your controller convert the json string to object? that will be much more easier.
Is there a way to map from/to a POCO and knockoutjs observable?
I have a Note class:
public class Note
{
public int ID { get; set; }
public string Date { get; set; }
public string Content { get; set; }
public string Category { get; set; }
public string Background { get; set; }
public string Color { get; set; }
}
and this is my javascript:
$(function () {
ko.applyBindings(new viewModel());
});
function note(date, content, category, color, background) {
this.date = date;
this.content = content;
this.category = category;
this.color = color;
this.background = background;
}
function viewModel () {
this.notes = ko.observableArray([]);
this.newNoteContent = ko.observable();
this.save = function (note) {
$.ajax({
url: '#Url.Action("AddNote")',
data: ko.toJSON({ nota: note }),
type: "post",
contentType: "json",
success: function(result) { }
});
}
var self = this;
$.ajax({
url: '#Url.Action("GetNotes")',
type: "get",
contentType: "json",
async: false,
success: function (data) {
var mappedNotes = $.map(data, function (item) {
return new note(item.Date, item.Content, item.Category, item.Color, item.Background);
});
self.notes(mappedNotes);
}
});
}
Ignore the fact that the save function is not used (to simplify the code here).
So, when I load the page I call the server and I retrieve a list of Note objects and I map it in javascript. Notice how ID is not mapped because I dont need it in my view.
So far so good, I see the notes on screen, but how I can save the notes back to the server?
I tried to convert the note (Im saving just the new note and not the entire collection) to JSON and send it to my controller but I don't know how to access to the note in the controller. I tried:
public string AddNote(string date, string content, string category, string background, string color)
{
// TODO
}
but is not working. I want to have something like:
public string AddNote(Note note) {}
(Btw, what's the best return for a method that just save data on DB? void?)
So, How I do this? I tried knockout.mapping plugin but it is quite confusing and I don't get it working for me.
Thank you.
ASP.NET MVC's model binder will look for properties that are case-sensitive. You need to pass your JSON object back to the server with the property names matching your poco object.
I usually do 1 of 2 things:
Make my javascript object property names capital (that way in JS, I know that this object will at some point be a DTO for the server)
function Note(date, content, category, color, background) {
this.Date = date;
this.Content = content;
this.Category = category;
this.Color = color;
this.Background = background;
};
In my AJAX call i will just create an anonymous object to pass back to the server (note this does not require ko.toJSON):
$.ajax({
url: '#Url.Action("AddNote")',
data: JSON.stringify({ note: {
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
}),
type: "post",
contentType: "application/json; charset=utf-8",
success: function(result) { }
});
(note the different contentType parameter as well)
You will want to make your ActionMethod take in a (Note note) and not just the array of parameters.
Also, because the modelbinders look through the posted values in a couple different ways. I've had luck posting JSON objects with out specifying the ActionMethod parameter name:
instead of:
{ note: {
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
}
just do:
{
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
(but this can get dicey with arrays binding to collections and complex types...etc)
As far as the 'Best' signature for a return on a method that does a db call, we generally prefer to see boolean, but that also depends on your needs. Obviously if it is trivial data, void will be fine, but if its a bit more critical, you may want to relay a boolean (at the least) to let your client know it might need to retry (especially if there's a concurrency exception).
If you really need to let your client know what happened in the database, you can foray into the world of custom error handling and exception catching.
Also, if you need to display very specific information back to your user depending upon a successful/unsuccessful database commit, then you could look at creating custom ActionResults that redirect to certain views based upon what happened in the database transaction.
Lastly, as far as getting data back from the server and using Knockout...
again the mapping plugin will work if your property names are the same case or you create a slightly more explicit mapping
My own trick with my JS objects is below. The initialize function is something i created that should be reusable across all your objects as it just says "if the property names match (after being lowercased), either set them by calling the function (knockout compatible) or just assign the value.:
function Note(values){ //values are what just came back from the server
this.date;
this.content;
this.category;
this.color;
this.background;
initialize(values); //call the prototyped function at the bottom of the constructor
};
Note.prototype.initialize = function(values){
var entity = this; //so we don't get confused
var prop = '';
if (values) {
for (prop in values) {
if (values.hasOwnProperty(prop.toLowerCase()) && entity.hasOwnProperty(prop.toLowerCase())) {
//the setter should have the same name as the property on the values object
if (typeof (entity[prop]) === 'function') {
entity[prop](values[prop]); // we are assuming that the setter only takes one param like a Knockout observable()
} else {// if its not a function, then we will just set the value and overwrite whatever it was previously
entity[prop] = values[prop];
}
}
}
}
};