Multiple same fields from one ViewModel. MVC3 - asp.net-mvc-3

Question

I want to be able to add multiple (zero or more) phones to my contact via it's ViewModel.
I'd write this:
public class ContactsViewModel
{
public string Skype { get; set; }
public string Email { get; set; }
public string Addr { get; set; }
public IEnumerable<PhoneViewModel> Phones { get; set; }
}
public class PhoneViewModel
{
public string Number { get; set; }
}
But, as expected, it does not work.
What is the best way to organize this?
EDIT. Here is my views:
#model RentSite.Web.UI.Models.ContactsViewModel
#{
ViewBag.Title = "AddContact";
}
<h2>AddContact</h2>
#using (Html.BeginForm())
{
#Html.EditorForModel(Model)
#Html.Action("AddPhone")
<input type="submit" value="Add"/>
}
and
#model RentSite.Web.UI.Models.PhoneViewModel
#Html.EditorForModel(Model)
Here is my Controller:
public ActionResult Index()
{
return View(unitOfWork.contactRepository.All().ToList());
}
[Authorize]
public ActionResult AddContact()
{
return this.View();
}
[Authorize]
public ActionResult AddPhone()
{
return PartialView();
}
[Authorize]
[HttpPost]
public ActionResult AddContact(ContactsViewModel contact, IEnumerable<PhoneViewModel> phones)
{
contact.Phones = phones;
return RedirectToAction("AddContact");
}

Answer 1

The rendering of multiple phone number will work as you expect. I'm guessing that you are having an issue "posting" multiple phone numbers.
Well the solution depends on what you exactly want to achieve. Here are two examples:
Solution 1: The user can only post one phone number at the time. Render all the existing phone numbers, and create a form based on PhoneViewModel.
Solution 2: The user can add many phone numbers and post them all at the same time. You need some Javascript here. Implement client side functionality allowing the user to "add" a phone number field. Using javascript, uniquely name each input field (i.e phone1, phone2, ... phonen). Use the same pattern server side to get all the phone numbers from the POST data.
There are more solutions. Please specify what you exactly would like to achieve.
Edit: Sample code for Solution 2
[HttpPost]
public ActionResult PostPhoneNumbers(FormCollection formCollection)
{
var phoneNumbers =
from k in formCollection.AllKeys
where k.StartsWith("phoneNumber")
select formCollection[k];
// validate and process the phone numbers
return View("your view");
}
enter code here