Brian Brian Brian Brian - 1 month ago 11
ASP.NET (C#) Question

CheckBoxList using ASP.NET MVC 5

I'm having trouble understanding how to retrieve data from my Device table in my database to a CheckBoxList.

I believe I have the Models, ViewModel and Database setup properly but I'm just not sure what to do next. For now, I would simple like to learn how to retrieve the data from my table to a CheckBoxList.

Customer Model

public class Customer
{
public int CustId { get; set; }
public string CustDisplayName { get; set; }
public string CustFirstName { get; set; }
public string CustLastName { get; set; }
public string CustCompanyName { get; set; }
public string CustAddress { get; set; }
public string CustPhoneNumber { get; set; }
public string CustMobileNumber { get; set; }
public string CustEmailAddress { get; set; }

public int StId { get; set; }
public State State { get; set; }
}


State Model

public class State
{
public int StId { get; set; }
public string StAbbr { get; set; }

public List<Customer> Customers { get; set; }
}


Device Model

public class Device
{
public int DevId { get; set; }
public string DevType { get; set; }
public bool isChecked { get; set; }
}


CustomerDevice Model

public class CustomerDevice
{
public int CustId { get; set; }
public int DevId { get; set; }

public Customer Customer { get; set; }
public Device Device { get; set; }
}


CustomerViewModel

public class CustomerFormViewModel
{
public int CustId { get; set; }

[Required(ErrorMessage = "Enter Display Name")]
[Display(Name = "Display Name")]
[StringLength(100)]
public string CustDisplayName { get; set; }

[Display(Name = "First Name")]
[StringLength(50)]
public string CustFirstName { get; set; }

[Display(Name = "Last Name")]
[StringLength(50)]
public string CustLastName { get; set; }

[Display(Name = "Company Name")]
[StringLength(50)]
public string CustCompanyName { get; set; }

[Display(Name = "Phone Number")]
[DataType(DataType.PhoneNumber)]
[StringLength(12)]
public string CustPhoneNumber { get; set; }

[Display(Name = "Mobile Number")]
[DataType(DataType.PhoneNumber)]
[StringLength(12)]
public string CustMobileNumber { get; set; }

[Display(Name = "Email Address")]
[DataType(DataType.EmailAddress)]
[StringLength(320)]
public string CustEmailAddress { get; set; }

[Required(ErrorMessage = "Enter Address")]
[Display(Name = "Address")]
[StringLength(100)]
public string CustAddress { get; set; }

[Required(ErrorMessage = "Select State")]
[Display(Name = "State")]
public int StId { get; set; }

public IEnumerable<State> States { get; set; }
}


CustomerController

public class CustomerController : Controller
{
private CoreWebAppContext _context;

public CustomerController(CoreWebAppContext context)
{
_context = context;
}


// GET: /<controller>/
public IActionResult Index()
{
return View(_context.Customers.ToList());
}


public ActionResult Create()
{
var states = _context.States.ToList();
var viewModel = new CustomerFormViewModel
{
States = states
};

return View(viewModel);
}


[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(CustomerFormViewModel vm)
{
if (ModelState.IsValid)
{
var customer = new Customer();
{
customer.CustDisplayName = vm.CustDisplayName;
customer.CustFirstName = vm.CustFirstName;
customer.CustLastName = vm.CustLastName;
customer.CustCompanyName = vm.CustCompanyName;
customer.CustAddress = vm.CustAddress;
customer.CustPhoneNumber = vm.CustPhoneNumber;
customer.CustMobileNumber = vm.CustMobileNumber;
customer.CustEmailAddress = vm.CustEmailAddress;
customer.StId = vm.StId;
}
_context.Customers.Add(customer);
_context.SaveChanges();
return RedirectToAction("Index");
}

else
{
vm.States = _context.States.ToList();
return View(vm);
}
}


public ActionResult Edit(int? id)
{
if (id == null)
{
return NotFound();
}

var customervm = new CustomerFormViewModel();
{
Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == id);

if (customer == null)
{
return NotFound();
}

customervm.CustId = customer.CustId;
customervm.CustDisplayName = customer.CustDisplayName;
customervm.CustFirstName = customer.CustFirstName;
customervm.CustLastName = customer.CustLastName;
customervm.CustCompanyName = customer.CustCompanyName;
customervm.CustAddress = customer.CustAddress;
customervm.CustPhoneNumber = customer.CustPhoneNumber;
customervm.CustMobileNumber = customer.CustMobileNumber;
customervm.CustEmailAddress = customer.CustEmailAddress;

// Retrieve list of States
var states = _context.States.ToList();
customervm.States = states;

// Set the selected state
customervm.StId = customer.StId;
}
return View(customervm);
}


[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(CustomerFormViewModel vmEdit)
{
if (ModelState.IsValid)
{
Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == vmEdit.CustId);

if (customer == null)
{
return NotFound();
}

customer.CustDisplayName = vmEdit.CustDisplayName;
customer.CustFirstName = vmEdit.CustFirstName;
customer.CustLastName = vmEdit.CustLastName;
customer.CustCompanyName = vmEdit.CustCompanyName;
customer.CustAddress = vmEdit.CustAddress;
customer.CustPhoneNumber = vmEdit.CustPhoneNumber;
customer.CustMobileNumber = vmEdit.CustMobileNumber;
customer.CustEmailAddress = vmEdit.CustEmailAddress;
customer.StId = vmEdit.StId;

_context.Entry(customer).State = EntityState.Modified;
_context.SaveChanges();
return RedirectToAction("Index");
}
return View(vmEdit);
}


}


Create View

<div class="form-group">
@Html.LabelFor(c => c.CustDisplayName)
@Html.TextBoxFor(c => c.CustDisplayName, new { @class = "form-control" })
@Html.ValidationMessageFor(c => c.CustDisplayName)
</div>

<div class="form-group">
@Html.LabelFor(c => c.CustFirstName)
@Html.TextBoxFor(c => c.CustFirstName, new { @class = "form-control" })
</div>

<div class="form-group">
@Html.LabelFor(c => c.CustLastName)
@Html.TextBoxFor(c => c.CustLastName, new { @class = "form-control" })
</div>

<div class="form-group">
@Html.LabelFor(c => c.CustCompanyName)
@Html.TextBoxFor(c => c.CustCompanyName, new { @class = "form-control" })
</div>

<div class="form-group">
@Html.LabelFor(c => c.CustAddress)
@Html.TextBoxFor(c => c.CustAddress, new { @class = "form-control" })
@Html.ValidationMessageFor(c => c.CustAddress)
</div>

<div class="form-group">
@Html.LabelFor(c => c.CustPhoneNumber)
@Html.TextBoxFor(c => c.CustPhoneNumber, new { @class = "form-control" })
@Html.ValidationMessageFor(c => c.CustPhoneNumber)
</div>

<div class="form-group">
@Html.LabelFor(c => c.CustMobileNumber)
@Html.TextBoxFor(c => c.CustMobileNumber, new { @class = "form-control" })
@Html.ValidationMessageFor(c => c.CustMobileNumber)
</div>

<div class="form-group">
@Html.LabelFor(c => c.CustEmailAddress)
@Html.TextBoxFor(c => c.CustEmailAddress, new { @class = "form-control" })
@Html.ValidationMessageFor(c => c.CustEmailAddress)
</div>

<div class="form-group">
@Html.LabelFor(s => s.StId)
@Html.DropDownListFor(s => s.StId, new SelectList(Model.States, "StId", "StAbbr"), "", new { @class = "form-control" })
@Html.ValidationMessageFor(s => s.StId)
</div>

<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>

Answer

Make another ViewModel class called IndexViewModel and put this on it:

public class IndexViewModel
{
    public List<Customer> Customers { get; set; }
    public List<Device> Devices { get; set; }
}

Here is your controller Action. Return the new IndexViewModel instead:

// GET: /<controller>/
public IActionResult Index()
{
    return View(_context.Customers.ToList());
}

to

// GET: /<controller>/
public IActionResult Index()
{
    var model = new IndexViewModel();
    model.Customers = _context.Customers.ToList();
    model.Devices = _context.Devices.ToList();

    return View(model);
}

In your view, simply iterate the Device list:

@{
    for(int i = 0; i < Model.Devices.Count(); i++)
    {
        var checkboxAttributes = Model.Devices[i].isChecked == true ?
            (object) new { @class = "checkbox", @checked = "checked" } :
            (object) new { @class = "checkbox" };

        @Html.CheckBoxFor(model => model.Devices[i].DevType, checkboxAttributes)
        @Html.LabelFor(model => model.Devices[i].DevType, new { @class = "label" })
    }
}

Update 1

I'm sorry about the previous one but this is the correct version: It uses bootstrap style for the checkbox:

@{
    for (int i = 0; i < Model.Devices.Count(); i++)
    {
        <div class="checkbox">
            <label>
                @Html.HiddenFor(model => model.Devices[i].DevId)
                @Html.CheckBoxFor(model => model.Devices[i].isChecked)
                @Html.DisplayFor(model => model.Devices[i].DevType)
                @Html.HiddenFor(model => model.Devices[i].DevType)
            </label>
        </div>
    }
}