如何用JavaScript填充ASP.NET后台Ti/De/Dd数组实现SQL批量插入？

步骤1：修改前端JS代码，收集页面数据并提交到后台 #

完善JavaScript代码，从页面元素提取数据并通过AJAX传递到后台方法：

<script>
$(document).ready(function () {
    // 绑定提交按钮点击事件（替换为你的按钮实际ID）
    $("#KbUp").click(function(e) {
        e.preventDefault(); // 阻止默认表单跳转

        // 获取任务元素集合并转为数组
        const titleElems = Array.from(document.getElementById("todo").getElementsByClassName("lobilist-item-title"));
        const descElems = Array.from(document.getElementById("todo").getElementsByClassName("lobilist-item-description"));
        const dateElems = Array.from(document.getElementById("todo").getElementsByClassName("lobilist-item-duedate"));

        // 提取文本内容存入对应数组
        const Ti = titleElems.map(item => item.textContent.trim());
        const De = descElems.map(item => item.textContent.trim());
        const Dd = dateElems.map(item => item.textContent.trim());

        // 验证数据完整性：三个数组长度必须一致
        if (Ti.length !== De.length || Ti.length !== Dd.length) {
            alert("任务数据不完整，请检查每个任务的标题、描述和日期是否齐全");
            return;
        }

        // AJAX提交数据到后台
        $.ajax({
            type: "POST",
            url: window.location.pathname + "/KbUp",
            data: { Ti: Ti, De: De, Dd: Dd },
            traditional: true, // 确保数组参数正确传递
            success: function() {
                window.location.reload(); // 提交成功后刷新页面
            },
            error: function(xhr, status, err) {
                alert("数据提交失败：" + err);
            }
        });
    });
});   
</script>

步骤2：修改ASP.NET后台代码，接收参数并执行批量插入 #

将原后台方法改为静态WebMethod以支持AJAX调用，替换硬编码数组为前端传递的参数：

using System;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;

public partial class YourPageName : System.Web.UI.Page
{
    [WebMethod]
    public static void KbUp(string[] Ti, string[] De, string[] Dd)
    {
        string sqlStatement = "INSERT INTO [KNtsk] (titl, dscr, due, opnd) VALUES (@titl, @dscr, @due, @opnd)";
        string connStr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

        using (SqlConnection con = new SqlConnection(connStr))
        {
            using (SqlCommand cmd = new SqlCommand(sqlStatement, con))
            {
                // 预先定义参数模板，提升循环插入效率
                cmd.Parameters.Add("@titl", System.Data.SqlDbType.NVarChar);
                cmd.Parameters.Add("@dscr", System.Data.SqlDbType.NVarChar);
                cmd.Parameters.Add("@due", System.Data.SqlDbType.Date);
                cmd.Parameters.Add("@opnd", System.Data.SqlDbType.Int).Value = 1;

                con.Open();
                for (int i = 0; i < Ti.Length; i++)
                {
                    // 更新参数值，无需重复创建参数
                    cmd.Parameters["@titl"].Value = Ti[i];
                    cmd.Parameters["@dscr"].Value = De[i];
                    cmd.Parameters["@due"].Value = DateTime.Parse(Dd[i]); // 确保前端日期格式为yyyy-MM-dd

                    cmd.ExecuteNonQuery();
                }
            }
        }
    }
}

关键注意事项 #

• 元素匹配：确保每个任务都对应有lobilist-item-title、lobilist-item-description、lobilist-item-duedate类的元素，避免数据缺失。
• 日期格式：前端提取的日期文本需为yyyy-MM-dd格式，否则后台会抛出解析异常。
• 异常处理：建议在后台添加try-catch块捕获数据库操作异常，避免程序崩溃；前端可增加空值检查（如标题不能为空）。
• WebMethod配置：后台方法必须标记为static并添加[WebMethod]特性，否则AJAX无法调用。

内容的提问来源于stack exchange，提问作者Abd El-Rahman Sayed