¿Cuál es la mejor manera de administrar el orden de clasificación de los elementos de la lista con la interfaz de usuario de arrastrar y soltar?

Tengo una lista de estudiantes que debo mostrar al usuario en una página web en formato tabular.
Los elementos se almacenan en la base de datos junto con la información de Ordenar.

En la página web, el usuario puede reorganizar el orden de la lista arrastrando y soltando los elementos en el orden de clasificación deseado, similar a esta publicación .

A continuación se muestra una captura de pantalla de mi página de prueba.

En el ejemplo anterior, cada fila tiene información de orden de clasificación adjunta. Cuando coloco a John Doe (Id. De estudiante 10) sobre la fila Id. De estudiante 1, el orden de la lista ahora debe ser: 2, 10, 1, 8, 11.

¿Cuál es la forma optimista (que consume menos recursos) de almacenar y actualizar la información del orden de clasificación?

Mi única idea por ahora es que, para cada cambio en el orden de clasificación de la lista, se debe actualizar el valor SortOrder de cada objeto, lo que en mi opinión consume muchos recursos.

Solo para tu información: podría tener como máximo 25 filas en mi tabla.

Se me ocurrió algo que puede reducir sus consultas. Aquí, en mi ejemplo, he agregado una nueva columnpara ordenar llamada pos. Entonces, inicialmente sin arrastrar tu tabla será como:

Ahora, consideremos que arrastraste Item 4entre Item 1& Item 2. Ahora, será un nuevo posvalor para , que es . Por lo tanto, solo necesitará actualizar una sola fila en la base de datos. Y obtendrás ...Item 4(20 + 10) / 215

Aquí hay un diagrama de flujo con los casos extremos. ies el nuevo índice de matriz de su fila después de arrastrarlo -

Este diagrama de flujo no maneja ArrayOutOfBoundcheques. Y, para casos extremos, necesitará más de una consulta.

Como solo tiene 25 filas, puede tomar un valor muy grande (p 10,000. Ej. ) Para la diferencia de posición (tomé 10para este ejemplo). Cuanto mayor sea el valor, menos chocará.

Personalmente, devolvería una matriz JSON para los datos del back-end. Luego usaría JavaScript (JQuery o knockout) para mostrar y ordenar y volver a ordenar los datos. De esa manera, la ordenación tiene carga cero en el servidor.

Está buscando una manera amigable con los recursos para manejar esto, pero también es imprescindible una perspectiva amigable para el usuario. Recomiendo solicitudes individuales después de cada artículo reordenado. Cada llamada le permite verificar si fue aceptada o fallida.

• Las respuestas fallidas restablecerán la vista y mostrarán un mensaje al usuario final.
• Las solicitudes aceptadas simples permiten la edición continua.

Alternativamente, usar un objeto JSON (@ tom-squires) es una buena idea para reducir la sobrecarga de HTTP y el procesamiento del lado del servidor, pero finalmente requiere más código para manejar las solicitudes en el lado del servidor y del cliente. Si eso está bien, pasar el objeto al servidor es técnicamente más eficiente. También permite un retraso de un par de segundos para permitir múltiples pedidos antes de una sola solicitud, si lo desea.

Tenga en cuenta que, para proporcionar al usuario un comentario de las solicitudes fallidas, deberá analizar un objeto JSON de respuesta del servidor para averiguar qué elemento falló y restablecer la IU en función de eso.

Algo así en el controlador de eventos drop, donde e es el evento DnD.

        ....
        if (e.Action == DragAction.Drop)
        {
            foreach(var item in Items)
            {
                if (e.NewIndex == e.OldIndex) // Dropped in same place
                    return;
                if(e.OldIndex > e.NewIndex) // Moved Up
                {
                    if (item.SortOrder >= e.NewIndex && item.SortOrder < e.OldIndex)
                    {
                        item.SortOrder ++;
                    }
                }
                else // Moved Down
                {
                    if (item.SortOrder> e.OldIndex && item.SortOrder < e.NewIndex) 
                    {
                        item.SortOrder --;
                    }
                }   
            }
            ((Student)e.ItemData).SortOrder = e.NewIndex;
        }
    ...