I've a simple issue but it got complicated. I am trying to pass an array of object using jQuery and in the back-end, I am using C# to get the list. So this is what I've tried so far:
jQuery:
$('#btnStrickOff').on('click', function () {
var formData = new FormData();
debugger;
var rowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
for (var i = 0; i < rowindexes.length; i++) {
var row = $('#jqxgrid').jqxGrid('getrowdata', rowindexes[i]);
formData.append('strData[' + i + '].empno', row.empno);
formData.append('strData[' + i + '].Name', row.Name);
formData.append('strData[' + i + '].Des', row.Des);
formData.append('strData[' + i + '].Dept', row.Dept);
formData.append('strData[' + i + '].Section', row.Section);
formData.append('strData[' + i + '].Emp_type', row.Emp_type);
formData.append('strData[' + i + '].LateAtt', row.LateAtt);
formData.append('strData[' + i + '].Diff', row.Diff);
}
var url = '#Url.Action("InsertStrikeOff")';
debugger;
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: JSON.stringify({ 'things': formData }),
contentType: false,
processData: false,
async: false,
success: function (data) {
alert("Updated. - "+data);
}
});
});
So the idea is: There is a table and each row has a CheckBox associated with it. Whenever user checks a row or multiple, it should have the row data in an Array and iterate through, then passes to the C# controller in the Ajax call. Here is the C# code section:
C#:
public JsonResult InsertStrikeOff(List<DailyStrikeOffBO> things)
{
DateTime strikeDate = DateTime.Now;
var value = (dynamic)null;
foreach (var item in things)
{
bool chk = Facede.StrikeOff.CheckStrikeOff(item.empno);
if (chk == false)
{
bool aStrikeOffBo = Facede.StrikeOff.InserstrikeOffLst2(item.empno, item.Name, item.LateAtt, strikeDate, item.remarks);
value = "<div style='color:green;'>Striked-off request sent!</div>";
}
else
{
value = "<div style='color:red;'>Already striked off!</div>";
}
}
return Json(value, JsonRequestBehavior.AllowGet);
}
Unfortunately, I am getting this error every time when it calls the C# controller though I am quite sure I am doing the right thing - Object reference not set to an instance of an object. Anything that I missed here?
Update 1: Model
public class DailyStrikeOffBO
{
public string empno { get; set; }
public string Name { get; set; }
public string Des { get; set; }
public string Dept { get; set; }
public string Section { get; set; }
public string Emp_type { get; set; }
public string Diff { get; set; }
public string LateAtt { get; set; }
}
Update 2:
You cannot post an object containing FormData - you need to send the actual FormData object. In addition your name do not match the model you are posting to, which is a collection, not an object containing a collection.
Assuming DailyStrikeOffBO contains properties empno, Name,Des` etc, then you need to append the name/value pairs as
formData.append('[' + i + '].empno', row.empno);
formData.append('[' + i + '].Name', row.Name);
formData.append('[' + i + '].Des', row.Des);
.... // etc
and then modify the ajax option to
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: formData , // modify
contentType: false,
processData: false,
async: false,
success: function (data) {
alert("Updated. - "+data);
}
});
for (a = 0; a < rowindexes.length; a++) {
var row = $('#jqxgrid').jqxGrid('getrowdata', rowindexes[i]);
var model = {
empno : row.empno,
Name: row.Name,
Des: row.Des,
Dept: row.Dept,
Section: row.Section,
Emp_type: row.Emp_type,
Diff: row.Diff,
LateAtt: row.LateAtt
};
data.push(model);
}
var modelString = JSON.stringify(data);
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: modelString ,
contentType: "application/json; charset=utf-8",
processData: false,
success: function (data) {
alert("Updated. - "+data);
}
});
Instead of using FormData try using json object.
The way you are passing data thru ajax ( data: JSON.stringify({ 'things': formData }), ) that is also not correct.
Try the above code, let me know how it goes.
Related
I am trying to send stringified array from view with $.ajax but I am constantly getting null in controller.
This is controller function:
[HttpPost]
public void SaveColumnsToDb(string data)
{
var a = data;
}
Console outputs:
str: (2) ['SerialNumber', 'MeasurementUnit']
JSON str: ["SerialNumber","MeasurementUnit"]
Whole function:
$("#popup-saveBtn").click(function () {
var columns = [];
var parentElement = document.getElementById("tableColumns");
var childElements = parentElement.querySelectorAll("input[type=checkbox]");
// If checkbox is checked, push value to array
for (i = 0; i < childElements.length; i++) {
if (childElements[i].checked) {
columns.push(childElements[i].value);
}
}
/*var strColumns = columns.join(";");*/
console.log("str: ", columns);
console.log("JSON str: ", JSON.stringify(columns));
// Send data to AjaxSelectController
$.ajax({
url: '#Url.Action("SaveColumnsToDb", "AjaxSelect", new { area = string.Empty })',
type: 'POST',
data: JSON.stringify(columns),
dataType: 'json',
contentType: 'application/json; charset=utf-8'
});
});
as a matter of fact, since you are using contentType: 'application/json; charset=utf-8', you are trying to send a json inside of the request body, so use this syntax
[HttpPost]
public void SaveColumnsToDb([FromBody] string[] data)
Changed the parameter name.
When we use an ajax request then we have to pass value in data and In the URL part, we have to give only the action name and controller name.
[HttpPost]
public void SaveColumnsToDb(string dataResponse)
{
var a = dataResponse;
}
$("#popup-saveBtn").click(function () {
var columns = [];
var parentElement = document.getElementById("tableColumns");
var childElements = parentElement.querySelectorAll("input[type=checkbox]");
// If checkbox is checked, push value to array
for (i = 0; i < childElements.length; i++) {
if (childElements[i].checked) {
columns.push(childElements[i].value);
}
}
/*var strColumns = columns.join(";");*/
console.log("str: ", columns);
console.log("JSON str: ", JSON.stringify(columns));
// Send data to AjaxSelectController
$.ajax({
url: '#Url.Action("SaveColumnsToDb", "AjaxSelect")',
type: 'POST',
data: { dataResponse: JSON.stringify(columns)},
dataType: 'json',
contentType: 'application/json; charset=utf-8'
});
});
I managed to make it work.
Changed data property in $.ajax().
data: JSON.stringify({ data: strColumns })
I am sending only csv string, e.g. "abc;abc;abc"
Controller is same.
Deserialization of a dynamic object that works fine in .NET Core 2.2, but does not work in .NET Core 3.1.
I'm using Newtonsoft.Json nuget package version v12.0.3. It's an ASP.NET Core MVC project.
public IActionResult Apply([FromBody]dynamic postData)
{
string serverPath = _hostingEnvironment.WebRootPath;
List<ModelData> list = new List<ModelData>();
foreach (var item in JsonConvert.DeserializeObject(postData))
{
list.Add(new ModelData
{
Key = item.Key,
Value = item.Value
});
}
}
I need help to fix it
Input data:
ValueKind = String : "[{'Key':'Table','Value':'admins'},{'Key':'MethodValue','Value':'Update'},{'Key':'Page','Value':'1'},{'Key':'Id','Value':'1'},{'Key':'ImgPath','Value':''},{'Key':'Id','Value':'1'},{'Key':'Login','Value':'admin'},{'Key':'Password','Value':'12345678999'}]"
It's what I see using debugger
ModelData output
public struct ModelData
{
public string Key { get; set; }
public string Value { get; set; }
}
Code from client page
function SendFormData(fileName) {
var jsonArr = "[{'Key':'Table','Value':'#ViewBag.Table'},{'Key':'MethodValue','Value':'#ViewBag.MethodValue'}," +
"{'Key':'Page','Value':'#ViewBag.Page'},{'Key':'Id','Value':'#ViewBag.Id'},";
jsonArr += "{'Key':'ImgPath','Value':'" + fileName + "'},";
var other_data = $("#ApplyForm").serializeArray();
$.each(other_data, function (_key, input) {
if (input.name === "Status") {
return true;
}
jsonArr += "{'Key':'" + input.name + "','Value':'" + input.value + "'},";
});
jsonArr = jsonArr.slice(0, -1);
jsonArr += "]";
$.ajax({
url: "/Admin/Apply",
type: "POST",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(jsonArr),
async: false,
success: function (returnUrl) {
AjaxLoad(returnUrl);
},
error: function () {
console.log("#Translations.UpsErrorMessage");
}
});
}
That seems client fail to send valid postData (no unique), and that is no need to stringify any string variable, except it is an array as following:
function SendFormData(fileName) {
var jsonArr = [{'Key':'Table',''Value':'#ViewBag.Table'},
{'Key':'MethodValue','Value':'#ViewBag.MethodValue'},
{'Key':'Page','Value':'#ViewBag.Page'},
{'Key':'ImgPath','Value':fileName}],
other_data = $("#ApplyForm").serializeArray();
$.each(other_data, function (_key, input) {
if (input.name === "Status") {
return true;
}
jsonArr.push({Key: input.name, Value: input.value});
});
$.ajax({
url: "/Admin/Apply",
type: "POST",
contentType: 'application/json; charset=utf-8',
data: {postData:JSON.stringify(jsonArr)},
async: false,
success: function (returnUrl) {
AjaxLoad(returnUrl);
},
error: function () {
console.log("#Translations.UpsErrorMessage");
}
});
}
I try to display image retrieved from db with some other object values as Json.
I learned that image object is not json serializable, so I changed byte[] to string in class, and pass it as image source.
Ajax POST response, should show image where I call its src src=\"'+photo+'"\"/> in JQuery. When I run the page, I receive Error 500 Internal Server Error in Browsers Console.
Class:
//other class values
public string Photo { get; set; }
[WebMethod]
public static string GetRooms(string arrival, string departure, string nob)
{
//db connection
SqlDataReader sdr = cmd.ExecuteReader(); ;
while (sdr.Read())
{
Room r = new Room();
//other values
b = (byte[])sdr["Photo"];
r.Photo = "data:image/jpg;base64," + Convert.ToBase64String(b).ToString();
lst.Add(r);
val = jSerialize.Serialize(lst);
}}
}
return val;
Ajax:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "main.aspx/GetRooms",
data: "{'arrival':'" + arrival + "','departure':'" + departure + "','nob':'" + nob + "'}",
dataType: "json",
success: function (response) {
r = jQuery.parseJSON(response.d),
$.each(r, function (k) {
var id = this.ID,
title = this.RoomTitle,
price = this.Price,
photo=this.Photo,
divItem.append($('<div />', { "class": "row" }).append($('<img src=\"'+photo+'"\"/>', { "class": "h-looks-s" })),
//other values appended
);
});
},
error: function (result) {
alert("Failed!");
}
Thanks for your help.
I have an observable array Object that which is generated like this:
self.SelectedVariable = ko.observableArray();
self.VarUpdate = function (data) {
$.getJSON("/api/Variable/" + ko.toJS(data.VarID), ko.toJS(data.VarID), function (Result) {
for (var i = 0; i < Result.length; i++) {
element = Result[i];
self.SelectedVariable({ VariableID: ko.observable(element.VariableID), VariableDateLastUpdated: ko.observable(element.VariableDateLastUpdated), VariableName: ko.observable(element.VariableName), VariableDescription: ko.observable(element.VariableDescription), VariableValue: ko.observable(element.VariableValue), VariableType: ko.observable(element.VariableType) });
};
});
When I try to pass the SelectedVariable object to my WebAPI method using this AJAX call
$.ajax({
url: "/api/Variable?Del=0",
data: { vardata: ko.toJS(self.SelectedVariable) },
type: "PUT",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
, all the related object shows null on all the fields.
I have tried almost every combination to get the SelectedVariable Object to parse correctly to my WebAPI method:
data: { vardata: ko.toJS(self.SelectedVariable) },
data: { vardata: ko.toJSON(self.SelectedVariable) },
data: { vardata: JSON.Stringify(self.SelectedVariable) },
data: { vardata: self.SelectedVariable },
and have tried to manually decrypt JSON object on WebAPI side using:
public void Put([FromUri] int Del, [FromBody]string vardata)
{
Variables vari = JsonConvert.DeserializeObject<Variables>(vardata);
var Item = (from c in TMIRE.Variables
where c.VariableID == vari.VariableID
select c).First();
if (Del == 0)
{
Item.VariableDateUpdated = DateTime.Now;
Item.VariableName = vari.VariableName;
Item.VariableDescription = vari.VariableDescription;
Item.VariableValue = vari.VariableValue;
Item.VariableType = vari.VariableType;
And It is still null value.
Any Advice would be greatly appreciated!
UPDATE
Changed my WebAPI method to reflect as follows:
public void Put([FromUri] int Del, IEnumerable<Variables> vardata)
{
var Item = (from c in TMIRE.Variables
where c.VariableID == vardata.Select(x => x.VariableID).First()
select c).First();
if (Del == 0)
{
Item.VariableDateUpdated = DateTime.Now;
vardata.Select(a => Item.VariableName = a.VariableName);
vardata.Select(b => Item.VariableDescription = b.VariableDescription);
vardata.Select(c => Item.VariableValue = c.VariableValue);
vardata.Select(d => Item.VariableType = d.VariableType);
}
and now the vardata object gets the value but all objects within are null
My Ajax method looks like this:
alert(ko.toJSON(self.SelectedVariable));
$.ajax({
url: "/api/Variable?Del=0",
contenttype: "application/x-www-form-urlencoded",
data: "=" + ko.toJSON(self.SelectedVariable()),
type: "PUT",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
The alert gives me this response
The Variables Class
public class Variables
{
public int VariableID { get; set; }
public DateTime VarialbeDateLastUpdated { get; set; }
public string VariableName { get; set; }
public string VariableDescription { get; set; }
public string VariableValue { get; set; }
public string VariableType { get; set; }
}
Working Code
By using this Ajax call
$.ajax({
url: "/api/Variable?Del=0",
contenttype: "application/x-www-form-urlencoded",
data: "=" + ko.toJSON(self.SelectedVariable),
type: "PUT",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
and then using Newtonsoft to deserialize the object on WebAPI using this method:
public void Put([FromUri] int Del, [FromBody]string vardata)
{
Variables vari = JsonConvert.DeserializeObject<Variables>(vardata.Substring(1, vardata.Length-2));
var Item = (from c in TMIRE.Variables
where c.VariableID == vari.VariableID
select c).First();
if (Del == 0)
{
Item.VariableDateUpdated = DateTime.Now;
Item.VariableName = vari.VariableName;
Item.VariableDescription = vari.VariableDescription;
Item.VariableValue = vari.VariableValue;
Item.VariableType = vari.VariableType;
}
else
{
Item.VariableDateUpdated = DateTime.Now;
Item.VariableActive = false;
}
TMIRE.SaveChanges();
}
I Got it to work
Try this...
public void Put([FromUri] int Del, IEnumerable<Variables> vardate){}
Since you're building a collection on the client self.SelectedVariable = ko.observableArray();, you will need the API to receive an IEnumerable.
In the Ajax call, I think it would be best to use:
data: { vardata: ko.toJSON(self.SelectedVariable) }
as this will give you a JSON representation of the collection.
Also, on the KO side, shouldn't you be pushing elements into the collection? self.SelectedVariable.push({...}); or you will end up with only the final result.
Change assignment to this:
self.SelectedVariable = ko.observableArray();
self.VarUpdate = function (data) {
$.getJSON("/api/Variable/" + ko.toJS(data.VarID), ko.toJS(data.VarID), function (Result) {
var selection = self.SelectedVariable;
for (var i = 0; i < Result.length; i++) {
var element = Result[i];
selection.push(element);
};
});
Then, Change the ajax method to convert to json:
$.ajax({
url: "/api/Variable?Del=0",
content-type: "application/x-www-form-urlencoded",
data: "=" + JSON.stringify(ko.toJSON(self.SelectedVariable)),
type: "PUT",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
Also try removing [FromBody].
public void Put([FromUri] int Del, IEnumerable<Variables> vardata)
{
...
}
It looks like making the serialized objects in vardata as ko.observable objects is confusing mvc serialization for the parameters.
different data assignments to attempt:
data: "=" + JSON.stringify(ko.toJSON(self.SelectedVariable))
data: "=" + JSON.stringify(self.SelectedVariable())
data: "=" + self.SelectedVariable()
data: "=" + $.parseJSON(ko.toJSON(self.SelectedVariable))
What you're passing self.SelectedVariable isn't an array. Should you not be calling it just an observable? Otherwise, you need to be adding your results with self.SelectedVariable.push(resultObject).
By using this Ajax call
$.ajax({
url: "/api/Variable?Del=0",
contenttype: "application/x-www-form-urlencoded",
data: "=" + ko.toJSON(self.SelectedVariable),
type: "PUT",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
and then using Newtonsoft to deserialize the object on WebAPI using this method:
public void Put([FromUri] int Del, [FromBody]string vardata)
{
Variables vari = JsonConvert.DeserializeObject<Variables>(vardata.Substring(1, vardata.Length-2));
var Item = (from c in TMIRE.Variables
where c.VariableID == vari.VariableID
select c).First();
if (Del == 0)
{
Item.VariableDateUpdated = DateTime.Now;
Item.VariableName = vari.VariableName;
Item.VariableDescription = vari.VariableDescription;
Item.VariableValue = vari.VariableValue;
Item.VariableType = vari.VariableType;
}
else
{
Item.VariableDateUpdated = DateTime.Now;
Item.VariableActive = false;
}
TMIRE.SaveChanges();
}
I have a simple web service with one argument :
public static string LoadComboNews(string id)
{
string strJSON = "";
DataRowCollection people = Util.SelectData("Select * from News where person = "+ id +" Order by NewsId desc ");
if (people != null && people.Count > 0)
{
//temp = new MyTable[people.Count];
string[][] jagArray = new string[people.Count][];
for (int i = 0; i < people.Count; i++)
{
jagArray[i] = new string[] { people[i]["NewsID"].ToString(), people[i]["Title"].ToString() };
}
JavaScriptSerializer js = new JavaScriptSerializer();
strJSON = js.Serialize(jagArray);
}
return strJSON;
}
on javascript I am trying to call it with parameter :
jQuery.ajax({
type: "POST",
url: "webcenter.aspx/LoadComboNews",
data: "{'id':usrid}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
combonews = eval(msg.d);
}
});
UPDATE:
usrid is dynamic
Am I doing something wrong here?
data you are sending is invalid "{'id':usrid}"
this not a valid json
probably what you wanna do is assuming usrid is a variable
"{\"id\":"+usrid+"}"
with it shoudnt you be executing this command
Select * from News where person = '"+ id +"' Order by NewsId desc
Considering id is a string
also try this
combonews = JSON.stringify(msg);
Add WebMethod to the method
[WebMethod]
public static string LoadComboNews(string id)
And try this format
$.ajax({
type: "POST",
url: "webcenter.aspx/LoadComboNews",
data: '{"id":"usrid"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
alert(msg.d);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
alert(textStatus + " " + errorThrown);
}
});
Or
data: '{"id":"' + usrid + '"}',