Question

I’ve got a collection of emails stored in a view model that I’m binding to a ListBox in a view.

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

I’d like to have the user be able to add emails by entering them into the txtAddEmail text box and click the add image button which would then add the email to the listbox on the client. Then when the form is posted have news emails show up in the emails collection. I’ve got the client code working that adds the item, but on post the emails collection doesn’t contain the new emails.

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

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

Any ideas on how to do this?

UPDATE

I was able to add one item to a value in the ViewModel using this

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

The email added on the client shows up in the EmailAdded string value, but how do I have it add to a collection? I decided to try binding directly to the list of emails. After adding to the listbox on the client the view model doesn’t show the added email. Any ideas?

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

UPDATE

Found the answer I was looking for here

Answer 1

Try changing your jQuery element to:

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

Make sure you also have:

<select multiple="multiple">