Как отправить выбранные значения списка из одного списка в другой в asp.net MVC

Question

Я хочу переместить выбранные элементы списка в другой список без перезагрузки всей страницы.

В моем сценарии я использовал целочисленные значения и хочу отправить выбранные значения в другой список и наоборот.

Может кто-нибудь, пожалуйста, сообщите мне, как это сделать.

Код класса

 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; }
  }

Код контроллера

  [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>

}

Answer 1

Я попытался использовать jQuery для вашего события клика по требованию и добавить выбранное к правой части.

При этом вы должны использовать javascript вместо внутреннего кода в качестве предложения ADyson.

@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>