自定义编辑器模板未正确返回表单值

本文关键字:返回 表单 编辑器 自定义 | 更新日期: 2023-09-27 18:35:24

我有一个模型,它有一个复杂类型作为属性。我已经为复杂的子类型创建了一个自定义的DisplayEditor,并且在加载页面时正确绑定了它。在进行编辑后发布页面时,依赖项类型将设置为 null。下面是表示子依赖项属性的"员工"模型的代码:

[Display(Name = "Dependents")]
[DataType(DataType.MultilineText)]
public List<Dependent> Dependents { get; set; }

下面是依赖模型:

[Serializable]
public class Dependent : Person
{
    public Dependent()
    {
        Deduction deduction = new Deduction(this) { Amount = Constants.DependentDeductionAmount };
        this.Deduction = deduction;
    }
    [Key]
    [HiddenInput(DisplayValue = false)]
    public int DependentId { get; set; }
    [Required]
    [Display(Name = "Dependent Type")]
    public DependentType DependentType { get; set; }
    [Required]
    public override double DeductionAmount => Constants.DependentDeductionAmount;
}

员工控制器上的 2 种编辑操作方法(我尝试过 TryUpdateModel,不起作用):

    public ViewResult Edit(int employeeId)
    {
        if (employeeId < 0) throw new ArgumentOutOfRangeException(nameof(employeeId));
        Employee employee = _employeeRepository.Employees.FirstOrDefault(e => e.EmployeeId == employeeId);
        bool result = TryUpdateModel(employee, new FormValueProvider(ControllerContext));
        return View(employee);
    }
    [HttpPost]
    public ActionResult Edit(Employee employee)
    {
        if (employee == null) throw new ArgumentNullException(nameof(employee));
        if (ModelState.IsValid)
        {
            employee.Changed = true;
            employee.Dependents.ForEach(d => d.Changed = true);
            _employeeRepository.SaveEmployee(employee);
            TempData["message"] = $"{employee} has been saved.";
            return RedirectToAction("Index");
        }
        else {
            // there is something wrong with the data values
            return View(employee);
        }
    }

这是Edit.cshtml:

@model Paylocity.HR.Domain.Entities.Employee
@{
    ViewBag.Title = $"{"Edit"} {Model}";
}
<div class="panel panel-default">
    <div class="panel-heading">
        <h3>@ViewBag.Title</h3>
</div>
@using (Html.BeginForm("Edit", "Employee"))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <hr/>
        @Html.ValidationSummary(true, "", new {@class = "text-danger"})
        <h4>Employee</h4>
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new {@class = "control-label col-md-2"})
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new {htmlAttributes = new {@class = "form-control"}})
                @Html.ValidationMessageFor(model => model.FirstName, "", new {@class = "text-danger"})
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new {@class = "control-label col-md-2"})
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new {htmlAttributes = new {@class = "form-control"}})
                @Html.ValidationMessageFor(model => model.LastName, "", new {@class = "text-danger"})
            </div>
        </div>
        <hr/>
        @Html.EditorFor(model => model.Dependents, "Dependents")   
        @Html.HiddenFor(model => model.EmployeeId)
    </div>
    <div class="panel-footer">
        <input type="submit" value="Save" class="btn btn-primary"/>
        @Html.ActionLink("Cancel and return to List", "Index", null, new {@class = "btn btn-default"})
    </div>
}
</div>

以下是 Dependent.cshtml EditorTemplate:

@model IEnumerable<Dependent>
@using Paylocity.HR.Domain.Entities
@foreach (var dep in Model)
{
<h4>Dependent</h4>
<div class="form-group">
    @Html.LabelFor(m => dep.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(m => dep.FirstName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(m => dep.FirstName, "", new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => dep.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(m => dep.LastName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => dep.LastName, "", new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => dep.DependentType, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EnumDropDownListFor(m => dep.DependentType, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => dep.DependentType, "", new { @class = "text-danger" })
    </div>
</div>
<hr />
}

员工对象正确绑定且可更新,只有依赖项子类型未正确绑定。HTML 显示依赖表单字段的正确 ID/名称(我相信?我是否需要实现某种自定义绑定代码,或者我在这里缺少一些明显的东西?

这是我关于SO的第一个问题,我希望我提供了足够的信息。

自定义编辑器模板未正确返回表单值

Dependent.cshtml模板中的模型更改为@model Dependent(不能IEnumerable<T>),并删除生成与模型无关的name属性的foreach循环(以及无效的 html 重复id属性)

它还需要位于/Views/Shared/EditorTemplates//Views/yourControllerName/EditorTemplates/文件夹中

@model Dependent
...
@Html.EditorFor(m => m.FirstName, new { htmlAttributes = new { @class = "form-control" } })
...
@Html.EditorFor(m => m.LastName, new { htmlAttributes = new { @class = "form-control" } })

等。然后在主视图中,使用

@Html.EditorFor(model => model.Dependents)

EditorFor() 方法接受IEnumerable<T>,并将为集合中的每个项生成正确的 html,包括带有索引器的正确name属性

我认为您的问题是您生成项目列表的方式。

使用索引而不是foreach。

因此您的 Dependent.cshtml 编辑器模板

执行以下操作:

@for(int i = 0; i < Model.Count(); i++)
{
<h4>Dependent</h4>
<div class="form-group">
    @Html.LabelFor(m => Model[i].FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(m => Model[i].FirstName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(m => Model[i].FirstName, "", new { @class = "text-danger" })
    </div>
</div>
// rest field follow same pattern
}

有关绑定列表的更多信息,请查看此帖子http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/