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