c# - 在 Foreach 或 For 循环中使用 EditorFor (ASP.NET MVC + RAZOR)

Question

我目前正在我的 ASP.NET MVC 项目中实现一个家谱系统。为了设置家庭成员之间的关系，我需要每行显示两个 ComboBox/DropDownList 来定义一个成员与另一个成员之间的关系。

首先我会分享我的代码，然后我会解释我到目前为止尝试过的方法以及最后的结果。

View 模型

public class FamilyTreeRelationshipViewModel
{

    [ScaffoldColumn(false)]
    public string FromMemberId { get; set; }

    [ScaffoldColumn(false)]
    public string ToMemberId { get; set; }


    public Member FromMember { get; set; }
    public IEnumerable<Member> ToMembers { get; set; }


    [UIHint("FTComboBox")]
    [AdditionalMetadata("BindTo", "relationships")]
    [Required]
    [Display(Name = "From Relationship")]
    public string FromRelationship { get; set; }


    [UIHint("FTComboBox")]
    [AdditionalMetadata("BindTo", "relationships")]
    [Required]
    [Display(Name = "To Relationship")]
    public string ToRelationship { get; set; }
}

Controller

public class FamilyTreeController : Controller
{
    private AppMVC db = new AppMVC();


    public ActionResult Index(Guid? cid, Guid? mid)
    {

        if (cid == null && mid == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.NotFound);
        }


        var frommember = db.Member.FirstOrDefault(x => x.MemberId == mid && x.CaseId == cid && x.Deleted == false);
        var tomembers = db.Member.Where(x => x.CaseId == cid && x.MemberId != mid.Value && x.Deleted == false).ToList();


        ViewBag.cid = cid;
        ViewBag.mid = mid;

        PopulateRelationship();


        var familyTreeRelationshipViewModel = new FamilyTreeRelationshipViewModel
        {
            FromMember = frommember,
            ToMembers = tomembers,
        };

        return View(familyTreeRelationshipViewModel);
    }



    public void PopulateRelationship()
    {
        var relationship = db.RelationshipDD
        .Where(c => c.Deleted == false && c.Code != "PA")
        .OrderBy(c => c.OrderIndex)
        .Select(c => new RelationshipDDViewModel
        {
            Code = c.Code,
            Definition = c.Definition
        })
        .ToList();

        ViewData["relationships"] = relationship;

    }

}

ComboBox 的编辑器模板

@model object

@{
    var bindto = ViewData.ModelMetadata.AdditionalValues["BindTo"].ToString();
    var fieldname = ViewData.ModelMetadata.PropertyName;
    var prefix = ViewData.TemplateInfo.HtmlFieldPrefix;

}

@(Html.Kendo().ComboBoxFor(m => m)
          .Filter("contains")
          .Placeholder(ViewData.ModelMetadata.DisplayName)
          .DataTextField("Definition")
          .DataValueField("Code")
          .HtmlAttributes(new { style = "width: 100%", Id = prefix})
          .BindTo((System.Collections.IEnumerable)ViewData[bindto])

          )

@Html.ValidationMessageFor(m => m, "", new { @class = "mdc-text-red-400" })

为了向每一行显示一个新的结果，我在 View 中使用了foreach:

@if (Model.ToMembers != null)
{
    if (Model.ToMembers.Any())
    {
        foreach (var othermembers in Model.ToMembers.OrderBy(x => x.MemberNumberSuffix))
        {
            @Html.EditorFor(m => m.ToRelationship)
            @Html.EditorFor(m => m.FromRelationship)
        }
    }
}

如您在下面的屏幕截图中所见，仅渲染了第一行中的组合框。我假设这是因为每个 ComboBox 的控件 ID 相同。我检查了浏览器开发者工具 (F12)，它们都有相同的 ID。

后来我想我应该使用 For 而不是 Foreach，看看会发生什么:

@if (Model.ToMembers != null)
{
    if (Model.ToMembers.Any())
    {
        for (var i = 0; i < Model.ToMembers.Count(); i++)
        {
            var othermembers = Model.ToMembers.ToList()[i];

            @Html.EditorFor(m => m.ToRelationship[i])
            @Html.EditorFor(m => m.FromRelationship[i])
        }
    }
}

正如您在下面的屏幕截图中看到的，所有的组合框都消失了，所有内容都呈现为 Char。这里唯一的区别是每个控件/输入都有自己的 ID，这很好，但不如我预期的那么好。

毕竟，我决定为此目的使用内置 DropDownList (MVC)，结果是一样的。因为我认为 Telerik 控件有问题。

我什至尝试在 View 中直接使用 ComboBox 而不是 EditorFor，结果是不同的。每行都单独呈现并成功，但它又是 Char 类型，甚至错误消息也这么说。通常它应该说，“来自关系字段是必需的”。

@if (Model.ToMembers != null)
{
    if (Model.ToMembers.Any())
    {
        for (var i = 0; i < Model.ToMembers.Count(); i++)
        {

            @(Html.Kendo().ComboBoxFor(m => m.ToRelationship[i])
            .Filter("contains")
            .Placeholder(ViewData.ModelMetadata.DisplayName)
            .DataTextField("Definition")
            .DataValueField("Code")
            .HtmlAttributes(new { style = "width: 100%" })
            .BindTo((System.Collections.IEnumerable)ViewData["relationships"])
            )

            @(Html.Kendo().ComboBoxFor(m => m.FromRelationship[i])
            .Filter("contains")
            .Placeholder(ViewData.ModelMetadata.DisplayName)
            .DataTextField("Definition")
            .DataValueField("Code")
            .HtmlAttributes(new { style = "width: 100%" })
            .BindTo((System.Collections.IEnumerable)ViewData["relationships"])
            )
        }
    }
}

截图:

---

问题

1. 为什么我不能为此目的使用 EditorFor？
2. 为什么类型已更改为 Char，我该如何解决？
3. 有什么替代方法可以实现这一点？

预先感谢您的帮助!

Answer 1

首先，解释你的错误。您不能使用 foreach 循环为集合生成 form 控件。它会生成无法绑定(bind)回集合的重复 name 属性(以及无效 html 的重复 id 属性)。您需要使用 for 循环，或者更好的自定义 EditorTemplate。你的第二个错误(当你使用 for 循环时)是因为你绑定(bind)到的属性是 string，所以绑定(bind)到 m => m.ToRelationship[i ] 绑定(bind)到 string 中的字符 (typeof Char)。

真正的问题是您的 View 模型不正确，与您在 View 中显示/编辑的内容无关，您需要将下拉列表绑定(bind)到集合中的属性。

此外，您对 ToRelationship 和 FromRelationship 使用 2 个组合框会导致很多潜在错误，您应该重新定义您的 关系表包括(比方说)以下字段

ID, Relationship, MaleReverseRelationship, FemaleReverseRelationship

所以典型的行可能包含

1, Son, Father, Mother
2, Wife, Husband, NULL
3, Niece, Uncle, Aunt

然后您需要一个下拉列表，如果 Jack 与 Roger 的关系是 Son，您知道反向关系是 Father(假设您的 Member 模型有一个字段用于 Gender)。这将大大简化您的 View 模型，使 UI 更简单，并防止用户选择错误的反向关系时出现用户错误。

您没有提供关于您的其他表/模型的任何信息，但您需要一个包含字段的MemberRelationShip 表

ID, Member (FK to Members), OtherMember(FK to Members), RelationShip(FK to Relationships).

然后您需要 2 个 View 模型，一个用于父 Member，一个用于创建关系

public class ParentMemberVM
{
    public int ID { get; set; }
    public string Name { get; set; }
    .... other properties to display
    public IEnumerable<MemberVM> Members { get; set; }
    public IEnumerable<SelectListItem> RelationshipList { get; set; }
}
public class MemberVM
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int Relationship { get; set; }
}

然后你需要一个 EditorTemplate 用于 MemberVM

/Views/Shared/EditorTemplates/MemberVM.cshtml

@model MemberVM
@Html.HiddenFor(m => m.ID)
@Html.DisplayFor(m => m.Name)
@Html.DropDownListFor(m => m.Relationship, (IEnumerable<SelectListItem>)ViewData["relationships"])

在主视图中

@model ParentMemberVM
....
@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.ID)
    @Html.DislayFor(m => m.Name)
    @Html.EditorFor(m => m.Members, new { relationships = Model.RelationshipList })
    <input type="submit" value="Save" />
}