javascriptasp.net.netwebformsasp.net-ajax

I am trying to send array of objects from front-end javascript to my method in asp.net web forms. Error: https://localhost:44396/Input.aspx/UpdateData


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); 
  }

Solution

  • 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)); } });