ASP向JavaScript传递两个数组失败，看板列表仅加载一个列表求助

问题根源 #

1. 后端仅返回单个列表：你的GetEvents方法只序列化并返回了待办任务列表（tasks），完全忽略了进行中任务列表（Otasks）。
2. 前端引用未定义变量：代码中var OpT = JSON.parse(Otasks.d);的Otasks变量从未被声明或赋值，导致运行时错误，这就是移除该语句后功能能运行但无法加载第二个列表的原因。
3. AJAX参数错误：tasks: "{}"不是正确的AJAX数据参数格式，应该使用data: "{}"。

修正步骤 #

1. 后端代码调整

首先创建一个包装类，用于同时传递两个任务列表（注意：Task和Ongo结构完全一致，可直接复用Task类减少冗余）：

public class Task
{
    public string title, description, dueDate;
}

// 新增包装类，用于同时返回两个任务列表
public class TaskResponse
{
    public List<Task> TodoTasks { get; set; }
    public List<Task> OngoingTasks { get; set; }
}

[WebMethod]
public static string GetEvents()
{
    var todoTasks = new List<Task>();
    var ongoingTasks = new List<Task>();
    String sqlconn = System.Configuration.ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    
    using (SqlConnection con = new SqlConnection(sqlconn))
    {
        // 查询待办任务（opnd=1）
        using (SqlCommand SqC = new SqlCommand("Select titl,dscr, due FROM KNtsk WHERE opnd = 1 Order by due", con))
        {
            con.Open();
            using (SqlDataReader sdr = SqC.ExecuteReader())
            {
                while (sdr.Read())
                {
                    todoTasks.Add(new Task()
                    {
                        dueDate = DateTime.Parse(sdr["due"].ToString()).ToString("d"),
                        title = sdr["titl"].ToString(),
                        description = sdr["dscr"].ToString()
                    });
                }
            }
            con.Close();
        }
        
        // 查询进行中任务（opnd=0）
        using (SqlCommand SqC = new SqlCommand("Select titl,dscr, due FROM KNtsk WHERE opnd = 0 Order by due", con))
        {
            con.Open();
            using (SqlDataReader sdr = SqC.ExecuteReader())
            {
                while (sdr.Read())
                {
                    ongoingTasks.Add(new Task()
                    {
                        dueDate = DateTime.Parse(sdr["due"].ToString()).ToString("d"),
                        title = sdr["titl"].ToString(),
                        description = sdr["dscr"].ToString()
                    });
                }
            }
            con.Close();
        }
        
        // 序列化包装类对象，同时返回两个列表
        var stz = new JavaScriptSerializer();
        return stz.Serialize(new TaskResponse
        {
            TodoTasks = todoTasks,
            OngoingTasks = ongoingTasks
        });
    }
}

2. 前端代码调整

修正AJAX参数和响应处理逻辑，确保正确获取两个列表的数据：

<script>
document.addEventListener('DOMContentLoaded', function () {
    $.ajax({
        type: "POST",
        url: "index.aspx/GetEvents",
        data: "{}", // 修正为正确的data参数格式
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function (response) {
        // 解析一次即可获取包含两个列表的完整数据
        var taskData = JSON.parse(response.d);
        
        $('#todo-lists-basic-demo').lobiList({
            lists: [
                {
                    id: 'todo',
                    title: 'TODO',
                    defaultStyle: 'lobilist-info',
                    items: taskData.TodoTasks,
                },
                {
                    id: 'doing',
                    title: 'DOING',
                    defaultStyle: 'lobilist-default',
                    items: taskData.OngoingTasks,
                },
            ]
        });
    }).fail(function(xhr, status, error) {
        // 可选：添加错误处理方便调试
        console.error("请求失败:", error);
    });
});
</script>

关键说明 #

• 复用Task类：避免重复定义结构完全一致的类，简化代码维护。
• 包装类传递多数据：通过TaskResponse将两个列表打包返回，确保前端能同时获取所有所需数据。
• 修正AJAX参数：符合jQuery AJAX的参数规范，避免请求异常。
• 单次JSON解析：后端返回的是包含两个列表的JSON字符串，前端只需解析一次即可获取所有数据，避免无效操作和变量错误。

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