function myItemsViewModel(ItemID, GroupID, ItemName, Quantity) {
this.ItemID = ItemID;
this.GroupID = GroupID;
this.ItemName = ItemName;
this.Quantity = Quantity;
}
And i have below code for posting to the controller
var CreateRecord = function () {
var Name = $.trim($("#divCreate").find("#txtName").val());
var Department = $.trim($("#divCreate").find("#txtDepartment").val());
var ItemsList = [];
$('#myDynamicTable').find('tr').each(function () {
var row = $(this);
var itemName = $.trim(row.find(".itemName input").val());
var itemQty = $.trim(row.find(".itemQty input").val());
var myItems = new myItemsViewModel("", "", itemName, itemQty);
ItemsList.push(myItems);
});
var obj = new myRecordEntryViewModel("", Name, Department, ItemsList);
var viewmodel = JSON.stringify(obj);
$.ajax({
type: 'POST',
cache: false,
dataType: 'html',
data: viewmodel,
headers: GetRequestVerificationToken(),
contentType: 'application/json; charset=utf-8',
url: '/' + virtualDirectory + '/RecordEntry/Save',
success: function (data) {
$("#divMaster").html(data);
return false;
},
error: function (msg) {
alert("Error Submitting Record Request!");
}
});
}
At the line var viewmodel = JSON.stringify(obj);, viewmodel has all the values that i want in my ItemsList array variable.
Problem is my ItemsList array is coming as null in the controller. Name and Department are coming through with the correct passed values.
Below is my controller code.
Class
public class myRecordEntryViewModel
{
public long ID { get; set; }
public string Name { get; set; }
public string Department { get; set; }
public string[] ItemsList { get; set; }
}
Save action
[ActionName("Save")]
[NoCache]
public ActionResult Save(myRecordEntryViewModel viewModel)
{
//here viewModel.ItemsList is null, what could i be missing
if (this.SaveEntry(viewModel.Name,viewModel.Department,viewModel.ItemsList))
{
}
return this.View();
}
I'm wondering why viewModel.ItemsList is coming as null in controller yet it has values during the post from jQuery.
You should create a class for the Item in Item List (In C#)
public class Item {
public string ItemName { get; set; }
public int Quantity { get; set; }
}
And then change the viewmodel class
public class myRecordEntryViewModel
{
public long ID { get; set; }
public string Name { get; set; }
public string Department { get; set; }
//public string[] ItemsList { get; set; }
public List<Item> ItemsList {get ; set;}
}
The controller can not map the Item List from your request into model because one is a list of string and other is a list of object.
There are several problems in your codes...
1) ItemList in your class and your javascript code are not same - The frist one is an array of strings, and the second is an array of objects
2) In your action method, you should change parameter type like the following:
public ActionResult Save(string viewModel)
3) In the body of your action method, you should deserialize the json string (viewModel) and make the model object from it. The following is an example...
https://stackoverflow.com/a/17741421/1814343
Try the below code and see if your model gets the values.
Let me know if you face any problems, because I've already implemented this in one of my projects
var CreateRecord = function () {
var Name = $.trim($("#divCreate").find("#txtName").val());
var Department = $.trim($("#divCreate").find("#txtDepartment").val());
var model="";
var ItemsList = [];
$('#myDynamicTable').find('tr').each(function () {
var row = $(this);
var itemName = $.trim(row.find(".itemName input").val());
var itemQty = $.trim(row.find(".itemQty input").val());
var myItems = new myItemsViewModel("", "", itemName, itemQty);
ItemsList.push(myItems);
});
model = ['Name' : Name , 'Department' : Department , 'ItemsList' :ItemsList];
$.ajax({
type: 'POST',
cache: false,
dataType: 'html',
data: JSON.stringify(model),
headers: GetRequestVerificationToken(),
contentType: 'application/json; charset=utf-8',
url: '/' + virtualDirectory + '/RecordEntry/Save',
success: function (data) {
$("#divMaster").html(data);
HideLoader();
return false;
},
error: function (msg) {
alert("Error Submitting Record Request!");
HideLoader();
}
});
}
Related
I can't figure out why my action param is coming through null. I'm also not sure of how to even diagnose the issue. I can see the http request data being sent with data and stepping through the debugger shows the object as null, not sure how to see the steps in between.
Models
public class ComplexObj
{
public int Id { get; set; }
public int Test1 { get; set; }
public decimal Test2 { get; set; }
}
public class BiggerObj
{
public BiggerObj()
{
ComplexObj = new List<ComplexObj>();
}
public long OtherId { get; set; }
public string Name { get; set; }
public ICollection<ComplexObj> ComplexObjs { get; set; }
}
Action
[HttpPost]
public void TestAction(BiggerObj[] biggerObjs)
{
...// biggerObjs is null :(
}
View
function ajaxCall() {
var data = [];
var bigObj = new Object();
bigObj.OtherId = 123;
bigObj.Name = "TestName";
bigObj.ComplexObj = [];
var complexObj = new Object();
complexObj.Id = 789;
complexObj.Test1 = 123;
complexObj.Test2 = 456;
bigObj.ComplexObj.push(complexObj);
data.push(bigObj);
}
}
$.ajax({
url: SITEROOT + "myController/TestAction",
cache: false,
type: 'POST',
data: data,
complete: function() {
alert('done');
}
});
}
Solved
You must use:
JSON.stringify and declare the contentType as "application/json; charset=utf-8"
Parse the decimal value by using parseFloat() function, decimal is considered as int by default binder.
Change your Action to this:
[HttpPost]
public ActionResult TestAction(BiggerObj[] biggerObjs)
{
...// biggerObjs is null :(
}
Change your ajaxCall function to this:
//ajaxCall
function ajaxCall() {
var data = [];
var bigObj = {
OtherId : 123,
Name : "TestName",
ComplexObjs : new Array()
};
var ComplexObjs = {
Id: 789,
Test1: 123,
Test2: parseFloat(456)
// decimal types are considered an integer, you have to parse
};
bigObj.ComplexObjs.push(ComplexObjs);
data.push(bigObj);
$.ajax({
url:"/Test/TestAction",
cache: false,
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
complete: function () {
alert('done');
}
});
}
I tested, works fine.
I have an .aspx page that we are loading UserControls into dynamically at runtime. Each user control has some sort of textbox or combo or some other control. This all works fine. when we go to read the values out of the controls when the user presses search, we cannot do this directlly from C# code behind because the page does not know they are there. my solution is to read the values with JQuery and make an ajax call where I can set the values in a session variable for use when the user gets to the next page. I am having trouble with the JSon specifically.
I keep getting the error:
{"Message":"Cannot convert object of type \u0027System.String\u0027 to type \u0027System.Collections.Generic.IDictionary`2[System.String,System.Object]\u0027","StackTrace":"
I find all the controls using .each and get the values for the JSon call:
function SaveFields() {
var data = [];
//get Search field criteria
$('[id^=Search_ucField_]').each(function (index, value) {
var field = $(this);
var id = $(this).attr('id').split("_")[2];
var fieldValue = $(this).val();
if (field.is('input')) {
var item = {};
item['FieldID'] = id;
item['Criteria'] = fieldValue;
item['IsActive'] = 1;
item['FieldCategoryID'] = '1';
item['ControlPath'] = '~/Controls/Search/TextBox.aspx';
item['CategoryID'] = 1;
data.push(item);
}
});
$.ajax({
url: '/Ajax/Ajax.aspx/DoSearch',
type: 'POST',
data: JSON.stringify(data),
datatype: 'json',
contentType: 'application/json',
success: function (msg) {
console.log(msg);
},
error: function (xhr, textStatus, errorThrown) {
alert('Error! Status = ' + xhr.status);
}
});
}
Here is the object I am trying to deserialize into:
[DataContract]
public class SearchFields
{
[DataMember]
public List<SearchField> Field { get; set; }
}
[DataContract]
public class SearchField
{
[DataMember]
public string FieldID { get; set; }
[DataMember]
public bool IsActive { get; set; }
[DataMember]
public string Criteria { get; set; }
[DataMember]
public int FieldCategoryID { get; set; }
[DataMember]
public string ControlPath { get; set; }
}
Here is the WebMethod
[WebMethod]
public static string DoSearch(string Fields)
{
var sf = new SearchFields();
sf = JsonConvert.DeserializeObject<SearchFields>(Fields);
//save into session variable
SVars.NewUISearch.LastSearchFields = sf;
string x;
x = "until this works, this is a static response";
return x;
}
finally, here is a sample of the JSon that is being sent:
[{"FieldID":"52","getCriteria":"Bobs your uncle","IsActive":1,"FieldCategoryID":"1","ControlPath":"~/Controls/Search/TextBox.aspx"}]
Where am I going wrong here? Thanks in advance!
I couldn't get $('form').serialize() to work so this is what I did. Make sure the properties you define in model represent the properties in your model and are strongly typed.
var model = {
MyString: $("#MyString").val(),
MyNumber: $("#MyNumber").val(),
IsCheck: $("CHK").val()
};
$.ajax({
type: "POST",
url: "/Testing/Index",
contentType: "application/json",
data: JSON.stringify(model),
dataType: "json",
success: function (data) {
// Good stuff
},
error: function (data) {
// Bad stuff
}
})
I have a simple method in my MVC controller:
[HttpPost]
public JsonResult GetAreasForCompany(int companyId)
{
var areas = context.Areas.Where(x => x.Company.CompanyId == companyId).ToList();
return Json(areas);
}
This is an area object:
public class Area
{
public int AreaId { get; set; }
[Required]
public string Title { get; set; }
public bool Archive { get; set; }
public virtual Company Company { get; set; }
}
And this is how I call the method from the view:
$.ajax({
url: '#Url.Action("GetAreasForCompany")',
type: 'POST',
async: false,
data: "{'companyId': " + companyId + "}",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
error: function () {
alert("Server access failure!");
},
success: function (result) {
response = result;
}
});
I have checked the method in the controller and a list of Area objects gets created. Would you have any idea why do I get the 500 internal server error when the method is called from the view? When I return anything else (like a Dictionary object) everything works fine, it's just when I aim to convert the List of Areas into Json I get an error.
Since class Area contains Company and Company contains collection of Area you likely have circular references in your object hierarchy which is not supported by the JSON serializer. To solve this, return anonymous objects with only those properties you need, for example
[HttpPost]
public JsonResult GetAreasForCompany(int companyId)
{
var areas = context.Areas
.Where(x => x.Company.CompanyId == companyId)
.Select(a => new
{
AreaId = a.AreaId,
Title = a.Title
});
return Json(areas);
}
Return List Object as Json (Also useful for JqueryUI and Linq Method)
public ActionResult GetItemList()
{
var search = Request.Params["term"];
var itemList = (from items in db.TblItems where items.ItemName.StartsWith(search) select new { label = items.ItemName, value = items.ItemName }).ToList();
return Json(itemList, JsonRequestBehavior.AllowGet);
}
Hi I'm new to JavaScript and MVC, and I'm trying to pass List and string to my controller.
JavaScript looks like:
var parms = {
globalList: globalList,
fieldName: fieldName
};
$.ajax({
//contentType: 'application/json; charset=utf-8',
type: "POST",
traditional: true,
url: "/Home/SaveField",
async: false,
data: parms,
dataType: "json",
success: function (data) {
console.log("uspjeh");
},
error: function (errorData) {
console.log("errors");
}
});
});
and controller looks like:
public void SaveField(List<Point> globalList, String fieldName)
{
// filedName is correctly passed
// list is null
}
can somebody help me please?
Point class:
public class Point
{
[Key]
public int PointId { get; set; }
public float GeoDuzina { get; set; }
public float GeoSirina { get; set; }
[ForeignKey("Data")]
public int DataId { get; set; }
public virtual Data Data { get; set; }
}
It wont work. If you debug a little then you will see that you post to server something like this:
globalList:[object Object]
globalList:[object Object]
globalList:[object Object]
It is just array of strings. But there is a way to do what you want.
You can serialize your array to json and then deserialize it in your controller. Just change your param to:
var parms = {
globalList: JSON.stringify(globalList),
fieldName: fieldName
};
And action:
[HttpPost]
public void SaveField(string globalList, string fieldName)
{
var serializer = new JavaScriptSerializer(); //use any serializer you want
var list = serializer.Deserialize<List<Point>>(globalList);
}
Or you can make param object looks like from HTML form:
var parms = {
"globalList[0].GeoDuzina": 51.506760996586294,
"globalList[0].GeoSirina": -0.06106463202740998,
"globalList[1].GeoDuzina": 51.516269286402846,
"globalList[1].GeoSirina": -0.056258113472722464,
"globalList[2].GeoDuzina": 51.50419662363912,
"globalList[2].GeoSirina": -0.044413478462956846,
fieldName: fieldName
};
It works with your action.
There are many other ways to do that. I just show two of them. Is any good for you?
btw. This numbers are too long for floats.;)
I have to send an object from view page to controller.
Ajax code:--
var jsdata = '{p:' + data + '}';
$.ajax({
type: "POST",
url: rootURL + "Deal/Check",
contentType: 'application/json; charset=utf-8',
data:JSON.stringify(jsdata, null, 2) ,
success: function (data) {}
});
Controller:-
[HttpPost]
public async Task<ActionResult> Check(DealCreateViewModel p)
{
CheckAvailabilities(p);
return View();
}
DealCreateViewModel :--
public List<AllocationID> Titles { get; set; }
public List<AllocationID> Episodes { get; set; }
[UIHint("MultiPicker")] public List<AllocationID> Assets { get; set; }
[UIHint("MultiPicker")] public List<QuickID> Documents { get; set; }
[UIHint("MultiPicker")] public List<AllocationID> Languages { get; set; }
[UIHint("MultiPicker")] public List<AllocationID> Territories { get; set; }
[UIHint("MultiPicker")] public List<AllocationID> Countries { get; set; }
[UIHint("MultiPicker")] public List<AllocationID> Rights { get; set; }
[UIHint("MultiPicker")] public List<AllocationID> Contributors { get; set; }
[UIHint("MultiPicker")] public List<AllocationID> Transmissions { get; set; }
The object "data" which I am sending through ajax can be anything means it can be either list of assets,list of titles,list of episodes or anything else from Viewmodel.
try below code
$.ajax({
type: "POST",
url: rootURL + "Deal/Check",
contentType: 'application/json; charset=utf-8',
dataType:'json',
data: { p : data },
success: function (data) {}
});
You can send it as a simple json string. However, you won't know the type of object or the class of object. So we must specify the type along with the json string we pass to the action method. In your case, you need to specify a list type (AllocationID, QuickID), and an object class (Document, Location, etc).
Hence sample json would look like:
var jsdata = {
"listType": "AllocationID",
"objectName" : "Documents",
"data": [
//list of json object representing a document.
]
};
var dto = { jsonData: jsData };
$.ajax({
type: "POST",
url: rootURL + "Deal/Check",
data:JSON.stringify(dto),
success: function (data) {}
});
Your action method will look like:
[HttpPost]
public async Task<ActionResult> Check(string jsonData)
{
//use newtonsoft json parser
JObject obj = JObject.Parse(jsonData);
var listType = obj["listType"].Value<string>();
if(listType == 'AllocationID')
{
var jarr = obj["data"].Value<JArray>();
List<AllocationID> documents = jarr.ToObject<List<AllocationID>>();
//do something with documents list...
}
}