asp.net-mvc设置列表框中选择 HTML 表 ASP.Net MVC 的值

发布时间: 2017/3/25 13:26:23
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个问题在HTML Table中设置列表框中选定的值。检索所选的值不是一个问题,而相反在页面加载设置其值。

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

}
}

你可以看到,在宣布模型的值。详细信息我将所选的值设置为1

但是,在下面的图片,在页面加载后选择任何值。

enter image description here

目的︰ 为了能够在 HTML 上设置列表框中选定的值表页上的负载。

建议的解决方案︰

视图︰

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

型号︰

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

}

解决方法 1:

不幸的是 ListBoxFor() 和 DropDownListFor() 不正确里面工作的 for 循环。这个答案给 2 可能的解决办法-使用自定义 EditorTemplate 为 typeof SampleDetailsViewModel 和传递 SelectList 作为模板,或创建一个新的 additionalViewData MultiSelectList 在每次循环迭代。

基于您的编辑,您已经尝试的第二选项,但是您的代码包含几个错误。

A <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" }
)
官方微信
官方QQ群
31647020