在HTML表ASP.Net MVC上设置ListBox选定值

Question

我在 HTML表中设置 ListBox 的选定值时遇到问题。检索选定的值不是问题，而是在页面加载时设置其值。

HTML：

@model MVCSample.Models.SampleViewModel

<h2>Index</h2>

@using (Html.BeginForm())
{

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6">
            <input type="submit" value="Submit" />
            <hr />
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Select</th>
                    </tr>
                </thead>
                <tbody>
                    @for (int i = 0; i < Model.Details.Count(); i++)
                    {
                        @Html.HiddenFor(model => model.Details[i].Name)

                        <tr>
                            <td>@Html.DisplayFor(model => model.Details[i].Name)</td>
                            <td>
                                @Html.ListBoxFor(model => model.Details[i].Selected, Model.List, new { @class = "form-control", multiple = "multiple" })
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>
}

型号：

namespace MVCSample.Models
{
    public class SampleViewModel
    {
        public SelectList List { get; set; }
        public List<SampleDetailsViewModel> Details { get; set; }
    }

    public class SampleDetailsViewModel
    {
        public string Name { get; set; }
        public string[] Selected { get; set; }
    }
}

控制器：

namespace MVCSample.Controllers
{
public class SampleController : Controller
{
    public ActionResult Index()
    {
        SampleViewModel model = new SampleViewModel();
        model.List = new SelectList(new[] { "1", "2", "3" });

        model.Details = new List<SampleDetailsViewModel>() { 
            new SampleDetailsViewModel {
                Name="Sample1", 
                Selected= new[]{"1"}
            }
        };

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(SampleViewModel model)
    {
        model.List = new SelectList(new[] { "1", "2", "3" });
        return View(model);
    }

}
}

如您所见，在声明 model.Details 的值后，我将所选值设置为 1 。

但是在下图中，页面加载后没有选择任何值。

目标：能够在页面加载时在HTML表格上设置ListBox的选定值。

建议的解决方案：

查看：

@using (Html.BeginForm())
{

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6">
            <input type="submit" value="Submit" />
            <hr />
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Select</th>
                    </tr>
                </thead>
                <tbody>
                    @for (int i = 0; i < Model.Details.Count(); i++)
                    {
                        @Html.HiddenFor(model => model.Details[i].Name)

                        <tr>
                            <td>@Html.DisplayFor(model => model.Details[i].Name)</td>
                            <td>
                                @Html.DropDownListFor(model => model.Details[i].Selected, new SelectList(Model.List, "ID", "Name", Model.Details[i].Selected), new { @class = "form-control", multiple = "multiple" })
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>
}

MODEL：

namespace MVCSample.Models
{
public class SampleViewModel
{
    public IEnumerable<OptionViewModel> List { get; set; }
    public List<SampleDetailsViewModel> Details { get; set; }
}

public class OptionViewModel
{
    public string ID { get; set; }
    public string Name { get; set; }
}

public class SampleDetailsViewModel
{
    public string Name { get; set; }
    public OptionViewModel Selected { get; set; }
}

}

控制器：

public class SampleController : Controller
{
    public ActionResult Index()
    {
        SampleViewModel model = new SampleViewModel();
        model.List = new OptionViewModel[] { new OptionViewModel() { ID = "1", Name = "1" }, new OptionViewModel() { ID = "2", Name = "2" } };

        model.Details = new List<SampleDetailsViewModel>() { 
            new SampleDetailsViewModel {
                Name="Sample1", 
                Selected = new OptionViewModel() { ID = "1", Name = "1" }
            }
        };

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(SampleViewModel model)
    {
        model.List = new OptionViewModel[] { new OptionViewModel() { ID = "1", Name = "1" }, new OptionViewModel() { ID = "2", Name = "2" } };
        return View(model);
    }

}

Answer 1

不幸的是，ListBoxFor（）和DropDownListFor（）在for循环中无法正常工作。 This answer提供了两种可能的解决方案 - 使用自定义EditorTemplate作为SampleDetailsViewModel类型，并将SelectList作为additionalViewData传递给模板，或者在每个模板中创建一个新的MultiSelectList迭代循环。

根据您的编辑，您已尝试过第二个选项，但您的代码包含一些错误。

<select mutiple="multiple" ..>只能绑定到值类型数组（不是复杂对象（在您的情况下为OptionViewModel）。。将视图模型更改为

public class SampleDetailsViewModel
{
    public string Name { get; set; }
    // public OptionViewModel Selected { get; set; }
    public string[] Selected { get; set; } // change this
}

并在初始化视图模型时在控制器中

model.Details = new List<SampleDetailsViewModel>()
{ 
    new SampleDetailsViewModel
    {
        Name="Sample1",  
        // Selected = new OptionViewModel() { ID = "1", Name = "1" },
        Selected = new string[] { "1" } // change this
    }
};

最后在视图中，它必须是MultiSelectList（不是SelectList）

@Html.DropDownListFor(model => model.Details[i].Selected,
    new MultiSelectList(Model.List, "ID", "Name", Model.Details[i].Selected),
    new { @class = "form-control", multiple = "multiple" }
)