Как сохранить порядок строк .NET Gridview в базу данных после переупорядочения с использованием сортировки JQuery

Question

У меня есть таблица базы данных, которая содержит два поля: ColumnName и SortOrder.

Я использую gridview для отображения поля ColumnName на странице веб-приложения C# .NET.

Я хотел бы, чтобы пользователь мог изменить порядок строк, перетаскивая строки сетки и затем сохраняя этот новый порядок в базе данных, вставив новый номер строки в поле SortOrder в таблице DB.

Мне удалось использовать функцию перетаскивания, используя JQueryUI Sortable. Но я изо всех сил пытаюсь получить новый порядок рядов на стороне сервера, чтобы я мог получить его в базе данных.

Gridview Код

<asp:GridView ID="GV_ColumnNames" runat="server" CssClass="sortable"> 
    <Columns> 
     <asp:BoundField DataField="ColumnName" HeaderText="ColumnName" SortExpression="ColumnName" /> 
    </Columns> 
</asp:GridView> 

JQuery

$(function() { 

     $(".sortable").sortable({ 
      items: "tr:not(tr:first-child)", 
      axis: "y" 
     }).disableSelection(); 

    }); 

В качестве теста, чтобы увидеть, если я могу получить новый клиентской стороне заказа строки я написал C# код ниже, но это просто выводит оригинальный ряд порядок.

protected void BTN_Confirm_Click(object sender, EventArgs e) 
    { 
     string orderTest = ""; 

     foreach(GridViewRow row in GV_FlatFileColumnSetting.Rows) 
     { 
      orderTest += row.Cells[0].Text; 
     } 

     Response.Write(orderTest); 

    } 

Кто-нибудь есть какие-либо идеи относительно того, как я могу получить заказ строки со стороны клиента на стороне сервера, так что я могу выполнить команду SQL, чтобы вставить новый порядок в БД?

Любая помощь очень ценится.

Answer 1

jquery сортируется как событие обновления, которое запускается каждый раз, когда вы удаляете элемент. Он также имеет метод toArray, который возвращает массив идентификаторов элементов в том порядке, в котором они в настоящее время отображаются. С помощью AJAX вы можете сделать что-то подобное, чтобы вызвать код на стороне сервера. Это передает массив идентификаторов как строку json, которая должна быть расшифрована на стороне сервера.

$(function() { 
 
    $(".sortable").sortable({ 
 
    items: "tr:not(tr:first-child)", 
 
    axis: "y", 
 
    update: function(event, ui) { 
 
     var sortedIDs = $(event.target).sortableGrid("toArray"); 
 
     $.ajax({ 
 
     url: your url, 
 
     data: JSON.stringify(sortedIDs) 
 
     }); 
 
    } 
 
    }).disableSelection(); 
 
});

К сожалению, я не знаю, .NET, так что я не могу помочь вам на стороне сервера, но надеюсь, что это помогает.