Question

I am trying to create a form which has a TextAreaFor email addresses. There are email addresses stored in a database. I want these stored addresses to be the default value of the field, and then allow the user to add or remove addresses from the list as they see fit.

My viewModel;

public List<string> EmailAddresses { get; set; }

My View:

<%= Html.TextAreaFor(m => m.EmailAddresses) %>

(this is wrong, as it displays System.Collections.Generic.List1[System.String]` in the input field rather than each item in the list.

I know I can iterate through the list and display a separate textbox for each element in the list, but I want each element to be listed in a single textArea. (similar to an actual email client in that you can enter multiple addresses separated by a comma or semi) Is this possible?
I’ve searched, but have not found this scenario, which seems odd, because I think it must not be uncommon.
I’m thinking the solution may be to write a custom editorTemplate, but I’m hoping for a simpler solution.

Answer 1

You could extend you view model like so.

View Model
public class PeopleViewModel {

    public List<string> EmailAddress { get; set; }

    public string EmaiAddressString {
        get {
            string rValue = string.Empty;
            EmailAddress.ForEach(x => rValue += (x + "\n" ));
            return rValue;
        }
        set {
            var newValue = value.Split(new string[] { Environment.NewLine }, StringSplitOptions.None).ToList<string>();
            EmailAddress = newValue;
        }

    }
}

View

@model SigKoExample.Models.PeopleViewModel
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
@if (IsPost) {
    <h2>New Values</h2>
    @Html.TextArea("EmailAddresses", Model.EmaiAddressString.ToString())
} else {
    using (Html.BeginForm()) { 
        @Html.TextAreaFor(m => m.EmaiAddressString)
        @Html.HiddenFor(m => m.EmailAddress)
        <input type="submit" value="Save" />                               
    }
}

Controller

public ActionResult Index() {
    PeopleViewModel model = new PeopleViewModel {
        EmailAddress = new List<string> {
            "ValueOne",
            "ValueTwo"
        }
    };
    return View(model);
}

[HttpPost]
public ActionResult Index(PeopleViewModel model) {
    return View(model);
}