jquery - MVC 3 - 为子对象渲染附加编辑器模板

Question

我正在尝试创建一个表单，允许用户创建一个具有 0 个多个子对象的实体，主要对象是一个 Lead ，它有 0-多个 Beneficiary 和 Payer 对象。三者之间的关系如下:

Lead has many Beneficiaries (one to many)
Lead has many Payers (many to many) joined through LeadsPayers

在我的潜在客户 View 模型的编辑器中，我有一个循环，可以为附加到潜在客户的每个受益人和付款人生成编辑器，但我希望能够有一个按钮，可以动态地将另一个受益人或付款人添加到潜在客户中，并且使用编辑器模板，这样我的 javascript 代码中就不会出现重复的 html。

当我的表单发布到 Controller 时，我正在将所有内容绑定(bind)到Lead，我只是不知道如何重用编辑器模板代码来生成与当前表单兼容的html，以前有人这样做过吗？必须有一种比 ajax 按钮更好的方法来呈现 html

Answer 1

This helped me get on the right track但这并不完全是我想要做的，因为这在 MVC 中似乎不容易支持，这里是我的工作方法，让这一切都能与 Controller 中的模型绑定(bind)一起使用。

我的最终目标

使用适当的 html 动态地将子对象添加到表单中，以便它们在传递给控件方法时自动绑定(bind)到父对象，这意味着我需要像这样的 HTML

<input name='Lead_Beneficiaries_1__{Property}' id=... />

而不是像这样(这就是博客文章的结果)

<input name='Beneficiary__{Property}' />

发布到 Controller 时不会自动绑定(bind)到父级。

解决方案

我没有使用 Ajax 从 Controller 渲染编辑器模板 html，而是在加载表单时自动渲染一个编辑器模板，然后可以根据用户需要加载更多编辑器模板。 JQuery 代码

$("#addBeneficiary").click(function(e) {
    e.preventDefault();
    var beneficiary = $(".beneficiary:last").clone();
    var count = parseInt(beneficiary.find("input:first").attr("id").match(/\d+/), 10);
    beneficiary.find("input").each(function(indx, element) { 
        var name = $(element).attr('name').replace(count, count+1),
            id   = $(element).attr('id').replace(count, count+1);
        $(element).attr('name', name);
        $(element).attr('id', id);
        $(element).val(''); 
    });
    $("#beneficiaries").append(beneficiary);
});

我只是将我的编辑器模板包装在一个 div 中，这样就可以很容易地从 jquery 中获取它，克隆它，清空输入的值并增加每个元素的计数器，这样当发布时我得到了一个子实体的集合我的 parent ，而无需在方法中显式捕获它们或从 formcollection 字典中提取它们。

虽然这可能不是最好的解决方案，但它以我预期的方式完成了工作，并且我最终没有为编辑器模板复制 HTML。此外，如果由于父对象有多个子对象而导致表单错误，它们会由我的表单代码自动呈现，并且不会因为客户端添加而丢失任何内容。