asp.net mvc. Bind ViewModel to items in a collection - asp.net-mvc

Question

I can bind to properties in the ViewModel fairly simply like so:
<%=Html.RadioButtonFor(m => m.isCool, true%>cool<br/>
<%=Html.RadioButtonFor(m => m.isCool, false)%>not cool<br/>
but what if I wanted to bind to collection items within the ViewModel. I'm not sure if it's possible. Here's what I have:
My ViewModel:
namespace MvcApplication3.ViewModels
{
public class cpApprovalViewModel
{
// My internal class
public class PersonImage
{
public bool isApproved { get; set; }
public bool isProFilePic { get; set; }
public string uriId { get; set; }
public string urlPath { get; set; }
}
public string displayName { get; set; }
public bool isCool { get; set; }
public List<PersonImage> personImages { get; set; }
}
}
My Controller:
public class cpApprovalController : Controller
{
//
// GET: /cpApproval/
public ActionResult Index()
{
cpApprovalViewModel viewModel = new cpApprovalViewModel();
viewModel.displayName = "jon doe";
viewModel.personImages = new List<cpApprovalViewModel.PersonImage>()
{
new cpApprovalViewModel.PersonImage(){isApproved = false, uriId = "1", isProFilePic = false, urlPath="someImagePath1.jpg" },
new cpApprovalViewModel.PersonImage(){isApproved = false, uriId = "2", isProFilePic = false, urlPath="someImagePath2.jpg" },
new cpApprovalViewModel.PersonImage(){isApproved = false, uriId = "3", isProFilePic = false, urlPath="someImagePath2.jpg" }
};
return View(viewModel);
}
//cpApprovalViewModel viewModel
[HttpPost]
public void formReceiver(cpApprovalViewModel viewModel)
{
// This is where I'd like to get access to the changed personImages (approved/disapproved )
}
}
My View:
<%: Model.displayName %><br /><br />
<% using (Html.BeginForm("formReceiver", "cpApproval", FormMethod.Post )){ %>
<% foreach (var anImage in Model.personImages){ %>
<%: Html.RadioButtonFor(model => model.personImages.Single(i => i.uriId == anImage.uriId), true, new { id = anImage.uriId })%> Approve <br />
<%: Html.RadioButtonFor(model => model.personImages.Single(i => i.uriId == anImage.uriId), false, new { id = anImage.uriId })%> Deny <br />
<hr />
<% } %>
<input type="submit" value="Save" />
<%} %>
I'm getting the following error:
Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions.
Am I trying to do something impossible here? I hope this makes sense. Thanks.

Answer 1

Yes - what you're trying to do is possible.
I think your problem is that you're trying to get the relevant image again using .Single, when you already have the item in the foreach loop.
Try changing:
<%: Html.RadioButtonFor(model => model.personImages.Single(i => i.uriId == anImage.uriId), true, new { id = anImage.uriId })%> Approve <br />
To:
<%: Html.RadioButtonFor(model => anImage, true, new { id = anImage.uriId })%> Approve <br />
More info on model-binding to a Collection here.