c# - Asp.net MVC 多选列表属性

Question

我是 ASP.Net MVC 的新手，所以请原谅我的任何显而易见的事情。

我有一个包含列表属性的对象。我只是不知道我应该如何在创建中实现它。 这是对象:

public class TeamMember
{
    public int TeamMemberId { get; set; }
    public string FristName { get; set; }
    public string LastName { get; set; }
    public DateTime BirthDate { get; set; }
    public string Biographie { get; set; }
    public virtual Image Image { get; set; }
    public virtual List<DanGrade> DanGrades { get; set; }
}

在创建 View 中，我希望能够选择多个 Dangrades。

我尝试修改它的编辑器模板，如下所示:

@using BudoschoolTonNeuhaus.Models
@model BudoschoolTonNeuhaus.Models.TeamMember

@{
    var db = new ApplicationDbContext();
    var danGrades = db.DanGrades.ToList();
}

<select multiple name="@ViewData.TemplateInfo.HtmlFieldPrefix" class="dropdown">
    @foreach (var dan in danGrades)
    {
        <option value="@">
            @dan.DanGradeId: @dan.BudoSport, @dan.Grade
        </option>
    }
</select>

但这并没有给出我预期的结果，它只是在创建 View 中显示了多个 dangrade 标签，您可以在此处看到:

@model BudoschoolTonNeuhaus.Models.TeamMember

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Admin_Layout.cshtml";
}
<div class="wrapper">
    <h2>Create</h2>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>TeamMember</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.FristName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.FristName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.FristName, "", new { @class = "text-danger" })
                </div>
            </div>

            .... // controls for other properties of model

            <div class="form-group">
                @Html.LabelFor(model => model.DanGrades, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DanGrades, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.DanGrades, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Image, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <input type="file" id="Image" name="Image" hidden />
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
</div>

当前的 HTML 输出:

提前感谢您的帮助!

Answer 1

创建 <select multiple>你使用 ListBoxFor()您认为的方法。

但是你的模型需要两个属性来生成一个列表框，一个 IEnumerable<int>将所选值绑定(bind)到(假设 DanGrade 的 ID proeprty 是 typeof int )，以及 IEnumerable<SelectListItem>显示 <option>元素。

你在编辑数据，所以总是从 View 模型开始

public class TeamMemberVM
{
    public int? TeamMemberId { get; set; }
    ....
    [Display(Name = "DanGrades")]
    public IEnumerable<int> SelectedDanGrades { get; set; }
    public IEnumerable<SelectListItem> DanGradesList { get; set; }
}

你的观点将是

@model yourAssembly.TeamMemberVM
....
@Html.ListBoxFor(m => m.SelectedDanGrades, Model.DanGradesList, new { @class="dropdown" })

你的 Controller 方法将是

public ActionResult Create()
{
    TeamMemberVM model = new TeamMemberVM();
    ConfigureViewModel(model);
    // For an Edit method, your would set the existing selected items here
    model.SelectedDanGrades = ...
    return View(model);
}
public ActionResult Create(TeamMemberVM model)
{
    if (!ModelState.IsValid)
    {
        ConfigureViewModel(model); // repopulate the SelectList
        return View(model);
    }
    // model.SelectedDanGrades contains the ID's of the selected options
    // Initialize an instance of your data model, set its properties based on the view model
    // Save and redirect
}
private void ConfigureViewModel(TeamMemberVM model)
{
    IEnumerable<DanGrade> danGrades = db.DanGrades();
    model.DanGradesList = danGrades.Select(x => new SelectListItem
    {
        Value = x.DanGradeId.ToString(),
        Text = x.??? // the name of the property you want to use for the display text
    });
}

另请注意，您的 View 有一个文件输入，因此您的 View 模型需要一个 HttpPostedFileBase将文件绑定(bind)到的属性

public HttpPostedFileBase Image { get; set; }

在 View 中

@Html.TextBoxFor(m => m.Image, { new type ="file" })