使用jQuery在客户端完全操作模型列表

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

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

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

公共类用户
{
公共Guid Id{get；set；}
公共字符串用户名{get；set；}
...
}
公共类编辑模型
{
公共列表用户{get；set；}
...
}

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

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

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

我现在一直关注的几个具体问题是：

如果我使用razor在服务器上生成用户列表，那么我必须在jQuery中复制该代码以添加/删除用户，而不必每次都返回服务器。重复是一件可怕的事情。我可以对用户列表项和ajax使用partial，但这无法实现在添加和删除用户时不多次往返服务器的目的。我还考虑不使用任何服务器端代码来生成“可见”列表，并在页面加载时在客户端代码中完成所有操作，但我仍然需要使用服务器端代码将数据以某种方式放入视图中，客户端代码可以从中获取数据

如何使装订工作？以MVC期望的方式生成表单值是否可以接受？我想简单地将所有用户Id填充到一个字符串中，然后在帖子中，用CSV列表填充一个表单值，并在服务器端拆分它。好吧，这看起来很俗气，但这是我的全部

但更一般地说，我正在寻找一个好的“食谱”如何做这样的事情。我相信这是通过许多不同的方式实现的。我只是很难找到它们是什么。非常感谢您的建议。

如果您的“可见列表”没有持久化到数据库等，而是由用户根据需要简单地构建，则不需要在服务器和客户端之间复制代码

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

如果将对象列表作为数组传递，则默认的MVC模型绑定器可以将对象列表绑定到方法参数。表单元素名称的格式应为

argumentName[i]。PropertyName

其中

argumentName

对应于方法签名中的数组参数，

i

对应于列表中对象的索引，PropertyName对应于对象的属性

例如，如果只需要将ID数组传递给控制器方法，客户端代码可能会生成一个隐藏元素数组，如下所示：

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

[HttpPost]
公共操作结果提交表单（用户[]）
{
//做事
}

我不知道您可以将名称格式化为那样的格式，这样绑定就可以了。谢谢你的提示。为了构建列表，我发现我可以使用

MvcHtmlString.Create（newJavaScriptSerializer（）.Serialize（model.Users））

，将其放入ViewBag中，然后从javascript访问它。越来越近了！您是否将整个用户表返回到浏览器，然后使用jQuery从typeahead中筛选它？听起来太过分了，除非你有一个非常小的用户表。在任何情况下，如果您想要在客户端上传递JSON数据以进行处理，我认为有更好的方法可以做到这一点。这看起来确实有点粗俗。也许我会找到更好的办法。谢谢你，保罗。