asp.net-core - 如何在 MVC 中实现 CheckBoxList?
问题描述
我必须为模型实现 30 多个复选框,我不确定实现它的正确方法。目前我正在这样做。
我有超过 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) 为 Facility 添加新表。列 = ID、名称
2)为活动添加新表。列 = ID、名称
3) 为 Venue's Facility 记录添加新表。列 = ID、VenueID、FacilityID
4) 为场地的活动记录添加新表。列 = ID、VenueID、ActivityID
5) 在场地视图中添加新的 2 个局部视图,用于设施和活动以加载复选框。循环模型以绑定复选框。
6) 从设施和活动部分视图中获取数据,并将数据保存到 Venue 的设施和活动表中。
已编辑以通过屏幕截图进行清晰的解释。
1) 为 Facility 创建新表
2) 为活动创建新表
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 实体类
场地.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; }
}
设施.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; }
}
活动.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; }
}
场地设施.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 日更新
场地.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);
}
推荐阅读
- html - 网格中卡片的高度不是动态的
- python - 普通 python 中的类 Django 单元测试数据库
- html - 适用于 Bootstrap 3.0.3 但不适用于 3.3.7 的可折叠侧边栏
- php - strtotime(+1 个月) 和 12 月/明年的行为
- jquery - Angular 5 - 如何在使用 *ngFor 创建 HTML 元素时调用函数
- xml - 如何在 Notes 客户端中使用带有 XML 的 Dojo 数据网格
- windows - 使用 powershell 脚本/命令禁用表面自动旋转
- r - 样本(.)与计算的概率
- c++ - 如何在 C++ 中删除字符串中的表情符号
- concurrency - Perl6 制作一个可观察的计时器