Im having what I think is quite a strange problem and im hoping its just something iv overlooked. Im trying to pass some arrays to my mvc controller using ajax, from my console output I can see the correct values are being posted BUT it seems that just ONE of them will not bind correctly and I just get null but only if the other 2 arrays have values. If the other 2 are null then KnownTo will bing correctly.
Here is my javascript code
var sectors = new Array();
var offices = new Array();
var KnownTo = new Array();
on a click event i add to these arrays by checking some data attributes on certain elements on a page. I then do the request.
postData = {
'Sector': sectors,
'Offices': offices,
'KnownTo': KnownTo
};
$.ajax({
type: 'POST',
contentType: "application/json;charset=utf-8",
url: 'Controller/SearchActivities',
dataType: 'json',
data: JSON.stringify(postData),
success: function (result) {
console.log(result)
},
failure: function (result) {
console.log(result)
}
});
After the ajax call i see the correct values posted in firebug.
I then get to the controller...
[HttpPost]
public JsonResult SearchActivities(FilterPageViewModel model)
{
//something
}
The sectors and offices are filled correctly but my KnownTo is not. Here is the FilterPageViewModel
public class FilterPageViewModel
{
public int[] Sector{ get; set; }
public int[] Offices{ get; set; }
public int[] KnownTo{ get; set; }
}
Now the strange thing is, if only KnownTo has values posted to it and the other 2 are null then KnownTo gets binded correctly, but if there are values on either of the other arrays then KnownTo will be null no matter what. I hope that make sense.
I fixed this by just re naming the KnownTo array to something else. Im guessing KnownTo is a reserved word of some kind.
Related
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);
}
});
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 have a form where I have a bunch of textbox and dropdowns. I now need to add another array of sub objects and include that as part of the my form post.
I was going to hand roll this as an html table but i thought that i could leverage jqGrid. What is the best way I can use jqGrid locally to add data and then have that included in the form post? The reason that i need jqGrid to act locally is that these are subrecords as part of the larger form so I can't post the jqGrid rows until the larger form is posted (so i have an Id to join these rows with)
So for example, if my post was an Order screen (with textboxes for date, instructions, etc) and now i want to have a grid that you can add products into the order. You can have as many rows as you want . .)
my backend is asp.net-mvc if that helps with any suggestions.
If you use form editing you can extend the postdata in many ways. The most simple one is the usage of onclickSubmit callback:
onclickSubmit: function (options, postData) {
return {foo: "bar"};
}
If you use the above callback then the data which will be post to the server will be extended with the parameter foo with the string value "bar".
Another possibility is the usage of editData option of editGridRow. The best way is to use properties of editData defined as function. In the way the funcion will be called every time before posting of data.
For example the following code
$("#grid").jqGrid("navGrid", "#pager", {}, {
editData: {
foo: function () {
return "bar";
}
},
onclickSubmit: function (options, postData) {
return {test: 123};
}
});
will add foo=bar and test=123 to the parameters which will be send to the server.
The next possibility will be to use serializeEditData. The callback gives you full control on the data which will be sent to the server.
I am using the method of serialization as Oleg suggested.
view
$( "#Save" ).click( function ( e )
{
e.preventDefault();
var griddata= $( "#list" ).getRowData();
var model = {
grid: griddata
};
var gridVal = JSON.stringify( model );
//Now set this value to a hiddenfield in the form and submit
$('#hiddenGridDta').val(gridVal );
$( 'form' ).submit();
});
And in the controller, deserialize the values using Newtonsoft.json.jsonconvert().
public ActionResult SaveTest(TestClass test)
{
testViewModel myGrid = JsonConvert.DeserializeObject<testViewModel>(test.hiddenGridDta);
................
}
testViewModel class
public class testViewModel
{
public IEnumerable<TestGrid> grid { get; set; }
}
TestGrid class
public class profileGrid
{
//fields in the jqgrid (should use the same name as used in *colModel:* of jqgrid)
public int x
{
get;
set;
}
public int y
{
get;
set;
}
.......
}
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];
}
}
}
}
};