Sort lists with Jquery's sortable method and maintain order in ASP.NET Webform

Question

Sort lists with Jquery's sortable method and maintain order in ASP.NET Webform

JOcampo 0

Hello, I have an application with ASP.NET WEBFORM in which I load a list using the BulletedList control, I can load the data perfectly and applying the Jquery sortable method I can drag and drop the elements and everything is fine.

The problem is that when trying to save the data to SQL SERVER, it gets loaded in the original order and ignores the JQUERY order.

Here my code

<asp:BulletedList ID="blActivos" runat="server" CssClass="sortable sortable1 connectedSortable fl w49Por" RenderWhenDataEmpty="true">

</asp:BulletedList>

    <script>
        $(function () {
            $(".sortable1, .sortable2").sortable({
                placeholder: "ui-state-highlight",
                connectWith: ".connectedSortable",
                items: "li:not(.ui-state-disabled)"
            }).disableSelection();
        });
    </script>

On the server side, to populate the control I use the following:

    Private Sub Load_Clientes_Activos()
        Try
            Dim sql As String = String.Empty
            sql = "EXEC sp_view_cliente_cartera @cod_cartera = " & cod_cartera

            Dim dt As DataTable = DataBase.GetDataSet(sql).Tables(0)

            Me.blActivos.DataSource = dt
            Me.blActivos.DataValueField = "CODIGO" 'Valor Oculto
            Me.blActivos.DataTextField = "NOMBRE" 'Valor a Mostrar
            Me.blActivos.DataBind()
            'Me.ddlFrecuenciaPago.Items.Insert(0, New ListItem("Seleccione...", String.Empty))

            dt.Dispose()

        Catch ex As Exception
            Me.ltMensaje.Text = conn.pmsgBox("Ocurrió un error al intentar cargar los clientes activos en la cartera.", "error")

        End Try
    End Sub

I hope you can help me

AgaveJoe 30,126 Reputation points

2023-02-20T16:23:55+00:00

The problem is that when trying to save the data to SQL SERVER, it gets loaded in the original order and ignores the JQUERY order.

Correct, the bulleted list is read only. Inputs are needed to submit the user's selected order to the server. Maybe add a hidden field to the HTML where the value is item Id. If the hidden fields have the same name then the Ids are sent as an array. If you use a data bound control, then loop over the control's item collection to get each item in the collection and read the submitted value(s).
JOcampo 0 Reputation points

2023-02-20T19:30:47.7466667+00:00

Also use the Listbox control and it is the same result. In the browser I can do the order I want, but when trying to save, the initial order is generated.

3 answers

Your answer

AgaveJoe 30,126 Reputation points

2023-02-20T16:23:55+00:00

The problem is that when trying to save the data to SQL SERVER, it gets loaded in the original order and ignores the JQUERY order.

Correct, the bulleted list is read only. Inputs are needed to submit the user's selected order to the server. Maybe add a hidden field to the HTML where the value is item Id. If the hidden fields have the same name then the Ids are sent as an array. If you use a data bound control, then loop over the control's item collection to get each item in the collection and read the submitted value(s).
JOcampo 0 Reputation points

2023-02-20T19:30:47.7466667+00:00

Also use the Listbox control and it is the same result. In the browser I can do the order I want, but when trying to save, the initial order is generated.

Answer 1

Bruce (SqlWork.com) 77,686 Volunteer Moderator

you will also need a sorting column that is stored in the database. once the list order is set on the client, upload the list item id and new sort column values to the server and save in database,

JOcampo 0 Reputation points

2023-02-20T19:29:57.0733333+00:00

The idea is to take the order of the control and insert that data in that order into the SQL.

I do the same with PHP in a very simple way, but the ViewState of the control does not allow me to replicate
AgaveJoe 30,126 Reputation points

2023-02-20T19:36:09.9633333+00:00

You misunderstand the problem. You must submit data to the server to get the order. You had to do the same thing in PHP either AJAX or a form post.

Answer 2

Also use the Listbox control and it is the same result. In the browser I can do the order I want, but when trying to save, the initial order is generated.

We can't see your code. Here's a very basic example using a standard HTML hidden input. The browser submits the hidden field as an array (comma separated values).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormsDemo.jQuerySort.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#sortable").sortable();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                    <ui id="sortable">
                </HeaderTemplate>
                <ItemTemplate>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                        <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Item") %>' />
                        <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ItemId") %>' />
                        <input type="hidden" name="Ids" value='<%# DataBinder.Eval(Container.DataItem, "ItemId") %>' />
                    </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ui>
                </FooterTemplate>
            </asp:Repeater>
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </div>
        </div>
        <hr />
        <asp:GridView ID="GridView1" runat="server"></asp:GridView>
    </form>
</body>
</html>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebFormsDemo.jQuerySort
{
    public partial class Default : System.Web.UI.Page
    {
        private List<ItemsModel> model;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                model = PopulateItems();
                Repeater1.DataSource = model;
                Repeater1.DataBind();
            }
        }

        private List<ItemsModel> PopulateItems()
        {
            return new List<ItemsModel>()
            {
                new ItemsModel() {ItemId=1, Item="Hello", SortOrder=0},
                new ItemsModel() {ItemId=2, Item="World", SortOrder=1},
                new ItemsModel() {ItemId=3, Item="Foo", SortOrder=2},
                new ItemsModel() {ItemId=4, Item="Bar", SortOrder=3},
            };
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            int count = 0;
            List<RequestItems> requestOrder = new List<RequestItems>();
            foreach (object Id in Request.Form["Ids"].Split(','))
            {
                RequestItems item = new RequestItems() { ItemId = int.Parse(Id.ToString()), SortOrder = count++ };
                requestOrder.Add(item);
            }

            GridView1.DataSource = requestOrder;
            GridView1.DataBind();
        }

        public class ItemsModel
        {
            public int ItemId { get; set; }
            public string Item { get; set; } = string.Empty;
            public int SortOrder { get; set; }
        }

        public class RequestItems
        {
            public int ItemId { get; set; }
            public int SortOrder { get; set; }
        }
    }
}

The above is an overly simplified example and can be greatly improved.

Answer 3

JOcampo 0

In the end I decided to create a WebMethod to traverse the control with JQUERY and send the same order visible to the client to the WebMethod and later to the database.

The coigo is cleaner, but the work is more advanced, I think there should be a much easier method for beginners. I greatly appreciate the help and advice.

Greetings.

Share via

Sort lists with Jquery's sortable method and maintain order in ASP.NET Webform

3 answers

Your answer