Как я могу реализовать CheckBoxList в MVC? - PullRequest
Новая
       24

Как я могу реализовать CheckBoxList в MVC?

2 голосов
/ 03 февраля 2020

Мне нужно установить более 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));
}

Есть мысли по этому поводу. Является ли это основным способом реализации Multiple Checkbox. Если нет, то как именно это можно сделать.

1 Ответ

2 голосов
/ 03 февраля 2020

Неправильный путь.

1) Добавить новую таблицу для объекта. Столбцы = ID, Имя

2) Добавить новую таблицу для Activity. Столбцы = ID, Имя

3) Добавить новую таблицу для записей Объекта объекта. Столбцы = ID, VenueID, FacilityID

4) Добавить новую таблицу для записей об активности объекта. Столбцы = ID, VenueID, ActivityID

5) Добавьте новые 2 частичных представления в представлении объекта для объекта и действия, чтобы загрузить флажки. Флажок L oop модели для привязки.

6) Получить данные из частичных представлений объекта и деятельности и сохранить данные в таблицах объекта и деятельности объекта.

РЕДАКТИРОВАНИЕ для ясного объяснения со скриншотами .

1) Создать новую таблицу для объекта

enter image description here

enter image description here

2) Создать новую таблицу для действия

enter image description here enter image description here

3) Создать новую таблицу для VenueFacility (записи объекта за место). Необходимо создать взаимосвязь между этой таблицей, таблицей мест проведения и таблицей объектов в SQL Server.

enter image description here

4) Создать новую таблицу для VenueActivity (действие записи для места проведения). Вам необходимо создать связь между этой таблицей, таблицей мест проведения и таблицей действий на сервере SQL.

enter image description here

5) Перезапустите команду Scaffold-DbContext. в tools> nuget> консоль диспетчера пакетов, чтобы обновить ваши модели и dbcontext.

6) Добавить новое частичное представление для Facility.

_FacilityList.cs html

@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.cs html

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

Как страница выглядит как

enter image description here

Результат

enter image description here

РЕДАКТИРОВАНИЕ 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; }
}

ОБНОВЛЕНО 5 ФЕВРАЛЯ 2020

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

enter image description here

enter image description here

...