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

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.