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

Question

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

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

视图模型

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

控制器

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;

    }

}

组合框的编辑器模板

@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。我认为这是因为每个 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])
        }
    }
}

正如您在下面的屏幕截图中看到的，所有 ComboBox 都消失了，所有内容都呈现为 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 控件。它会生成重复的name 属性，这些属性无法绑定回集合（并且重复的id 属性是无效的html）。您需要使用for 循环，或者更好地使用自定义EditorTemplate。你的第二个错误（当你使用for循环时）是因为你绑定到的属性是string，所以绑定到m => m.ToRelationship[i]是绑定到Char中的一个字符（typeof Char）。

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

此外，您对ToRelationship 和FromRelationship 使用2 个组合框会导致很多潜在错误，您应该重新定义Relationship 表以包括（例如）以下字段

ID, Relationship, MaleReverseRelationship, FemaleReverseRelationship

所以典型的行可能包含

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

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

您尚未提供有关其他表/模型的任何信息，但您需要一个带有字段的 MemberRelationShip 表

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

然后您需要 2 个视图模型，一个用于父 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" />
}

Answer 2

1. 您可以，但您需要将 ViewData 传递给子模板才能在子视图中访问它，因为我的理解是 Viewdata 不是全局可用的（无论如何对请求都是全局的）对象，它仅对当前视图有效（除非传入，否则对任何子视图均无效）

2. 我认为这里的问题是您的视图模型，您似乎正在尝试将所有行上的下拉列表绑定到根视图模型中的相同属性，但我相信您可能更需要做的是例如，在根模型的 ToMembers 属性中为每个成员设置关系值...

作为一个仅 seudocode 的示例，感觉就像不是 ...

foreach(var child in model.members)
{
    dropdownfor(m => m.FromRelationship, ViewData["relationships"]);
    dropdownfor(m => m.ToRelationship, ViewData["relationships"]);
}

...您应该通过构建设置属性的下拉菜单来设置两个人之间的关系，例如...

foreach(var child in model.members)
{
    dropdownfor(m => child.FromRelationship, ViewData["relationships"]);
    dropdownfor(m => child.ToRelationship, ViewData["relationships"]);
}

...以下为真...

1. 第一个参数是您要设置为下拉列表中所选项目的值的属性
2. 第二个参数是您似乎存储在 viewdata 对象中的“关系类型”列表
3. 这存在于根视图而不是某些模板/子视图中

....

1. 我们如何才能达到预期的效果？

好吧，我们可以确保我们从正确的事情开始设置正确的位，因此我认为您真正想要的是一个看起来像这样的根模型......

public class FamilyTreeRelationshipViewModel
{
    public IEnumerable<MemberPair> FamilyMemberPairs{ get; set; }
    public IEnumerable<Relationship> Relationships { get;set; }
}

...从那里为每个成员您可以像这样呈现您的行...

@foreach(var pair in Model.MemberPairs)
{
    @* Template out a member pair, pass through the set of relationships *@
    @Html.EditorFor(m => pair, Relationships)
}

.. 好的，从这里开始，您需要在 EditorTemplates 文件夹中创建一个名为“MemberPair.cshtml”的视图，该视图将模板化成员对对象，该对象看起来像这样...

class MemberPair
{
   public Member From { get;set; }
   public Member To { get;set; }
   public int FromRelationshipId {get;set;}
   public int ToRelationshipId {get;set;}
}

...这个视图模型定义了一对你想要定义关系的家庭成员，应该设置从和到家庭成员，以及我们将使用我们将在视图中生成的下拉菜单定义的关系，例如这……

@Html.DisplayFor(m => m.From) 

@(Html.Kendo().ComboBoxFor(m => m.FromRelationshipId)
            .DataTextField("Definition")
            .DataValueField("Code")
            .DataSource((System.Collections.IEnumerable)ViewData["Relationships"])
            )

@(Html.Kendo().ComboBoxFor(m => m.ToRelationshipId)
            .DataTextField("Definition")
            .DataValueField("Code")
            .DataSource((System.Collections.IEnumerable)ViewData["Relationships"])
            )

@Html.DisplayFor(m => m.To)

在这种情况下，关系集合可从 viewdata 获得，因为我们在前一个视图中明确地从父级传递它。

我们还可以在这里注意到，当我们绑定下拉菜单时，我们的绑定方式会在单个关系对对象上设置单个 int 关系 id。

我认为你在上面出错的地方是你试图将所有下拉列表绑定到父模型上的相同 int 值，我不知道 MVC 是否会允许/满足，因为这可能会导致字段 id 冲突在客户端上。

免责声明：

这个答案描述了你的实现背后的理论，但不是你可能需要的确切代码，这还需要控制器中的一些逻辑更改来管理这些视图的模型的构造。

花点时间思考构建解决方案所需的结构，并用更小的可管理组件构建解决方案。

这感觉像是一个分层问题，而不是您可以在单个视图中实现的问题，您也可以考虑使用剑道网格进行绑定，因为它可以为您解决这些问题，但我不想要建议使用复杂的控件将简单的组合绑定问题替换为复杂的绑定问题。

Answer 3

1. 作为替代解决方案，您可能根本不使用 HTML 帮助程序并编写自己的 HTML。使用 HTML 帮助程序会导致您遇到的问题。您可能会克服它们，但如果 HTML 帮助器没有帮助您，反而造成了困难，那么使用它们有什么意义呢？ （在我看来，MVC 是关于控制您提供给浏览器的前端代码。）

使用 Razor，直接编写所需的 HTML 可以证明比让 HTML 助手为您编写更有效。

当然，这是我的观点。我在一些类似的问题here上更详细地介绍了它。