如何在 MVC 中实现 CheckBoxList？
How can I implement CheckBoxList in MVC?
我必须为一个模型实现 30 多个复选框，但我不确定实现它的正确方法。目前我正在这样做。
我的模型 class 有超过 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
中一一绑定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));
}
对此有何想法。这是实现多复选框的正确方法吗？如果不是那具体怎么做。
走错了。
1) 为设施添加新的 table。列 = ID，名称
2) 为 Activity 添加新的 table。列 = ID，名称
3) 为场所的设施记录添加新的 table。列 = ID、VenueID、FacilityID
4) 为 Venue 的 Activity 记录添加新的 table。列 = ID、VenueID、ActivityID
5) 在场地的设施视图中添加新的 2 个局部视图，并 activity 加载复选框。循环模型绑定复选框。
6) 从设施和 activity 部分视图中获取数据并将数据保存到 Venue 的设施和 Activity tables.
编辑以通过屏幕截图清楚地解释。
1) 为设施
创建新的table
2) 为 Activity
创建新的 table
3) 为 VenueFacility（场所的设施记录）创建新的 table。您需要在 table、地点 table 和 table 服务器中的设施 table 之间建立关系。
4) 为地点Activity 创建新的table（地点的activity 条记录）。您需要在 table、场地 table 和 activity table SQL 服务器中创建关系。
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) 为 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>
页面的外观
结果
已编辑实体 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; }
}
地点Facility.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; }
}
地点Activity.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 更改为列表。对 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);
}
我必须为一个模型实现 30 多个复选框，但我不确定实现它的正确方法。目前我正在这样做。
我的模型 class 有超过 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));
}
对此有何想法。这是实现多复选框的正确方法吗？如果不是那具体怎么做。
走错了。
1) 为设施添加新的 table。列 = ID，名称
2) 为 Activity 添加新的 table。列 = ID，名称
3) 为场所的设施记录添加新的 table。列 = ID、VenueID、FacilityID
4) 为 Venue 的 Activity 记录添加新的 table。列 = ID、VenueID、ActivityID
5) 在场地的设施视图中添加新的 2 个局部视图，并 activity 加载复选框。循环模型绑定复选框。
6) 从设施和 activity 部分视图中获取数据并将数据保存到 Venue 的设施和 Activity tables.
编辑以通过屏幕截图清楚地解释。
1) 为设施
创建新的table2) 为 Activity
创建新的 table3) 为 VenueFacility（场所的设施记录）创建新的 table。您需要在 table、地点 table 和 table 服务器中的设施 table 之间建立关系。
4) 为地点Activity 创建新的table（地点的activity 条记录）。您需要在 table、场地 table 和 activity table SQL 服务器中创建关系。
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) 为 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>
页面的外观
结果
已编辑实体 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; }
}
地点Facility.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; }
}
地点Activity.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 更改为列表。对 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);
}