ASP.NET MVC ListBox - Client-Side API - Move Items

  • Alfreds FutterkisteALFKI
  • Antonio Moreno TaqueríaANATR
  • Around the HornAROUT
  • Berglunds snabbköpANTON
  • Berglunds snabbköpBERGS
  • Blauer See DelikatessenBLAUS
  • Blondesddsl père et filsBLONP
  • Bólido Comidas preparadasBOLID
  • Bon app'BONAP
  • Bottom-Dollar MarketsBOTTM
 
Move Up


Move Down
The ListBox control provides client-side methods for adding / removing items.
These methods can be used to move items up and down.
View - Aspx

    <% Html.Obout(new ListBox("ListBox1")
    {   
        SelectedIndex = 4
    }); %>
    
    <% Html.Obout(new OboutButton("OboutButton1")
    {
        OnClientClick = "return moveUp();",
    }); %>	   

    <% Html.Obout(new OboutButton("OboutButton2")
    {
        OnClientClick = "return moveUp();",
    }); %>	   
    
    
View - Razor

    @Html.Obout(new ListBox("ListBox1")
    {   
        SelectedIndex = 4
    })
    
    @Html.Obout(new OboutButton("OboutButton1")
    {
        OnClientClick = "return moveUp();",
    })

    @Html.Obout(new OboutButton("OboutButton2")
    {
        OnClientClick = "return moveUp();",
    })
    
    
JavaScript

    function moveUp() {
        var selectedIndex = ListBox1.selectedIndex();

        if (selectedIndex > 0) {
            var value = ListBox1.options[selectedIndex].value;
            var text = ListBox1.options[selectedIndex].text;

            ListBox1.options.remove(selectedIndex);

            ListBox1.options.add(text, value, selectedIndex - 1);

            ListBox1.selectedIndex(selectedIndex - 1);
        }

        return false;
    }

    function moveDown() {
        var selectedIndex = ListBox1.selectedIndex();

        if (selectedIndex < ListBox1.options.length - 1) {
            var value = ListBox1.options[selectedIndex].value;
            var text = ListBox1.options[selectedIndex].text;

            ListBox1.options.remove(selectedIndex);

            ListBox1.options.add(text, value, selectedIndex + 1);

            ListBox1.selectedIndex(selectedIndex + 1);
        }

        return false;
    }