.NET MVC 5 Check Box list from database using View Model

Question

I need to populate a checkbox list of equipment on a form for users to request equipment. The data for the list is stored in a table named 'Equipment'. I am working with EF 6 database first. The view is strongly typed and will write to an 'Orders' table. I am stuck on how to use a View Model and not ViewBag to populate the check box list for the form. I have looked at MikesDotNetting, the Rachel Lappel post about view models and several others and it's not making sense to me.
Code below:

public class Equipment
{
    public int Id { get; set; }
    public string Description { get; set; }
    public string Method { get; set; }
    public bool Checked { get; set; }
}

public class Order
{
public int id{ get; set; }    
public string Contact_Name { get; set; }
public List<Equipment>Equipments { get; set; }
public string Notes { get; set; }

}

Controller:

     [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Contact_Name,Equipment,Notes")] Order order)
    {
       if (ModelState.IsValid)
        {
            db.Orders.Add(order);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(order);
    }

View

 @model CheckBoxList.Models.Order

    @{
    ViewBag.Title = "Create";
    }

    <h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Order</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 <div class="form-group">
            @Html.LabelFor(model => model.Contact_Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Contact_Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Contact_Name, "", new { @class = "text-danger" })
            </div>
        </div>
 <div class="form-group">
           //checkbox list populated here
        </div>


 <div class="form-group">
            @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
            </div>
        </div>

score 0 · Answer 1 · edited Dec 18 '17 at 16:47

0

Make a for loop in your list and generate a checkbox for every item in it.

<div class="form-group">
     @for (int i = 0; i < Model.Equipments.Count(); i++)
     {     
        @Html.CheckBoxFor(x => x.Equipments[i].Checked)
        @Model.Equipments[i].Description 

        //If you need to hide any values and get them in your post
        @Html.HiddenFor(x => x.Equipments[i].Id)
        @Html.HiddenFor(x => x.Equipments[i].Method)
    }
</div>

edited Dec 18 '17 at 16:47

halfer

19,824
17
99
186

answered Aug 11 '16 at 17:26

LP. Gonçalves

454
8
26

I seem to not be populating the Model.Equipments correctly because I am receiving a NullReferenceException Error. I updated the original code above. The list for Equipments is now supposed to be calling the Equipment class instead of the View Model – Doc Robison Aug 11 '16 at 18:49

score 0 · Answer 2 · edited May 23 '17 at 12:22

See this answer for how to do it How to bind checkbox values to a list of ints?

That example uses Guid's as PK's but that can be easily replaced with int's.

I'm going to assume your Equipment class is your EF entity.

So you are creating your order page so let's start with the CreateOrderViewModel

public class CreateOrderViewModel
{  
public string Contact_Name { get; set; }
public Dictionary<int, string> AllEquipment{ get; set; }
public int[] SelectedEquipment { get;set; }
public string Notes { get; set; }
}

Populate AllEquipment with just the id and the name of the piece of equipment. This is the complete list of equipment that will be needed to show all the equipment checkboxes with the value of the id of the equipment.

Something like

var viewModel = new CreateOrderViewModel {
 AllEquipment = context.Equipment.ToDictionary(e => e.Id, e.Description); 
}

SelectedEquipment is the list of equipment with checkboxes checked. So when you post this information back, the SelectedEquipment property will have a list of all the id's that need to be attached to the order.

When you create the order just iterate through the list and add them to the Equipment list in your Order entity.

Is the dictionary(context.Equipment.ToDictionary(e => e.Id, e.Description); ) populated in the VM? — Doc Robison, Aug 11 '16 at 20:46

.NET MVC 5 Check Box list from database using View Model

2 Answers2