前端JS向ASP.NET Web Forms传递对象数组报错求助

我有应用名称、开始日期、结束日期三个输入项，将这些数据添加到表格后生成对象数组，尝试通过AJAX把该数组发送至ASP.NET Web Forms后台Input.aspx.cs的UpdateData方法，但请求失败，错误地址为https://localhost:44396/Input.aspx/UpdateData。

JavaScript 代码 #

document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM加载完成事件触发");
    var updateBtnClick = document.getElementById("<%= updateBtn.ClientID %>");
    // 实际ID可能是"ContentPlaceHolder1_updateBtn"
    if (updateBtnClick) {
        console.log("找到更新按钮元素");
        updateBtnClick.addEventListener('click', function(e) {
            e.preventDefault();
            console.log("更新按钮被点击");
            // 注意：需将数据包裹为与后台参数名对应的结构
            var jsonData = JSON.stringify({ jsonData: tableData });
            console.log(jsonData);
            $.ajax({
                url: "Input.aspx/UpdateData",
                type: "POST",
                data: jsonData,
                contentType: "application/json",
                success: function(response) {
                    console.log("数据成功发送至后台");
                },
                error: function(error) {
                    console.error("发送数据至后台出错: " + JSON.stringify(error));
                }
            });
        });
    } else {
        console.log("未找到更新按钮元素");
    }
});

ASPX.CS 后台代码 #

// 确保Downtime类是公共类，且属性有get/set方法
// public class Downtime 
// {
//     public string App_name { get; set; }
//     public DateTime From_date { get; set; }
//     public DateTime To_date { get; set; }
// }

[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 = "数据更新成功" };
            return JsonConvert.SerializeObject(response);
        }
    }
    var noDataResponse = new { success = false, message = "无数据可更新" };
    HttpContext.Current.Response.ContentType = "application/json";
    return JsonConvert.SerializeObject(noDataResponse);
}

关键修复点 #

• AJAX数据格式：后台方法参数名为jsonData，必须将数组包裹为{ "jsonData": tableData }后再序列化，原代码直接序列化数组会导致后台无法绑定参数
• Downtime类定义：需确保Downtime是公共类，且属性与前端对象的键名、类型完全匹配，否则会出现序列化失败
• 连接字符串验证：确认Web.config中MyConnectionString的配置正确，避免数据库连接错误

内容的提问来源于stack exchange，提问作者Ashley Ferns