Return list <T> from view to controller in MVC 3

Question

I currently have a Tag object that is defined as follows:

 public class Tag { public string Name { get; set; } } 

Now this is a property of the Model collection, which I define as:

 public class MyModel { public string Name { get; set; } public IList<Tag> Tags { get; set; } } 

In my opinion, I have the following code:

 @using (Html.BeginForm()) { <div> @Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name) </div> <div> <!-- Here I'd like a collection of checkbox inputs, where the selected names get passed back to my controller via the IList<Tag> collection --> </div> <input type="submit" value="Submit" /> } 

How to return selected elements to my checkbox group (indicated in comments) through the IList collection of my model?

Answer 1

Use Editor Templates

If you have a check box, add another Proeprty to the Tag class to indicate whether it is selected or not.

 public class Tag { public string Name { get; set; } public bool IsSelected { set; get; } } 

Now from your GET action, you can set the list of tags in the Model Tags property and send it to the view.

 public ActionResult AddTag() { var vm = new MyModel(); //The below code is hardcoded for demo. you mat replace with DB data. vm.Tags.Add(new Tag { Name = "Test1" }); vm.Tags.Add(new Tag { Name = "Test2" }); return View(vm); } 

Now let's create an editor template, go to the View/YourControllerName and create a folder called EditorTemaplates and create a new view there with the same name as for the property type ( Tag.cshtml ).

Add this content to the new editor template.

 @model Tag <p> <b>@Model.Name</b> : @Html.CheckBoxFor(x => x.IsSelected) <br /> @Html.HiddenFor(x=>x.Name) </p> 

Now in the main view, call the editor template using the EditorFor Html Helper method.

 @model MyModel <h2>AddTag</h2> @using (Html.BeginForm()) { <div> @Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name) </div> <div> @Html.EditorFor(m=>m.Tags) </div> <input type="submit" value="Submit" /> } 

Now, when you submit the form, your model will have a collection of labels in which the selected checkboxes will have a true value for the IsSelected property.

  [HttpPost] public ActionResult AddTag(MyModel model) { if(ModelState.IsValid) { //Check for model.Tags collection and Each items IsSelected property value. //Save and Redirect(PRG pattern) } return View(model); } 

Like this

Answer 2

This is similar to what I did on the site I work for.

I used this extension @ Html.CheckBoxListFor ()

Hope this helps.

Answer 3

If you can add the bool IsChecked property to your tag model, you can simply use EditFor (or CheckBoxFor) in a loop. The trick is to use a for loop with an index (not foreach), so that you access the property through the main view model. Then the model block will do the rest for you so that your POST action receives MyModel with its IsChecked properties set to the correct states.

Models:

 public class Tag { public string Name { get; set; } public bool IsChecked { get; set; } } public class MyModel { public string Name { get; set; } public List<Tag> Tags { get; set; } } 

View:

 @model MyMvcApplication.Models.MyModel @using (Html.BeginForm()) { <div> @Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name) </div> <div> @for (int i = 0; i < Model.Tags.Count; i++) { @Html.DisplayFor(x => Model.Tags[i].Name) @Html.EditorFor(x => Model.Tags[i].IsChecked) } </div> <input type="submit" value="Submit" /> }