Question

我正在编辑一个复杂类型（AddEventViewModel）。

AddEventViewModel有一个名为EventContactList的EventContacts列表。

我有一个EventContactList的编辑器模板，它为模型中列表中的每个项目显示一个EventContact。

初始化AddEventViewModel时，它会向列表中添加一个空的EventContact，这意味着在Add Event页面上会显示一个Editor Template。

在编辑器模板下，我有一个名为“添加其他活动联系人”的按钮。

我希望此按钮更新AddEventViewModel，向EventContactList添加一个额外的EventContact，以便页面在页面上显示新的空EventContact的第二个编辑模板。

我不想导致验证规则触发，我不希望用户丢失其滚动位置，这可能吗？

Answer 1

您可能还会考虑使用javascript克隆现有字段，清除值并更改名称。这样会更快，因为您不必向服务器请求新的联系人。

示例：

<ul id="ContactsList">
 <li class="newContact">Contact Name :
     <input type="text" name="Contacts[0].Name" value="">
         Email : 
     <input type="text" name="Contacts[0].Email" value="">
 </li>
</ul>

jQuery添加到你的按钮点击事件，如：

var cln = $('li.newContact:first').clone();
var nextNumber = $("#ContactsList li").size();
$("input[name]", cln).each(function() {
    var nm = $(this).attr("name").replace(/\[(.+)\]/g, "[" + nextNumber + "]") ;
    $(this).prop("name", nm);
    $(this).val("");
});
cln.appendTo('#ContactsList');

Answer 2

感谢您的回答，我花了很多时间研究使用敲除或手动编码javascript来实现所需结果的可能性，但是，对于一些如此微不足道的事情感觉很多工作。

我现在已经用最简单的方式解决了这个问题，首先我在表单中添加了一个按钮，它将使用AJAX添加一个新的编辑器模板。

@Ajax.ActionLink("Add additional contact",
                    "AddContact",
                    "Event",
                    new AjaxOptions()
                        {
                            HttpMethod = "GET",
                            InsertionMode = InsertionMode.InsertBefore,
                            UpdateTargetId = "contacts"
                        })

接下来，我将AddContact actionresult添加到视图中以返回部分视图结果（编辑模板）

public ActionResult AddContact()
{
    return PartialView("EditorTemplates/EventContactDto", new EventContactDto());
}

虽然这会将模板添加到页面中，但在提交表单时它不会将其添加到模型中（因为ID不正确，因此不会将其添加到列表中）。

要解决此问题，我使用了Steven Sandersons BeginCollectionItem Helper，可以从Nuget下载。

安装软件包后我需要做的就是将以下内容添加到编辑器模板中，以便使用MVC的约定来设置ID：

@using (Html.BeginCollectionItem("EventContactList"))
{
... the form ...
}

现在提交页面时，新联系人已准备好插入数据库中。

我希望这个答案可以帮助别人，并为他们节省我研究过的时间！

Answer 3

您是否只需要一个控制器来进行插入，以及一个ajax处理程序来将结果呈现给页面？

如果没有更多代码，很难确切地说你应该如何做到这一点。

您还可以使用knockout或backbone来“观察”变量并更新/添加模板HTML。然后你只需传入一个新的视图模型，然后当你得到一个（使用主键等）时，你在视图中渲染它。

.NET MVC /编辑复杂类型列表，使用AJAX添加其他编辑表单

3 个答案: