如何在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;
        }

    }

索引.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>