如何在MVC中实现CheckBoxList？

Question

我必须为模型实现30个以上的复选框，但我不确定实现该模型的正确方法。目前，我正在这样做。

我有Model类，其中有30多个复选框，但此处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;}
    }
}

我在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));
}

对此有任何想法。这是实现多个复选框的最核心方法。如果没有，那怎么办呢？

Answer 1

错误的方式。

1）添加新的设施表。列= ID，名称

2）为活动添加新表。列= ID，名称

3）为Venue的设施记录添加新表格。列= ID，VenueID，FacilityID

4）为场所的活动记录添加新表。列= ID，VenueID，ActivityID

5）在场所视图中添加新的2个局部视图，以加载设施和活动复选框。循环模型以绑定复选框。

6）从设施和活动局部视图中获取数据，并将数据保存到Venue的设施和活动表中。

编辑以提供清晰的截图说明。

1）为设施创建新表

2）为活动创建新表

3）为VenueFacility创建新表（场地的设施记录）。您需要在SQL Server中的此表，场所表和设施表之间创建关系。

4）为VenueActivity创建新表（场所的活动记录）。您需要在SQL Server中的此表，场所表和活动表之间创建关系。

5）在工具> nuget>程序包管理器控制台中重新运行Scaffold-DbContext命令以更新模型和dbcontext。

6）为设施添加新的局部视图。

_ 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）为活动添加新的局部视图。

_ 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）在您的场所页面中使用此代码

<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>

页面外观如何

结果

实体类的编辑2

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; }
}

2020年2月5日更新

Venue.cs。将HashSet更改为List。对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);
    }