1

I want to move selected listbox items to another listbox without reloading the whole page.

In my scenario, I used integer values and want to send selected values to another list box and vice-versa.

Can anyone please guide me how to do this.

Class code

 public class NumberClass
  {
    public IEnumerable<SelectListItem> leftnumbers { get; set; }
    public IEnumerable<int> leftSelectednumbers { get; set; }

    public IEnumerable<SelectListItem> rightnumbers { get; set; }
    public IEnumerable<int> rightSelectednumbers { get; set; }
  }

Controller code

  [HttpGet]
      public ActionResult Index()
      {
        List<SelectListItem> items = new List<SelectListItem>();

        for (int i = 1; i <= 20; i++)
        {
            SelectListItem selectList = new SelectListItem()
            {
                Text = i.ToString(),
                Value = i.ToString()

            };

            items.Add(selectList);

        }

        NumberClass num = new NumberClass()
        {
            leftnumbers = items,
            rightnumbers = null

        };
        return View(num);

    }


    [HttpPost]
    public string Index(IEnumerable<int> selectedvalue)
    {
        if (selectedvalue == null)
        {
            return "you have not selected";
        }
        else
        {
            //
            return;
        }

    }

Index.cshtml

@using (Html.BeginForm())
{
  <div class="col-md-6" style="font-family:Arial">
    @Html.ListBoxFor(m => m.leftSelectednumbers, Model.leftnumbers, new { size = 20, @class = "listBox" })
    <br />
    <input type="submit" value="move left" />
</div>

<div class="col-md-6" style="font-family:Arial">

    @Html.ListBoxFor(m => m.leftSelectednumbers, new List<SelectListItem>(), new { size = 20, @class = "listBox" })
    <br />
    <input type="submit" value="move right" />
</div>

}
Improve this question
3
  • It would be a lot more efficient and user friendly to do this with JavaScript. It would probably be easier too. What's your objection to doing that? Commented Apr 29, 2019 at 5:57
  • @ADyson, I was just curious to know that whether it can be achieved via back end code or not. Thank you for your comment. Commented Apr 29, 2019 at 6:00
  • Use partial view with Ajax.BeginForml. In partial you'll be keeping you controls and after submit re-render only partial view Commented Apr 29, 2019 at 6:21

1 Answer 1

Reset to default
0

I tried to use jQuery for your requirement handle click event and append selected to right part.

With this you should use javascript instead of backend code as ADyson suggestion.

@model TestMVC.Controllers.NumberClass
@using (Html.BeginForm())
{
    <div class="col-md-6" style="font-family:Arial">
        @Html.ListBoxFor(m => m.leftSelectednumbers, Model.leftnumbers, new { size = 20, @class = "listBox" })
        <br />
        <input type="button" id="moveLeft" value="move left" />
    </div>

    <div class="col-md-6" style="font-family:Arial">

        @Html.ListBoxFor(m => m.rightSelectednumbers, new List<SelectListItem>(), new { size = 20, @class = "listBox" })
        <br />
        <input type="button" value="move right" />
    </div>

}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $('#moveLeft').click(function () {
        var leftselected = $('#leftSelectednumbers').val();
        $.each(leftselected, function (key, value) {
            $('#rightSelectednumbers').append($("<option></option>").attr("value", value).text(value));
        });
    })

</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for your answer. Currently, it is just selecting the items from left and appending it in right. Can I ask one small doubts, I want to completely remove selected items from left and append it in right. How shall I do this? Please guide me. Thank you in advance!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.