ListBox Up/Down arrow with MVC

[Joel]

Right now, I have a ListBox on a ASP.NET Core MVC application that has some "clonky" behavior.  When I press the "Up/Down" arrows to reorder the contents of the ListBox, it redirects over to the controller then loads an "Edit" view then when I save the Edit result (item index) and it directs back to the view with the ListBox.  This is not a good user experience.

Instead, I want to push the up/down arrow and have it perform the update without it redirecting over to the Controller/Edit page.  How do I accomplish this?

 

                <div class="container">
                    @(Html.Kendo().ListBox()
                        .Name("listBox")
                        .DataTextField("Name")
                        .DataValueField("Id")
                        .DataSource(source =>
                            source.Read(read =>
                                read.Action("IndexJson", "SessionOptionItems").Data("gridGetData"))
                        )
                        .TemplateId("item-template")
                        .Toolbar(toolbar =>
                        {
                            toolbar.Position(ListBoxToolbarPosition.Right);
                            toolbar.Tools(tools => tools
                                .MoveUp()
                                .MoveDown()
                                .Remove()
                                );
                        })
                        .Events(events => events
                            .Reorder("onReorder")
                            .Remove("onRemove"))
                        .HtmlAttributes(new { style = "height:550px;width:530px" })
                        .BindTo(new List<SessionOptionTemplate>()))
                </div>

    function onReorder(e) {
        //alert("onReorder");

        $("#isbusy").show();

        var dataSource = e.sender.dataSource;
        var element = e.sender.select();
        var dataItem = e.sender.dataItem(element[0]);

        //alert("id: " + dataItem.Id);
        //alert("name: " + dataItem.Name);

        var index = dataSource.indexOf(dataItem) + e.offset;

        //alert("index: " + index);

        var url = '@Url.Action("Edit", "SessionOptionItems")?id=' + dataItem.Id + '&order=' + index + '@Model.GetUrlParameters("&")';
        // Replace &amp with & as the above encoding step changes & to &amp.
        window.location.href = url.replace(/&/g, "&");
    }

[Stoyan]

Hi Joel,

Thank you for sharing your code.

I noticed that the redirect you mention happens in the handler of the Reorder Event:

    function onReorder(e) {
         ...
        var url = '@Url.Action("Edit", "SessionOptionItems")?id=' + dataItem.Id + '&order=' + index + '@Model.GetUrlParameters("&")';
        // Replace &amp with & as the above encoding step changes & to &amp.
        window.location.href = url.replace(/&/g, "&");
    }

To avoid the behavior either put this logic in more appropriate handler or envelop it in a conditional statement to ensure it is only executed when it is needed.

Regards,
Stoyan
Progress Telerik