Question

请原谅我，如果这有点模糊，但我正在寻找有关如何完成这项任务的建议。假设我有一个模型中的用户列表：

public class User
{
    public Guid Id { get; set; }
    public string UserName { get; set; }
    ...
}

public class EditDocumentModel
{
    public List<User> Users { get; set; }
    ...
}

在视图中，有一个预先输入搜索框（jQuery代码）来查找用户，然后是“添加”按钮。该视图还显示当前附加到文档的用户列表，并且有用于删除它们的按钮。跳过此代码的详细信息，因为它与我的问题无关。

在用户列表中添加和删除用户时，我不想回发整个表单，而是希望将列表操作完全保留在客户端。我将处理“添加”和“删除”按钮的单击，并对正在显示的用户列表进行调整。

当表单发布回服务器时，我希望能够绑定到客户端在jQuery中创建的列表。

我现在坚持的几个具体问题是：

如果我使用razor在服务器上生成用户列表，那么我必须在jQuery中复制该代码以添加/删除用户，而无需每次都返回服务器。复制是一件可怕的事情。我可以使用部分用户列表项和ajax，但是这样做的目的是在添加和删除用户时不会多次往返服务器。我还考虑过没有任何服务器端代码来生成“可见”列表并在页面加载时在客户端代码中完成所有操作，但我仍然需要服务器端代码以某种方式将数据放入视图中客户端代码可以从中获取。
如何让绑定工作？尝试按照MVC期望他们回程的方式生成表单值是否可以接受？我想简单地将所有用户Id填充到字符串中并在帖子上，使用CSV列表填充表单值并在服务器端填充Split（）。那只是看起来很蠢，但这就是我得到的。

但更多的是，我正在寻找一个好的“食谱”，用于做这样的事情。我确信这是以多种不同方式完成的。我只是很难找到它们是什么。任何建议表示赞赏。

Answer 1

如果您的“可见列表”未持久保存到数据库等，但只是由用户根据需要构建，则无需在服务器和客户端之间复制代码。

我假设您正在使用AJAX调用从typeahead搜索框中检索匹配用户列表。您可以使用客户端代码来允许用户构建和编辑该列表的子集。该代码应在表单中生成元素，以便在用户提交时将相应的内容发布回服务器。

如果将对象列表作为数组传递，则默认MVC模型绑定器可以将对象列表绑定到方法参数。表单元素名称的格式应为argumentName[i].PropertyName，其中argumentName对应于方法签名中的数组参数，i对应于列表中对象的索引，PropertyName对应于属性你的对象

例如，如果您只需要将一组Ids传递给控制器方法，那么您的客户端代码可能会生成一系列隐藏元素，如下所示：

<form method="post" action="/Controller/SubmitForm">
    <input type="hidden" name="users[0].UserId" value="12345" />    
    <input type="hidden" name="users[1].UserId" value="12346" />    
    <input type="hidden" name="users[2].UserId" value="12347" />    
    <input type="hidden" name="users[3].UserId" value="12348" />
    <input type="submit" value="Submit" />
</form>

[HttpPost]
public ActionResult SubmitForm(User users[])
{
    //do stuff
}

完全在客户端w / jQuery上操作模型列表

1 个答案: