使用 Jquery 拖放时自动保存数据，无需按下按钮答案

【问题标题】：Automatically save data when using Jquery drag & drop without a button press使用 Jquery 拖放时自动保存数据，无需按下按钮
【发布时间】：2019-09-24 14:54:18
【问题描述】：

嗨，我一直在谷歌上搜索我的问题的答案，但我似乎无法得到正确的答案，所以在这里我希望你们可爱的一群人能帮助我。

我在 asp.net 中有一个 gridview，我使用 jquery 设法使网格可拖放，因为您可以通过 D&D 功能对行重新排序。目前我有一个更新按钮，允许用户将订单保存在数据库中（通过背后的服务器端代码确实很重要 VB，C）。这一切都很好，但是如果在删除行时它会调用一个服务器端例程来保存行顺序（所有行）而不是让用户按下按钮，那会更好。

我已经尝试了很多东西，我的一个例子是一个 ajax 调用，但是我无法让其中任何一个工作，有没有人知道我如何在不按按钮的情况下通过拖放直接对数据库进行更改。

我原来的拖放 gridview Jquery

$x(function () {
           $x("[id*=gv]").sortable({
                items: 'tr:not(tr:first-child)',
                cursor: 'pointer',
                axis: 'y',
                dropOnEmpty: false,
                start: function (e, ui) {
                    ui.item.addClass("selected");
                },
                stop: function (e, ui) {
                    ui.item.removeClass("selected");
                },
                receive: function (e, ui) {
                    $x(this).find("tbody").append(ui.item);
                }
            });
        });

然后我想我可以通过停止功能捕捉到发生了什么变化，然后添加

$x(function () {
               $x("[id*=gv]").sortable({
                    items: 'tr:not(tr:first-child)',
                    cursor: 'pointer',
                    axis: 'y',
                    dropOnEmpty: false,
                    start: function (e, ui) {
                        ui.item.addClass("selected");
                    },
                    stop: function (e, ui) {
                        ui.item.removeClass("selected");
                    var code = ui.item.attr("ID");
                    var pos = ui.item.index();
                    var options = {
                        type: "POST",
                        url: "mywebform.aspx/MyMethod",
                        data: JSON.stringify({
                            ID: code,
                            POS: pos
                        }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {

                        }
                    };
                    $x.ajax(options);
                    },
                    receive: function (e, ui) {
                        $x(this).find("tbody").append(ui.item);
                    }
                });
            });

然后在后面的代码中创建一个 webmethod 函数（请注意这是在 vb.net 中，由于限制，如果答案在 c# 中我很好）

<System.Web.Script.Services.ScriptMethod()>
<System.Web.Services.WebMethod>
Public Shared Function MyMethod(ByVal ID As String, ByVal POS As Integer) As String
    Dim a = ID & ", " & POS
    Return ""
End Function

现在理想情况下，我将让这个函数获取数据并将其保存到我们的数据库中，但我的主要目标是在调试时触发它，因此该函数实际上没有做任何事情。

【问题讨论】：

标签： javascript jquery asp.net ajax

【解决方案1】：

似乎有一个名为sortupdate 的事件在列表更新后触发。你应该可以把你的函数放在那里，然后它就会触发。

查看此答案以帮助您入门：

Call event after sorting in JQuery

【讨论】：