title: How to Implement an edit view for a list of objects in MVC 4 in its most elegant way?
body: <p>I've got a <em>"ContactInfo"</em> view in which I want to get a list of different phone numbers of different types from the user. The user should be able to add, edit and delete numbers and specify their types. <i>At least one mobile number is required.</i></p>
  
  <p>I've tried different approaches and I've come to a dead-end at some point. I thought describing the whole scenario and asking for a solution would be more efficient than to ask specific bugs. I'd be thankful for your answers.</p>
  
  <p>Here is my phone class:</p>
  
  <pre><code>public partial class Phone
  {
      public int Id { get; set; }
      public int UserId { get; set; }
      public string Number { get; set; }
      public PhoneNumberType Type { get; set; }
  
      public virtual User User { get; set; }
  }
  </code></pre>
  
  <p>and here is the phone type enum:</p>
  
  <pre><code>public enum PhoneNumberType
  {
      None,
      Mobile,
      Home,
      Work
  }
  </code></pre>
  
  <p>This is the model for the view (I have also included a list that populates phone types from the enum to fill the type combobox):</p>
  
  <pre><code>public class ContactInfoModel
  {
  
      public int Id { get; set; }
  
      public string EmailAddress { get; set; }
      public string Country { get; set; }
      public string Province { get; set; }
      public string County { get; set; }
      public string City { get; set; }
      public string Address { get; set; }
      public ICollection&lt;Phone&gt; Phones { get; set; }
  
      private IEnumerable&lt;EnumMember&gt; _phoneTypes;
      public IEnumerable&lt;EnumMember&gt; PhoneTypes
      {
          get
          {
              if (this._phoneTypes == null)
              {
                  _phoneTypes = EnumUtility.GetEnumMembers(typeof(PhoneNumberType));
              }
              return _phoneTypes;
          }
      }
  }
  </code></pre>
  
  <p>And finally this is the view:</p>
  
  <pre><code>@model Jobeteria.Models.JobSeekers.ContactInfoModel
  
  @{ViewBag.Title = "Contact Information";}
  
  @using (Html.BeginForm()){
  @Html.AntiForgeryToken()
  &lt;header class="pages-header"&gt;
      &lt;div class="pages-header-bg text-background"&gt;&lt;/div&gt;
      &lt;hgroup&gt;
          &lt;h1&gt;@ViewBag.Title&lt;/h1&gt;
      &lt;/hgroup&gt;
  &lt;/header&gt;
  &lt;div class="pages-wide-column"&gt;
      &lt;div class="pages-body-bg text-background"&gt;&lt;/div&gt;
      &lt;div class="pages-content-marginer"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Contact Information&lt;/legend&gt;
              &lt;ol&gt;
                  &lt;li&gt;
                      @*view to manipulate phone numbers*@
                  &lt;/li&gt;
                  &lt;li&gt;
                      @Html.LabelFor(model =&gt; model.EmailAddress)
                      @Html.EditorFor(model =&gt; model.EmailAddress)
                      &lt;br/&gt;
                      @Html.ValidationMessageFor(model =&gt; model.EmailAddress)
                  &lt;/li&gt;
                  &lt;li&gt;
                      @Html.LabelFor(model =&gt; model.Country)
                      @Html.EditorFor(model =&gt; model.Country)
                      &lt;br/&gt;
                      @Html.ValidationMessageFor(model =&gt; model.Country)
                  &lt;/li&gt;
                  &lt;li&gt;
                      @Html.LabelFor(model =&gt; model.Province)
                      @Html.EditorFor(model =&gt; model.Province)
                      &lt;br/&gt;
                      @Html.ValidationMessageFor(model =&gt; model.Province)
                  &lt;/li&gt;
                  &lt;li&gt;
                      @Html.LabelFor(model =&gt; model.County)
                      @Html.EditorFor(model =&gt; model.County)
                      &lt;br/&gt;
                      @Html.ValidationMessageFor(model =&gt; model.County)
                  &lt;/li&gt;
                  &lt;li&gt;
                      @Html.LabelFor(model =&gt; model.City)
                      @Html.EditorFor(model =&gt; model.City)
                      &lt;br/&gt;
                      @Html.ValidationMessageFor(model =&gt; model.City)
                  &lt;/li&gt;
                  &lt;li&gt;
                      @Html.LabelFor(model =&gt; model.Address)
                      @Html.TextAreaFor(model =&gt; model.Address)
                      &lt;br/&gt;
                      @Html.ValidationMessageFor(model =&gt; model.Address)
                  &lt;/li&gt;
                  &lt;li class="horizontal-field"&gt;
                      &lt;input type="submit" value="SAVE" /&gt;
                      &lt;input type="reset" value="Cancel" onclick="javascript: history.back(1);"/&gt;
                  &lt;/li&gt;
              &lt;/ol&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
  &lt;/div&gt;}
  </code></pre>