How to bind List<X> to ViewModel - asp.net-mvc

Question

I have 2 ViewModels - User and Reminder.
public class UserViewModel
{
[Required]
[Display(Name = "Your name")]
public string Name { get; set; }
[Display(Name = "Your reminders")]
public IEnumerable<ReminderViewModel> Reminders { get; set; }
}
public class ReminderViewModel
{
[Required]
[Display(Name = "Time")]
public TimeSpan Time { get; set; }
[Required]
[Display(Name = "Frequency of repair")]
public string Frequency { get; set; }
}
My add-view:
#using (Html.BeginForm("Add", "Test"))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#ViewBag.Status
<ul style="list-style: none;">
<li>
#Html.LabelFor(m => m.Name)
#Html.TextBoxFor(m => m.Name)
#Html.ValidationMessageFor(m => m.Name)
</li>
???????????? // Reminders
<li>
<input type="submit" value="Add" /></li>
</ul>
}
My question is: how can I bind this IEnumerable<ReminderViewModel> in my View?
I want to achieve situation, where user can put some reminders (selecting Time and Frequency) many times, before send click.
How can I do this?

Answer 1

You need to do the following:
First add a reference to the model in the top of the view like this:
#model UserViewModel
Including your namespace.
Change your collection to user a list so it can be indexed and model binded like this:
#for (var i = 0; i < Model.Reminders.Count(); i++)
{
#Html.LabelFor(m => Model.Reminders[i].Frequency)
#Html.TextBoxFor(m => Model.Reminders[i].Frequency)
#Html.ValidationMessageFor(m => Model.Reminders[i].Frequency)
#Html.LabelFor(m => Model.Reminders[i].Time)
#Html.TextBoxFor(m => Model.Reminders[i].Time)
#Html.ValidationMessageFor(m => Model.Reminders[i].Time)
}
This in your model:
[Display(Name = "Your reminders")]
public List<ReminderViewModel> Reminders { get; set; }
You also need to change your Begin form to set it to post like this:
#using (Html.BeginForm("Add", "Test", FormMethod.Post))
Finally you need to implement the post like this taking the model as a parameter:
[HttpPost]
public ActionResult Add(UserViewModel model)
{
// Do processing here
return View(model);
}

Answer 2

First, you need to change it to List<ReminderViewModel>. In order to get proper model binding you must be able to select the objects using an index value.
Then in your view:
#for (var i = 0; i < Model.Reminders.Count(); i++)
{
#Html.LabelFor(m => m.Reminders[i].Time)
#Html.TextBoxFor(m => m.Reminders[i].Time)
#Html.ValidationMessageFor(m => m.Reminders[i].Time)
#Html.LabelFor(m => m.Reminders[i].Frequency)
#Html.TextBoxFor(m => m.Reminders[i].Frequency)
#Html.ValidationMessageFor(m => m.Reminders[i].Frequency)
}
If Reminders is initially null, you'll need to initialize it with one or more ReminderViewModels in your action:
var model = new UserViewModel {
Reminders = new List<ReminderViewModel> {
new ReminderViewModel()
}
}
return View(model);
Or you can do this in your UserViewModel's constructor:
public class UserViewModel
{
public UserViewModel()
{
Reminders = new List<ReminderViewModel> {
new ReminderViewModel();
}
}
}