如何在 MVC 中实现 CheckBoxList？

Question

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

我有超过 30 个复选框的 Model 类，我在这里不包括所有这些 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中一一绑定Checkbox的所有属性

@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) 为 Facility 添加新表。列 = ID、名称

2) 为 Activity 添加新表。列 = ID、名称

3) 为场地的设施记录添加新表。列 = ID、VenueID、FacilityID

4) 为场地的活动记录添加新表。列 = ID、VenueID、ActivityID

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

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

已编辑以通过屏幕截图进行清晰解释。

1) 为 Facility 创建新表

2) 为 Activity 创建新表

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

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

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

6) 为 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) 为 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) 在您的场地页面中使用此代码

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

页面的样子

结果

实体类的EDITED 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);
    }