如何在C#中获取jQuery DataTable内容并保存至SQL Server？

前端修改步骤 #

1. 正确提取表格数据 #

根据你的单元格编辑方式，选择对应的提取逻辑：

• 如果用DataTables Editor组件：直接将API数据转为普通数组

  var tableData = table.rows().data().toArray();
  

• 如果是自定义单元格编辑（直接修改TD内容）：手动遍历行和列获取最新值

  var tableData = [];
  table.rows().every(function() {
      // 获取当前行的所有单元格
      var cells = $(this.node()).find('td');
      // 根据你的表格列结构，构造数据对象（示例：ID、项目名、排名）
      var rowData = {
          ProjectId: cells.eq(0).text().trim(),
          ProjectName: cells.eq(1).text().trim(),
          Rank: parseInt(cells.eq(2).text().trim())
      };
      tableData.push(rowData);
  });
  

2. 修正AJAX请求 #

原代码的data: {table}是错误的，需要将数据序列化为JSON字符串，且参数名要与后端方法匹配：

{
    text: 'Save',
    action: function ( e, dt, node, config ) {
        // 先按上面的方式获取tableData
        var tableData = [];
        table.rows().every(function() {
            var cells = $(this.node()).find('td');
            var rowData = {
                ProjectId: cells.eq(0).text().trim(),
                ProjectName: cells.eq(1).text().trim(),
                Rank: parseInt(cells.eq(2).text().trim())
            };
            tableData.push(rowData);
        });

        $.ajax({
            type: "POST",
            url: 'Ranking.aspx/SaveRanks',
            // 序列化数据，参数名ranks要和后端方法的参数名一致
            data: JSON.stringify({ ranks: tableData }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                window.location.reload();
            },
            error: function (e){
                console.log(e); // 注意console是小写，原代码的Console会报错
            }
        });
    }
}

后端修改步骤 #

1. 定义数据实体类 #

在Ranking.aspx.cs中创建与前端数据结构匹配的类：

public class ProjectRank
{
    public int ProjectId { get; set; }
    public string ProjectName { get; set; }
    public int Rank { get; set; }
    // 字段需与前端rowData的键完全对应
}

2. 编写WebMethod #

添加[WebMethod]标记的静态方法，接收前端传递的数据并写入SQL Server：

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

public partial class Ranking : System.Web.UI.Page
{
    [WebMethod]
    public static void SaveRanks(List<ProjectRank> ranks)
    {
        // 从配置文件读取数据库连接字符串
        string connStr = ConfigurationManager.ConnectionStrings["YourDbConnString"].ConnectionString;
        
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            conn.Open();
            // 批量更新/插入数据（示例为更新排名）
            foreach (var item in ranks)
            {
                string sql = "UPDATE VoteProjects SET Rank = @Rank WHERE ProjectId = @ProjectId";
                using (SqlCommand cmd = new SqlCommand(sql, conn))
                {
                    cmd.Parameters.AddWithValue("@ProjectId", item.ProjectId);
                    cmd.Parameters.AddWithValue("@Rank", item.Rank);
                    cmd.ExecuteNonQuery();
                }
            }
            conn.Close();
        }
    }
}

3. 启用页面方法（WebForms必填） #

确保页面中存在ScriptManager并开启EnablePageMethods：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>

错误原因说明 #

你遇到的"Cannot read properties of undefined (reading 'type')"错误，是因为直接传递了DataTables的API对象table给AJAX的data参数。该对象无法被JSON序列化，jQuery在处理数据时尝试读取其内部属性失败，导致报错。通过将数据转为普通JS对象数组并序列化后，即可正常传递到后端。

内容的提问来源于stack exchange，提问作者Eray Balkanli