Cách tốt nhất để quản lý thứ tự sắp xếp danh sách với UI Kéo và Thả là gì?

Tôi có một danh sách Sinh viên mà tôi sẽ hiển thị cho người dùng trên một trang web ở định dạng bảng.
Các mục được lưu trữ trong DB cùng với thông tin Sắp xếp.

Trên trang web, người dùng có thể sắp xếp lại thứ tự danh sách bằng cách kéo và thả các mục vào thứ tự sắp xếp mong muốn của họ, tương tự như bài đăng này .

Dưới đây là một ảnh chụp màn hình trang thử nghiệm của tôi.

Trong ví dụ trên, mỗi hàng có thông tin thứ tự sắp xếp kèm theo nó. Khi tôi thả John Doe (Id sinh viên 10) lên trên hàng Id sinh viên 1, thứ tự danh sách sẽ là: 2, 10, 1, 8, 11.

Cách lạc quan (ít đói tài nguyên) để lưu trữ và cập nhật thông tin Sắp xếp thứ tự là gì?

Ý tưởng duy nhất của tôi bây giờ là, đối với mọi thay đổi trong thứ tự sắp xếp của danh sách, giá trị Sắp xếp của mọi đối tượng nên được cập nhật, theo ý kiến ​​của tôi là rất đói tài nguyên.

Chỉ cần FYI: Tôi có thể có nhiều nhất 25 hàng trong bảng của mình.

Tôi đã nghĩ về một cái gì đó, có thể làm giảm các truy vấn của bạn. Ở đây trong ví dụ của tôi, tôi đã thêm một cái mới columnđể sắp xếp có tên pos. Vì vậy, ban đầu mà không có bất kỳ kéo, bảng của bạn sẽ như thế nào -

Bây giờ, hãy xem xét rằng bạn đã kéo Item 4giữa Item 1& Item 2. Bây giờ, posgiá trị mới Item 4sẽ là (20 + 10) / 2, đó là 15. Vì vậy, Bạn sẽ chỉ cần cập nhật một hàng trong cơ sở dữ liệu. Và, bạn sẽ nhận được -

Dưới đây là một sơ đồ với các trường hợp cạnh. ilà chỉ mục mảng mới của hàng của bạn sau khi được kéo -

Lưu đồ này không xử lý ArrayOutOfBoundkiểm tra. Và, đối với các trường hợp cạnh, bạn sẽ cần nhiều hơn một truy vấn.

Vì bạn chỉ có 25 hàng, bạn có thể lấy một giá trị rất lớn (ví dụ 10,000) cho chênh lệch pos (tôi lấy 10ví dụ này). Giá trị càng lớn, nó sẽ càng ít va chạm.

Cá nhân tôi sẽ trả về một mảng JSON cho dữ liệu từ phía sau. Sau đó, tôi sẽ sử dụng JavaScript (JQuery hoặc loại trực tiếp) để hiển thị và sắp xếp và sắp xếp lại dữ liệu. Bằng cách đó, việc sắp xếp không tải trên máy chủ.

Bạn đang tìm kiếm một cách thân thiện với tài nguyên để xử lý điều này nhưng quan điểm thân thiện với người dùng cũng là điều bắt buộc. Tôi đề nghị các yêu cầu riêng lẻ sau mỗi mục sắp xếp lại. Mỗi cuộc gọi cho phép bạn kiểm tra nếu được chấp nhận hoặc thất bại.

• Phản hồi thất bại sẽ đặt lại chế độ xem và hiển thị thông báo cho người dùng cuối.
• Yêu cầu chấp nhận đơn giản cho phép tiếp tục chỉnh sửa.

Ngoài ra, sử dụng một đối tượng JSON (@ tom-squires) là một ý tưởng tốt để giảm chi phí HTTP và xử lý phía máy chủ nhưng cuối cùng cần nhiều mã hơn để xử lý các yêu cầu ở phía máy chủ và máy khách. Nếu điều đó là ổn, việc truyền đối tượng đến máy chủ là hiệu quả nhất về mặt kỹ thuật. Nó cũng cho phép trì hoãn vài giây để cho phép nhiều lần sắp xếp lại trước một yêu cầu, nếu bạn muốn điều này.

Hãy ghi nhớ, để cung cấp cho người dùng phản hồi từ các yêu cầu không thành công, bạn sẽ phải phân tích một đối tượng JSON phản hồi từ máy chủ để tìm ra mục nào bị lỗi và đặt lại UI dựa trên đó.

Một cái gì đó như thế này trong trình xử lý sự kiện thả, trong đó e là sự kiện 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;
        }
    ...