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

Question

I currently have an object Tag defined as follows:

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

Now, this is a collection property of a Model which I'm defining as:

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

In my view 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 do I return the selected items on my checkbox group (specified in comments) via the IList collection of my model?

Answer 1

Use Editor Templates

For having the Checkbox, Add another Proeprty to your Tag classs to specify 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 a List of Tags in your Model's Tags Property and sent 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 of the Property type ( Tag.cshtml ).

Add this content to the new editor template now.

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

Now in your Main View, Call your 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 Post the Form, Your Model will have the Tags Collection where the Selected Checkboxes will be having 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 something i have done in a site im working on.

I used this extension @Html.CheckBoxListFor()

Hope this helps.

Answer 3

If you can add a bool IsChecked property to your Tag model then you can just use EditorFor (or CheckBoxFor) in a loop. The trick is to use a for loop with indexer (not foreach) such that you access the property via the views main model. Then the modelbinder will do the rest for you so your POST action will receive MyModel with its Tags 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; }
}

The 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" />
}