How can I implement CheckBoxList in MVC? - asp.net-core

Question

I have to implement more than 30 Checkboxes for a Model and I am not sure about the correct way to implement it. Currently I am doing it this way.
I have Model class with more that 30 checkboxes I am not including all of them here Venue.cs
using System;
using System.Collections.Generic;
namespace firstp.Models
{
public class Venue
{
public int Id { get; set; }
public string Name { get; set; }
public string Description {get;set;}
public string Category { get; set; }
public string Address { get; set; }
// Facilities
public bool AirCondition {get;set;}
public bool CableTV {get;set;}
public bool Computer {get;set;}
public bool DVD {get;set;}
public bool UseOfPool {get;set;}
public bool Parking {get;set;}
public bool SmokingAllowed {get;set;}
public bool Internet {get;set;}
public bool Parking {get;set;
public bool Heater {get;set;
public bool Lift {get;set;}
public bool CoffeePot {get;set;}
public bool DishWasher {get;set;}
//Activities
public bool Concerts {get;set;}
public bool LiveShow {get;set;}
public bool Party {get;set;}
public bool Swimming {get;set;}
public bool Wedding {get;set;}
public bool Birthday {get;set;}
}
}
I am binding all the Properties of Checkbox one by one in Create.cshtml
#model Venue
<form asp-action="Create" asp-controller="Owner" method="POST">
<input type="hidden" asp-for="Id"/>
<input type="text" asp-for="Name"/>
<input type="text" asp-for="Description"/>
<input type="text" asp-for="Category"/>
<input type="text" asp-for="Address"/>
<ul class="facilities">
<li class="checkbox"><input type="checkbox" asp-for="AirCondition">Air conditioning </li>
<li class="checkbox"><input type="checkbox" asp-for="CableTV"> Cable </li>
<li class="checkbox"><input type="checkbox" asp-for="Computer" >Computering </li>
<li class="checkbox"><input type="checkbox" asp-for="DVD"> DVD </li>
<li class="checkbox"><input type="checkbox" asp-for="UseOfPool" > Use Of Pool </li>
<li class="checkbox"><input type="checkbox" asp-for="Parking"> Parking </li>
<li class="checkbox"><input type="checkbox" asp-for="SmokingAllowed">SmokingAllowed </li>
<li class="checkbox"><input type="checkbox" asp-for="Internet"> Internet </li>
<li class="checkbox"><input type="checkbox" asp-for="Lift">Lift </li>
<li class="checkbox"><input type="checkbox" asp-for="CoffeePot"> CoffeePot </li>
<li class="checkbox"><input type="checkbox" asp-for="DishWasher"> DishWasher </li>
<li class="checkbox"><input type="checkbox" asp-for="Parking"> Parking</li>
<li class="checkbox"><input type="checkbox" asp-for="Heater"> Heater</li>
</ul>
<ul class="activities">
<li class="checkbox"><input type="checkbox" asp-for="Concerts"> Concerts > </li>
<li class="checkbox"><input type="checkbox" asp-for="LoveShow"> LiveShow </li>
<li class="checkbox"><input type="checkbox" asp-for="Swimming" > Swimming </li>
<li class="checkbox"><input type="checkbox" asp-for="Party"> Party </li>
<li class="checkbox"><input type="checkbox" asp-for="Wedding" > Wedding </li>
<li class="checkbox"><input type="checkbox" asp-for="Birthday"> Birthday </li>
</ul>
<input type="submit" value="Save">
</form>
VenueController.cs
public async Task<IActionResult> Create(Venue v){
_context.Venues.Add(v);
_context.SaveChanges();
return RedirectToAction(nameof(Index));
}
Any thoughts on this. Is this the corect way to implement Multiple Checkbox. If not then how exactly can it be done.

Answer 1

Wrong way.
1) Add new table for Facility. Columns = ID, Name
2) Add new table for Activity. Columns = ID, Name
3) Add new table for Venue's Facility records. Columns = ID, VenueID, FacilityID
4) Add new table for Venue's Activity records. Columns = ID, VenueID, ActivityID
5) Add new 2 partial views in venue's view for facility and activity to load checkboxes. Loop models to bind checkbox.
6) Get data from facility and activity partial views and save data into Venue's Facility and Activity tables.
EDITED for clear explanation with screenshots.
1) Create new table for Facility
2) Create new table for Activity
3) Create new table for VenueFacility (facility records for venue). You need to create relationship between this table, venue table and facility table in SQL Server.
4) Create new table for VenueActivity (activity records for venue). You need to create relationship between this table, venue table and activity table in SQL Server.
5) Re-run Scaffold-DbContext command in tools > nuget > package manager console to update your models and dbcontext.
6) Add new partial view for Facility.
_FacilityList.cshtml
#model List<TestBenchmark.Models.VenueFacility>
#{
var db = new TestContext();
var list = db.Facility.AsQueryable();
int i = 0;
foreach (var item in list)
{
<input type="hidden" asp-for="#Model[i].FacilityId" value="#item.Id" />
<input type="checkbox" asp-for="#Model[i].IsChecked" /> #item.Name
i++;
}
}
7) Add new partial view for Activity.
_ActivityList.cshtml
#model List<TestBenchmark.Models.VenueActivity>
#{
var db = new TestContext();
var list = db.Activity.AsQueryable();
int i = 0;
foreach (var item in list)
{
<input type="hidden" asp-for="#Model[i].ActivityId" value="#item.Id" />
<input type="checkbox" asp-for="#Model[i].IsChecked" /> #item.Name
i++;
}
}
8) Use this code in your venue page
<form method="post" asp-action="Index">
Venue Name: <input type="text" asp-for="Name" />
<br />
Facility<br />
<partial name="_FacilityList" for="#Model.VenueFacility" />
<br /><br />
Activity<br />
<partial name="_ActivityList" for="#Model.VenueActivity" />
<br />
<button>Save</button>
</form>
How page looks like
Result
EDITED 2 for entity classes
Venue.cs
public partial class Venue
{
public Venue()
{
VenueActivity = new HashSet<VenueActivity>();
VenueFacility = new HashSet<VenueFacility>();
}
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<VenueActivity> VenueActivity { get; set; }
public virtual ICollection<VenueFacility> VenueFacility { get; set; }
}
Facility.cs
public partial class Facility
{
public Facility()
{
VenueFacility = new HashSet<VenueFacility>();
}
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<VenueFacility> VenueFacility { get; set; }
}
Activity.cs
public partial class Activity
{
public Activity()
{
VenueActivity = new HashSet<VenueActivity>();
}
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<VenueActivity> VenueActivity { get; set; }
}
VenueFacility.cs
public partial class VenueFacility
{
public int Id { get; set; }
public int? VenueId { get; set; }
public int? FacilityId { get; set; }
public bool IsChecked { get; set; }
public virtual Facility Facility { get; set; }
public virtual Venue Venue { get; set; }
}
VenueActivity.cs
public partial class VenueActivity
{
public int Id { get; set; }
public int? VenueId { get; set; }
public int? ActivityId { get; set; }
public bool IsChecked { get; set; }
public virtual Activity Activity { get; set; }
public virtual Venue Venue { get; set; }
}
UPDATED ON 5 FEB 2020
Venue.cs. Change HashSet to List. Do same for VenueFacility.
public partial class Venue
{
public Venue()
{
VenueActivity = new List<VenueActivity>();
VenueFacility = new List<VenueFacility>();
}
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<VenueActivity> VenueActivity { get; set; }
public virtual ICollection<VenueFacility> VenueFacility { get; set; }
}
YourVenueController.cs
public IActionResult Index()
{
var db = new TestContext();
var list = db.Venue.Include(x => x.VenueActivity).Include(x => x.VenueFacility).FirstOrDefault();
return View(list);
}