asp.net-mvc @Html.ListBox 对于使用和创建问题

@Html.ListBoxFor usage and creation questions

提问by user1599647

I have a webpage with 2 list box (list1, list2), I can shift items from one listbox to the other and back. When I click on the submit button, I want to return all the items value in list2to the httppost method.

我有一个带有 2 个列表框（list1, list2）的网页，我可以将项目从一个列表框移到另一个列表框并返回。当我单击提交按钮时，我想将list2中的所有项目值返回给 httppost 方法。

I have 3 problems:

我有3个问题：

1. How to definite the property for the selected list?
2. How to have a initial empty list (for list2)? list1has populated items?
3. How to return all of list2items to model, when submit button is clicked ?

1. 如何确定所选列表的属性？
2. 如何有一个初始的空列表（对于list2）？list1有填充的项目吗？
3. 单击提交按钮时，如何将所有list2项目返回到模型？

Model:

模型：

public class TestModel
{
    public List<SelectListItem> OptionList { get; set; }
    public List<SelectListItem> SelectedOptionList { get; set; }
    public string[] SelectedOptions { get; set; }
}

Controller:

控制器：

private TestModel testModel  = new TestModel();

public ActionResult TestPage()
{
    ViewBag.Message = "Test Page";

    testModel.OptionList = new List<SelectListItem>();

    for (int i = 1; i <= 100; i++)
    {
        SelectListItem item = new SelectListItem();
        item.Text = "Option " + i.ToString();
        item.Value = item.Text;

        testModel.OptionList.Add(item);
    }

    return View("TestView", testModel);
}

[HttpPost]
public ActionResult TestPage(TestModel formModel)
{
    testModel.SelectedOptionList = formModel.SelectedOptionList;
    testModel.SelectedOptions = formModel.SelectedOptions;

    //do something
    return RedirectToAction("TestPage");
}

View:

看法：

@model EngineeringDataAnalysisGui.Models.TestModel

@{
    ViewBag.Title = @ViewBag.Message;
}

@section Subtitle
{
    @ViewBag.Message
}

<table width="100%">
@using (Html.BeginForm("TestPage", "RetrieveData", FormMethod.Post))
{
    <tr>
        <td>Event List:</td>
        <td>@Html.ListBox("lstEventSelection", Model.OptionList, new { id = "list1", Multiple = "multiple", Size = 15, style = "width: 100%;" })</td>
    </tr>
    <tr>
        <td></td>
        <td>
            <table style="text-align:center; width: 100%">
                <tr>
                    <td id="buttonCol">
                        <input type="button" id="btnAddAllEvent" title="Add All Events" onclick="moveAllOptions('list1','list2', true)" />
                        <input type="button" id="btnAddEvent" title="Add Selected Events" onclick="moveSelectedOptions('list1','list2', true)" />
                    </td>
                    <td id="buttonCol">
                        <input type="button" id="btnRemoveEvent" title="Remove Selected Events" onclick="moveSelectedOptions('list2','list1', true)" />
                        <input type="button" id="btnRemoveAllEvent" title="Remove All Events" onclick="moveAllOptions('list2','list1', true)" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>Selected Event List:</td>
        @*Not sure how to add the listbox*@
        <td>@*Wrong*@@Html.ListBoxFor(x => x.SelectedOptions, Model.SelectedOptionList, new { id = "list2", Multiple = "multiple", Size = 15, style = "width: 100%;" })</td>
    </tr>
    <tr>
        <td><input type="submit" value="submit" /></td>
    </tr>
}
</table>

回答by aravind

1) How to definite the property for the selected list?
@Html.ListBoxFor(x => x.SelectedOptions, new MultiSelectList(Model.SelectedOptionList), new { id = "list2", Multiple = "multiple", Size = 15, style = "width: 100%;" })

1) 如何确定所选列表的属性？
@Html.ListBoxFor(x => x.SelectedOptions, new MultiSelectList(Model.SelectedOptionList), new { id = "list2", Multiple = "multiple", Size = 15, style = "width: 100%;" })

2) How to have a initial empty list (for list2)? list1 has populated items. In controller set an empty list testModel.SelectedOptionList = new List<SelectListItem>();

2）如何有一个初始的空列表（对于list2）？list1 已填充项目。在控制器中设置一个空列表testModel.SelectedOptionList = new List<SelectListItem>();

3) How to return all of list2 items to model when submit button is clicked
Probably you need to set all the items in list2 as selected (using jquery) before submitting. All the selected items in list2 items will bind to TestModel.SelectedOptions on submit.

3) 如何在单击提交按钮时将所有 list2 项目返回到模型中
可能您需要在提交前将 list2 中的所有项目设置为选中状态（使用 jquery）。list2 项目中的所有选定项目将在提交时绑定到 TestModel.SelectedOptions。

Please look around, there are a lot of answers already in SO related to Html.ListBoxFor. for e.g Challenges with selecting values in ListBoxFor

请环顾四周，与 Html.ListBoxFor 相关的 SO 中已经有很多答案。例如 在 ListBoxFor 中选择值的挑战