将项目添加到 asp.net mvc 列表框客户端？答案

【问题标题】：Add item to asp.net mvc listbox client side?将项目添加到 asp.net mvc 列表框客户端？
【发布时间】：2011-11-09 00:46:23
【问题描述】：

我有一组存储在视图模型中的电子邮件，我将其绑定到视图中的 ListBox。

@Html.TextBox("txtAddEmail") <img id="btnAddEmail">Add Email</img>
@Html.ListBox("Emails", Model.Emails)
@Html.ValidationMessageFor(m => m.Emails)

我希望用户能够通过在 txtAddEmail 文本框中输入电子邮件来添加电子邮件，然后单击添加图像按钮，然后将电子邮件添加到客户端的列表框中。然后，当表单发布时，电子邮件集合中会显示新闻电子邮件。我已经让添加该项目的客户端代码正常工作，但在发布时，电子邮件集合不包含新电子邮件。

var emailToAdd = $("#txtAddEmail").val();

 $('#Emails').
     append($("<option></option>").
     attr("value", emailToAdd).
     text(emailToAdd));

关于如何做到这一点的任何想法？

更新

我能够使用这个将一项添加到 ViewModel 中的值

 @Html.ListBox("EmailAdded", Model.Emails)

添加到客户端的电子邮件显示在 EmailAdded 字符串值中，但是如何将其添加到集合中？我决定尝试直接绑定到电子邮件列表。添加到客户端上的列表框后，视图模型不显示添加的电子邮件。有什么想法吗？

 @Html.ListBoxFor(model => model.Emails, new MultiSelectList(Model.Emails, "Id",    "Address"));
 @Html.ValidationMessageFor(m => m.Emails)

更新

找到了我正在寻找的答案here

【问题讨论】：

如何创建一个隐藏的文本框，当您将电子邮件添加到列表框时，它也会被添加到隐藏的文本框中，然后用逗号分隔它们，例如 email1、email2、email4 ,.... 并且该集合将在隐藏的文本字段中获取所有电子邮件地址，您可以为每封电子邮件拆分电子邮件字符串。集合通常从列表中获取选定字段的值

【解决方案1】：

我很确定要让列表框中的项目显示在帖子的表单集合中，它们需要被选中。所以为了解决这个问题，我通常有一个 jQuery 函数来在提交表单时选择项目。

有这样的提交按钮：

<input type="submit" onclick="SelectEmails();" />

还有这样的功能：

function SelectEmails()
{
    $("#Emails option").attr("selected", "selected");
}

【讨论】：

【解决方案2】：

尝试将您的 jQuery 元素更改为：

append($("<option selected='selected'></option>")

确保您还拥有：

<select multiple="multiple">

【讨论】：

这可以为 viewmodel 属性添加一个值，但是有没有办法将项目添加到集合中？
因为它是一个多选，你应该得到一个回传的电子邮件地址数组，它们应该自动重新分配给 Model.Emails。如果这没有发生，您能否检查 Request 变量和 ValuesProvider 集合以确保它们正在被提交（或使用 Firebug 查看提交的表单变量）。我认为你看到的是重新绑定的问题，因为 MVC 总是在 POST 上绑定到它的 ModelState，而不是你的模型。因此，您可以在回发中更改模型，但不会影响绑定的内容。用一个普通的字符串值试试看...
因此，您需要将选定的值绑定到一个属性，例如 SelectedEmails，但从完整列表 AllEmails 中填充下拉列表。每次用户添加电子邮件时，您都必须手动将其添加到 AllEmails 列表中。希望这是有道理的。想象一下，您有一个名为 Email 的属性，它的 ListBox 填充了一个 Emails 集合。 Html.ListBoxFor(m => m.Email, Model.AllEmails)。您需要实现相同但使用多选。