I have three inputs, app name, from date and to date. I add those into a table which creates array of objects. Then try to send this array using ajax to the method in aspx.cs file in web forms. But I get the error.
Javascript Code:
document.addEventListener("DOMContentLoaded", function()
{
console.log("DOMContentLoaded event fired");
var updateBtnClick = document.getElementById("<%= updateBtn.ClientID %>");
//"ContentPlaceHolder1_updateBtn"
if (updateBtnClick)
{
console.log("Update button element found");
updateBtnClick.addEventListener('click', function(e)
{
e.preventDefault();
console.log("Update button is clicked");
var jsonData = JSON.stringify(tableData);
console.log(jsonData);
$.ajax(
{ url : "Input.aspx/UpdateData"
, type : "POST"
, data : jsonData
, contentType : "application/json"
, success : function(response)
{
console.log("Data sent to the backend successfully");
}
, error : function(error)
{
console.error("Error sending data to the backend: "+JSON.stringify(error));
}
});
});
}
else
{
console.log("Update button element not found");
}
});
aspx.cs:
[WebMethod] public static string UpdateData(List<Downtime> jsonData)
{
if (jsonData != null && jsonData.Count > 0)
{
string connectionString = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
using (SqlConnection conn = new SqlConnection(connectionString))
{
conn.Open();
foreach (var item in jsonData)
{
string dropdownValue = item.App_name;
DateTime fromDate = item.From_date;
DateTime toDate = item.To_date;
string sqlQuery = "UPDATE DowntimeApplications SET From_date = @FromDate, To_date = @ToDate where App_name = @name";
using (SqlCommand command = new SqlCommand(sqlQuery, conn))
{
command.Parameters.AddWithValue("@FromDate", fromDate);
command.Parameters.AddWithValue("@ToDate", toDate);
command.Parameters.AddWithValue("@name", dropdownValue);
command.ExecuteNonQuery();
}
}
HttpContext.Current.Response.ContentType = "application/json";
var response = new { success = true, message = "Data updated successfully" };
return JsonConvert.SerializeObject(response);
}
}
var noDataResponse = new { success = false, message = "No data to update" };
HttpContext.Current.Response.ContentType = "application/json";
return JsonConvert.SerializeObject(noDataResponse);
}
I was manually serializing the data to JSON. I passed tableData directly in my AJAX call.
$.ajax({ url: "Input.aspx/UpdateData", type: "POST", /*data: payload,*/ data: JSON.stringify({ jsonData: tableData }), contentType: "application/json", success: function (response) { console.log("Data sent to the backend successfully"); }, error: function (error) { console.error("Error sending data to the backend: " + JSON.stringify(error)); } });