如何在ASP.NET MVC中将选定的列表框值从一个列表框发送到另一个列表框而不使用客户端代码 [英] How to send selected listbox values from one listbox to another in ASP.NET MVC without using client side code

问题描述

I want to send selected listbox values to another listbox. I want to implement this using C# code in controller section but not with JavaScript code.

I got stuck here. I am generating integer values and want to select these values to send to another list box and vice-versa.

我是什么尝试过：

What I have tried:

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

    }

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

}

推荐答案

select \ list box的问题在于，当表单只提交时所选项目随表单一起提交，因此如果您在选择框中有20个项目，请选择其中3项并提交表单，然后您的控制器代码不知道您的列表框中最初有多少项目，只有用户已选择其中三个。



所以你需要自己跟踪未选择的项目。有很多不同的方法可以做到这一点，但在下面的示例代码中，我只是将它们存储在隐藏字段中作为逗号分隔列表。



更新后的模型< br $>

The issue with select \ list boxes is that when the form is submitted only the selected items are submitted with the form, so if you have 20 items in the select box, select 3 of them and submit the form then your controller code has no idea how many items were in your list box originally, only that the user has selected three of them.

So you need to track the non-selected items yourself. There are loads of different ways of doing this, but in the sample code below I simply store them in a hidden field as a comma separated list.

The updated model

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

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

查看

View

@using (Html.BeginForm())
{
    <input type="hidden" name="CurrentLeftNumbers" value="@Model.currentLeftNumbers"/>

    <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 right" />
    </div>

    <input type="hidden" name="CurrentRightNumbers" value="@Model.currentRightNumbers" />

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

        @Html.ListBoxFor(m => m.rightSelectednumbers, Model.rightnumbers, new { size = 20, @class = "listBox" })
        <br />
        <input type="submit" value="move left" />
    </div>
}

控制器

Controller

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

    for (int i = 1; i <= 20; i++)
    {
        items.Add(i);
    }

    NumberClass num = GetModel(items, new List<int>());

    return View(num);
}

[HttpPost]
public ActionResult Index(NumberClass model)
{
    List<int> left = GetNumbers(model.currentLeftNumbers);
    List<int> right = GetNumbers(model.currentRightNumbers);

    if (model.leftSelectednumbers != null)
    {
        foreach (var i in model.leftSelectednumbers)
        {
            left.Remove(i);
            right.Add(i);
        }
    }

    if (model.rightSelectednumbers != null)
    {
        foreach (var i in model.rightSelectednumbers)
        {
            right.Remove(i);
            left.Add(i);
        }
    }

    return View(GetModel(left, right));
}

private List<int> GetNumbers(string numbers)
{
    if (string.IsNullOrWhiteSpace(numbers))
    {
        return new List<int>();
    }
    else
    {
        return numbers.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries).Select(n => int.Parse(n)).ToList();
    }
}

private NumberClass GetModel(IEnumerable<int> left, IEnumerable<int> right)
{
    NumberClass model = new NumberClass();

    if (left.Any())
    {
        model.currentLeftNumbers = left.Select(n => n.ToString()).Aggregate((x, y) => x + "," + y);
        model.leftnumbers = left.OrderBy(x => x).Select(n => new SelectListItem { Value = n.ToString(), Text = n.ToString() });
    }
    else
    {
        model.leftnumbers = new List<SelectListItem>();
    }
            
    if (right.Any())
    {
        model.currentRightNumbers = right.Select(n => n.ToString()).Aggregate((x, y) => x + "," + y);
        model.rightnumbers = right.OrderBy(x => x).Select(n => new SelectListItem { Value = n.ToString(), Text = n.ToString() });
    }
    else
    {
        model.rightnumbers= new List<SelectListItem>();
    }

    return model;
}

您可能需要单步执行代码才能看到它是如何工作的。

You'll probably need to step through the code to see how it is working.

使用UI元素的后端进行通信是一个可怕的想法。您基本上必须将选定的选项从第一个框发送到后端，后者只返回它们，然后将它们发回去放入另一个框中。如果您希望后端知道列表框中的项目，请发送信息，但在javascript中填充UI后

Using the back end for UI elements to communicate is a TERRIBLE idea. You'd basically have to send the selected options from box one to the back end, which simply returns them, and then send them back down to put in the other box. If you want the back end to know what items are in the listbox, send the information, but after you populate the UI in javascript

这篇关于如何在ASP.NET MVC中将选定的列表框值从一个列表框发送到另一个列表框而不使用客户端代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！