.NET MVC(ADO)应用如何将jQuery可排序表格排序值提交到SQL数据库

核心逻辑：拖拽排序完成后收集每行的主键ID与最新排序值，通过AJAX POST提交到后端，后端用ADO.NET执行更新语句写入数据库即可。

1. 前端改造 #

1.1 给表格行添加主键标识 #

修改视图中渲染行的代码，在<tr>标签上增加data-autoid属性存储记录主键，方便后续关联数据库记录：

<tbody>
    @if (ViewBag.data != null)
    {
        foreach (var item in ViewBag.data)
        {
            <!-- 新增data-autoid属性存储主键 -->
            <tr data-autoid="@item.AutoID">
                <td>@item.AutoID</td>
                <td>@item.Text<br></td>
                <td>@item.Active</td>                                      
                <td>@item.OrderBy</td>
            </tr>
        }
    }
</tbody>
<!-- 新增保存按钮 -->
<button type="button" id="btnSaveOrder" class="btn btn-primary">保存排序</button>

1.2 修改拖拽初始化脚本，增加数据收集与提交逻辑 #

在原有sortable配置基础上，增加保存按钮的点击事件，遍历行收集排序数据后提交到后端：

<script type="text/javascript">
$(function () {
    $("#tblLookup1 tbody").sortable({
        items: 'tr',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            $("#tblLookup1 tbody tr").each((idx, tr) => {
                $("td:nth-child(4)", tr).text(idx+1);
            });
            ui.item.removeClass("selected");
        },
        receive: function (e, ui) {
            $(this).find("tbody").append(ui.item);
        }
    });

    // 保存排序提交逻辑
    $("#btnSaveOrder").click(function(){
        const sortData = [];
        // 遍历所有行，组装ID和对应排序值
        $("#tblLookup1 tbody tr").each(function(index, tr){
            sortData.push({
                AutoID: Number($(tr).data("autoid")),
                OrderBy: index + 1
            });
        });

        // POST提交到后端接口
        $.ajax({
            url: '/对应控制器名/SaveSortOrder',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(sortData),
            success: function(res){
                if(res.success){
                    alert("排序保存成功");
                    location.reload();
                }else{
                    alert("保存失败：" + res.msg);
                }
            },
            error: function(){
                alert("网络请求异常，请重试");
            }
        });
    });
});
</script>

如果需要拖拽完成后自动保存，把收集数据、提交的逻辑直接放到stop回调里即可，不需要单独加保存按钮。

2. 后端接口实现 #

在对应控制器中添加POST接口，接收前端提交的排序数据，通过ADO.NET写入数据库：

// 定义排序数据接收实体
public class SortItem
{
    public int AutoID { get; set; }
    public int OrderBy { get; set; }
}

[HttpPost]
public ActionResult SaveSortOrder(List<SortItem> sortData)
{
    try
    {
        // 从配置文件读取数据库连接字符串
        string connStr = System.Configuration.ConfigurationManager
            .ConnectionStrings["你的数据库连接字符串配置名"].ConnectionString;
        
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            conn.Open();
            // 遍历执行更新语句
            foreach (var item in sortData)
            {
                string updateSql = "UPDATE 你的业务表名 SET OrderBy = @OrderBy WHERE AutoID = @AutoID";
                using (SqlCommand cmd = new SqlCommand(updateSql, conn))
                {
                    cmd.Parameters.AddWithValue("@OrderBy", item.OrderBy);
                    cmd.Parameters.AddWithValue("@AutoID", item.AutoID);
                    cmd.ExecuteNonQuery();
                }
            }
        }
        return Json(new { success = true, msg = "保存成功" });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, msg = ex.Message });
    }
}

注意事项 #

• 如果表格数据量较大，不建议逐条执行UPDATE语句，可以改用SqlBulkCopy将排序数据导入临时表，再通过关联UPDATE做批量更新，性能提升明显
• 如果项目开启了防伪造令牌验证，需要在AJAX请求中携带__RequestVerificationToken请求头，同时给接口方法加[ValidateAntiForgeryToken]特性
• 注意接口权限控制，避免未授权用户修改排序数据

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