Array of checkboxes in form - asp.net-mvc-3

Question

I have a viewmodel to use in the Create view:
ViewModel
public class ReportViewModel
{
public int ID { get; set; }
[Display(Name = "Platform")]
public string Platform { get; set; }
[Display(Name = "Logo")]
public HttpPostedFileBase Logo { get; set; }
}
Create View
#model HPRWT.ViewModels.ReportViewModel
#using (Html.BeginForm("Create", "Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="editor-label">
#Html.LabelFor(model => model.Platform )
#Html.EditorFor(model => model.Platform )
#Html.ValidationMessageFor(model => model.Platform)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Logo)
<input type="file" id="Logo" name="Logo" />
</div>
}
This work perfect. But now I need an array of checkboxes (7x24) to get free hours (7 day, 24 hours). I have an array of ids (i need a defined id because I use jquery). In Create view:
#for(int i = 1; i < labels.Length; i++)
{
<tr>
<td>#labels[i][0]</td>#for(int j = 1; j < labels[i].Length; j++)
{
<td><div><input type="checkbox" id="#ids[i][j]" /><label for="#ids[i][j]"></label></div></td>
}
My ids are like R02C00 (R of row + numer of row with 2 digits + C (column) + number of column (2 digits). I generate them with:
for (int i = 1; i < 8; i++)
for (int j = 1; j < 25; j++)
ids[i][j] = "R" + i.ToString("00") + "C" + (j-1).ToString("00");
This also works well. Now my problem is how I get the checkboxes values.
Controller
[HttpPost]
public ActionResult Create(ReportViewModel rvm)
{
if (ModelState.IsValid)
{
rdb.Reports.Add(CreateReport(rvm));
rdb.SaveChanges();
return RedirectToAction("Index");
}
return View(rvm);
}
// Create a report from a reportviewmodel
private Report CreateReport(ReportViewModel rvm)
{
Report report = new Report();
// Platform
string platform = rvm.Platform;
report.Platform = platform ;
// Logo
HttpPostedFileBase inputFile = rvm.InputFile; // Some code to get the path
return report;
}
How can I get the checkboxes values? If I add in reportviewmodel a bool[][], is there is any way to do a #Html.Checkbox? (If I have to change ids names in jquery, I don´t mind, is not mandatory to have a id like R01C01... only the ids in jquery be the same as html)

Answer 1

Why don't you use a view model?
public class FreeHourViewModel
{
public string Label { get; set; }
public bool Selected { get; set; }
}
public class ReportViewModel
{
public ReportViewModel()
{
this.FreeHours = Enumerable
.Range(1, 7)
.Select(day =>
Enumerable.Range(1, 24).Select(hour => new FreeHourViewModel
{
Label = string.Format("day: {0}, hour: {1}", day, hour)
}
).ToArray()
).ToArray();
}
public int ID { get; set; }
[Display(Name = "Platform")]
public string Platform { get; set; }
[Display(Name = "Logo")]
public HttpPostedFileBase Logo { get; set; }
public FreeHourViewModel[][] FreeHours { get; set; }
}
and then:
#for (int i = 0; i < Model.FreeHours.Length; i++)
{
for (int j = 0; j < Model.FreeHours[i].Length; j++)
{
#Html.LabelFor(x => x.FreeHours[i][j].Selected, Model.FreeHours[i][j].Label)
#Html.CheckBoxFor(x => x.FreeHours[i][j].Selected)
}
}
And when the form is submitted, since you have used a real view model, model binding will work as expected. Also you don't need any jQuery to generate those checkboxes. Strongly typed helpers such as Html.CheckBoxFor is the way to go.

Answer 2

How about having a strongly-typed view in relation to your checkboxes?
public class ReportViewModel
{
public ReportViewModel()
{
Days = new List<Day>();
}
public int ID { get; set; }
[Display(Name = "Platform")]
public string Platform { get; set; }
[Display(Name = "Logo")]
public HttpPostedFileBase Logo { get; set; }
public IList<Day> Days { get; set; }
}
public class Hour
{
public int Id { get; set; }
public bool Selected { get; set; }
}
public class Day
{
public Day()
{
Hours = new List<Hour>();
}
public int Id { get; set; }
public bool Selected { get; set; }
public IList<Hour> Hours { get; set; }
}
You then return a view like this:
foreach (var d in Enum.GetValues(typeof(DayOfWeek)))
{
var day = new Day { Id = (int)d };
for (var i = 0; i < 25; i++)
{
day.Hours.Add(new Hour { Id = i });
}
model.Days.Add(day);
}
return View(model);
And add this to your view:
for (var i = 0; i < 7; i++)
{
<div id="days">
<ul>
#for (var j = 0; j < 24; j++)
{
<li>#Html.CheckBoxFor(m=>Model.Days[i].Hours[j].Selected)</li>
}
</ul>
</div>
}
Now when you receive your input you have an array of bool values where you have a sort of Ids, that is 0-6 for days and 0-23 for hours. You can easily determine what hour in what particular day was selected.
Of course, you have to fill in the missing pieces with my suggestion like showing the labels for each checkboxes.