我正在尝试将对象数组从前端 javascript 发送到我在 Web 表单中的方法 asp.net。错误:https://localhost:44396/Input.aspx/UpdateData

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

提问人:Ashley Ferns 提问时间:11/7/2023 最后编辑:Mister JojoAshley Ferns 更新时间:11/7/2023 访问量:32

问:

我有三个输入,应用程序名称,从日期到日期。我将它们添加到一个创建对象数组的表中。然后尝试使用 ajax 将此数组发送到 Web 窗体的 aspx.cs 文件中的方法。但是我得到了错误。

Javascript代码:

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); 
  }
JavaScript asp.net WebForms ASP.NET-AJAX

评论


答:

0赞 Sekhar 11/7/2023 #1
[WebMethod] public static string UpdateData(List<Downtime> jsonData)

webmethod 参数名为 ,因此您需要使用此键传递对象。jsonData

以下代码应该可以工作:

        var jsonData = {};//jsonData matches the parameter name of the webmethod
        jsonData["jsonData"] = tableData; 

        var payload = JSON.stringify(jsonData);

        $.ajax(
            {
                url: "Input.aspx/UpdateData"
                , type: "POST"
                , data: payload
                , 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));
                }
            });

评论

0赞 Ashley Ferns 11/7/2023
我仍然收到同样的错误。
0赞 Sekhar 11/7/2023
是否已将变量名称更改为有效负载?发布错误消息
0赞 Ashley Ferns 11/7/2023
是的,我做到了。数据不会发送,但可以在控制台中看到。我不知道为什么。
0赞 Sekhar 11/7/2023
您能否在控制台中发布您到底看到了什么?
0赞 Ashley Ferns 11/7/2023
解决了错误。
0赞 Ashley Ferns 11/7/2023 #2

我正在手动将数据序列化为 JSON。 我直接在AJAX调用中传递了tableData。

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