javascript - 在单个页面上动态创建完整的一对多关系

Question

我是 MVC 新手，但在过去几个月里读了很多书，并且在尝试在页面上动态构建一对多关系时遇到了一些问题。我已经设置了逻辑，并且可以通过多个页面加载来完成此操作，但我希望表单更加动态，所以我不确定执行此操作的正确方法是什么。

出于测试目的，我缩小了我的模型，只是为了看看在将其应用到我的项目之前是否可以获得我想要的交互，我所拥有的是这样的:

从我的数据库生成模型。

public partial class TestIncident
{
    public TestIncident()
    {
        this.TestGeoKits = new HashSet<TestGeoKit>();
    }

    public int RecordID { get; set; }
    public string OwnerFirstName { get; set; }
    public string OwnerMiddleName { get; set; }
    public string OwnerLastName { get; set; }

    public virtual ICollection<TestGeoKit> TestGeoKits { get; set; }
}

RecordID 是我上面类(class)的 PKey

public partial class TestGeoKit
{
    public int RecordID { get; set; }
    public int KitID { get; set; }
    public bool SubmittedForTestingFlag { get; set; }
    public string SubmissionLocation{ get; set; }
    public Nullable<System.DateTime> SubmissionDate { get; set; }
    public bool Processed { get; set; }
    public Nullable<System.DateTime> ReturnDate { get; set; }
    public string Notes { get; set; }

    public virtual TestIncident TestIncident { get; set; }
}

RecordID 是我的 FKey 关系，KitID 是我的此表的 PKey。

现在，我需要设置一个创建 View ，其中包含与 TestIncident 关联的表单，并且可以选择单击“添加”按钮来填充包含与同一页面上的 TestGeoKits 关联的表单的部分，而不是在回发和重定向(我目前的方式)。我尝试将多个帖子中的信息拼凑在一起来完成此任务，但无论如何我遇到了一堆问题甚至更多问题..

从逻辑上讲，我认为，由于 MVC 使用 Entity Framework ，因此在我的 Create TestIncident 页面上，我可以有一个 ADD 按钮，每次单击时都会以部分 View 的形式将 TestGeoKit 表单添加到页面。然后，当您单击“提交”时，整个对象将传递回 Controller ，将事件的所有值绑定(bind)到数据库，获取 RecordID 的下一个标识值(在 sql 中设置)，并将该信息用于 TestGeoKits 的 ICollection在TestIncident中建立外键关系并保存所有数据。

如何构建这样的动态页面？我读过很多文章，玩过 Ajax 命令和 jQuery 表单控件，玩过 LazyLoading/EagerLoading，我想我现在已经把它复杂化了。

我当前正在运行一个不太动态的版本，当您提交 TestIncident 表单时， Controller 中调用的方法会在保存后检查 GeoKitCollectedFlag，如果其为 true，则将您重定向到单独的页面以填写 GeoKit形式。但是，我的理想形式是将这两个操作组合在一个页面上。

任何帮助将不胜感激!

Answer 1

实际上，关键在于字段的命名。只要您遵循其约定，MVC 实际上非常有能力根据表单中发布的数据构建复杂的对象图。对于可枚举属性，请确保您的字段名称遵循 ListProperty[N].Property 的形式。因此，对于您的 TestGeoKit 实例，您应该具有像 TestGeoKits[0].RecordID 这样的输入名称。

为了确保 Razor 生成的输入发生这种情况，您需要使用 for 而不是 foreach 迭代现有实例:

@for (var i = 0; i < Model.TestGeoKits.Count(); i++)
{
    @Html.HiddenFor(m => m.TestGeoKits[i].RecordID)
    <!-- etc -->
}

动态添加新记录显然需要 JavaScript 解决方案。有很多不同的方法可以处理这个问题。您可以通过 JavaScript 手动构建 HTML。您可以向某些操作提交 AJAX 请求，该操作将返回所有字段的 HTML。您可以使用 JavaScript 复制页面上现有记录的 HTML，并用正确的索引替换 id 和 name 属性。

就我个人而言，我建议使用一个专门用于处理数据绑定(bind)和模板的框架。 Knockout 是一种流行的选择，但您可以使用 Backbone、Angular 等。简单来说，这个想法是您想要的东西，您只需将数据对象添加到 JavaScript 中的数组，并让它生成适当的 HTML为您提供正确的名称索引等。尝试手动跟上这有点像一场噩梦。