ASP.NET MVC 5を使用したCheckBoxList

Question

データベース内のデバイステーブルからCheckBoxListにデータを取得する方法を理解できません。

私はモデル、ViewModel、データベースの設定が適切だと思いますが、次に何をすべきか分かりません。今のところ、テーブルからCheckBoxListにデータを取得する方法を簡単に学びたいと思います。

カスタマー・モデル

public class Customer 
{ 
    public int CustId { get; set; } 
    public string CustDisplayName { get; set; } 
    public string CustFirstName { get; set; } 
    public string CustLastName { get; set; } 
    public string CustCompanyName { get; set; } 
    public string CustAddress { get; set; } 
    public string CustPhoneNumber { get; set; } 
    public string CustMobileNumber { get; set; } 
    public string CustEmailAddress { get; set; } 

    public int StId { get; set; } 
    public State State { get; set; } 
} 

状態モデル

public class State 
{ 
    public int StId { get; set; } 
    public string StAbbr { get; set; } 

    public List<Customer> Customers { get; set; } 
} 

デバイスモデル

public class Device 
{ 
    public int DevId { get; set; } 
    public string DevType { get; set; } 
    public bool isChecked { get; set; } 
} 

CustomerDeviceモデル

public class CustomerDevice 
{ 
    public int CustId { get; set; } 
    public int DevId { get; set; } 

    public Customer Customer { get; set; } 
    public Device Device { get; set; } 
} 

CustomerViewModel

public class CustomerFormViewModel 
{ 
    public int CustId { get; set; } 

    [Required(ErrorMessage = "Enter Display Name")] 
    [Display(Name = "Display Name")] 
    [StringLength(100)] 
    public string CustDisplayName { get; set; } 

    [Display(Name = "First Name")] 
    [StringLength(50)] 
    public string CustFirstName { get; set; } 

    [Display(Name = "Last Name")] 
    [StringLength(50)] 
    public string CustLastName { get; set; } 

    [Display(Name = "Company Name")] 
    [StringLength(50)] 
    public string CustCompanyName { get; set; } 

    [Display(Name = "Phone Number")] 
    [DataType(DataType.PhoneNumber)] 
    [StringLength(12)] 
    public string CustPhoneNumber { get; set; } 

    [Display(Name = "Mobile Number")] 
    [DataType(DataType.PhoneNumber)] 
    [StringLength(12)] 
    public string CustMobileNumber { get; set; } 

    [Display(Name = "Email Address")] 
    [DataType(DataType.EmailAddress)] 
    [StringLength(320)] 
    public string CustEmailAddress { get; set; } 

    [Required(ErrorMessage = "Enter Address")] 
    [Display(Name = "Address")] 
    [StringLength(100)] 
    public string CustAddress { get; set; } 

    [Required(ErrorMessage = "Select State")] 
    [Display(Name = "State")] 
    public int StId { get; set; } 

    public IEnumerable<State> States { get; set; } 
} 

CustomerController

public class CustomerController : Controller 
{ 
    private CoreWebAppContext _context; 

    public CustomerController(CoreWebAppContext context) 
    { 
     _context = context; 
    } 


    // GET: /<controller>/ 
    public IActionResult Index() 
    { 
     return View(_context.Customers.ToList()); 
    } 


    public ActionResult Create() 
    { 
     var states = _context.States.ToList(); 
     var viewModel = new CustomerFormViewModel 
     { 
      States = states 
     }; 

     return View(viewModel); 
    } 


    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create(CustomerFormViewModel vm) 
    { 
     if (ModelState.IsValid) 
     { 
      var customer = new Customer(); 
      { 
       customer.CustDisplayName = vm.CustDisplayName; 
       customer.CustFirstName = vm.CustFirstName; 
       customer.CustLastName = vm.CustLastName; 
       customer.CustCompanyName = vm.CustCompanyName; 
       customer.CustAddress = vm.CustAddress; 
       customer.CustPhoneNumber = vm.CustPhoneNumber; 
       customer.CustMobileNumber = vm.CustMobileNumber; 
       customer.CustEmailAddress = vm.CustEmailAddress; 
       customer.StId = vm.StId; 
      } 
      _context.Customers.Add(customer); 
      _context.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 

     else 
     { 
      vm.States = _context.States.ToList(); 
      return View(vm); 
     } 
    } 


    public ActionResult Edit(int? id) 
    { 
     if (id == null) 
     { 
      return NotFound(); 
     } 

     var customervm = new CustomerFormViewModel(); 
     { 
      Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == id); 

      if (customer == null) 
      { 
       return NotFound(); 
      } 

      customervm.CustId = customer.CustId; 
      customervm.CustDisplayName = customer.CustDisplayName; 
      customervm.CustFirstName = customer.CustFirstName; 
      customervm.CustLastName = customer.CustLastName; 
      customervm.CustCompanyName = customer.CustCompanyName; 
      customervm.CustAddress = customer.CustAddress; 
      customervm.CustPhoneNumber = customer.CustPhoneNumber; 
      customervm.CustMobileNumber = customer.CustMobileNumber; 
      customervm.CustEmailAddress = customer.CustEmailAddress; 

      // Retrieve list of States 
      var states = _context.States.ToList(); 
      customervm.States = states; 

      // Set the selected state 
      customervm.StId = customer.StId; 
     } 
     return View(customervm); 
    } 


    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Edit(CustomerFormViewModel vmEdit) 
    { 
     if (ModelState.IsValid) 
     { 
      Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == vmEdit.CustId); 

      if (customer == null) 
      { 
       return NotFound(); 
      } 

      customer.CustDisplayName = vmEdit.CustDisplayName; 
      customer.CustFirstName = vmEdit.CustFirstName; 
      customer.CustLastName = vmEdit.CustLastName; 
      customer.CustCompanyName = vmEdit.CustCompanyName; 
      customer.CustAddress = vmEdit.CustAddress; 
      customer.CustPhoneNumber = vmEdit.CustPhoneNumber; 
      customer.CustMobileNumber = vmEdit.CustMobileNumber; 
      customer.CustEmailAddress = vmEdit.CustEmailAddress; 
      customer.StId = vmEdit.StId; 

      _context.Entry(customer).State = EntityState.Modified; 
      _context.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 
     return View(vmEdit); 
    } 


} 

ビュー

を作成します。 10

<div class="form-group"> 
    @Html.LabelFor(c => c.CustDisplayName) 
    @Html.TextBoxFor(c => c.CustDisplayName, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(c => c.CustDisplayName) 
</div> 

<div class="form-group"> 
    @Html.LabelFor(c => c.CustFirstName) 
    @Html.TextBoxFor(c => c.CustFirstName, new { @class = "form-control" }) 
</div> 

<div class="form-group"> 
    @Html.LabelFor(c => c.CustLastName) 
    @Html.TextBoxFor(c => c.CustLastName, new { @class = "form-control" }) 
</div> 

<div class="form-group"> 
    @Html.LabelFor(c => c.CustCompanyName) 
    @Html.TextBoxFor(c => c.CustCompanyName, new { @class = "form-control" }) 
</div> 

<div class="form-group"> 
    @Html.LabelFor(c => c.CustAddress) 
    @Html.TextBoxFor(c => c.CustAddress, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(c => c.CustAddress) 
</div> 

<div class="form-group"> 
    @Html.LabelFor(c => c.CustPhoneNumber) 
    @Html.TextBoxFor(c => c.CustPhoneNumber, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(c => c.CustPhoneNumber) 
</div> 

<div class="form-group"> 
    @Html.LabelFor(c => c.CustMobileNumber) 
    @Html.TextBoxFor(c => c.CustMobileNumber, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(c => c.CustMobileNumber) 
</div> 

<div class="form-group"> 
    @Html.LabelFor(c => c.CustEmailAddress) 
    @Html.TextBoxFor(c => c.CustEmailAddress, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(c => c.CustEmailAddress) 
</div> 

<div class="form-group"> 
    @Html.LabelFor(s => s.StId) 
    @Html.DropDownListFor(s => s.StId, new SelectList(Model.States, "StId", "StAbbr"), "", new { @class = "form-control" }) 
    @Html.ValidationMessageFor(s => s.StId) 
</div> 

<div class="form-group"> 
    <button type="submit" class="btn btn-primary">Submit</button> 
</div> 

Answer 1

IndexViewModelと呼ばれる別のViewModelクラスを作成し、その上でこれを置く：

public class IndexViewModel 
{ 
    public List<Customer> Customers { get; set; } 
    public List<Device> Devices { get; set; } 
} 

ここにあなたのコントローラのアクションです。代わりに新しいIndexViewModelを返します：

// GET: /<controller>/ 
public IActionResult Index() 
{ 
    return View(_context.Customers.ToList()); 
} 

あなたのビューで

// GET: /<controller>/ 
public IActionResult Index() 
{ 
    var model = new IndexViewModel(); 
    model.Customers = _context.Customers.ToList(); 
    model.Devices = _context.Devices.ToList(); 

    return View(model); 
} 

に、単にデバイスリストを反復：

@{ 
    for(int i = 0; i < Model.Devices.Count(); i++) 
    { 
     var checkboxAttributes = Model.Devices[i].isChecked == true ? 
      (object) new { @class = "checkbox", @checked = "checked" } : 
      (object) new { @class = "checkbox" }; 

     @Html.CheckBoxFor(model => model.Devices[i].DevType, checkboxAttributes) 
     @Html.LabelFor(model => model.Devices[i].DevType, new { @class = "label" }) 
    } 
} 

アップデート1

私は以前のものについて申し訳ありませんが、これは正しいバージョンである：それは、チェックボックスのためのブートストラップスタイルを使用しています。

@{ 
    for (int i = 0; i < Model.Devices.Count(); i++) 
    { 
     <div class="checkbox"> 
      <label> 
       @Html.HiddenFor(model => model.Devices[i].DevId) 
       @Html.CheckBoxFor(model => model.Devices[i].isChecked) 
       @Html.DisplayFor(model => model.Devices[i].DevType) 
       @Html.HiddenFor(model => model.Devices[i].DevType) 
      </label> 
     </div> 
    } 
} 

Answer 2

あなたが異なるモデルのためにそれを再利用できるようにするには、このようなものを使用することができます。

CheckboxViewModel：

public class CheckboxViewModel 
{ 
    public int Id { get; set; } 

    public string Name { get; set; } 

    public bool Checked { get; set; } 
} 

拡張方法：例を使用

public static IEnumerable<CheckboxViewModel> CreateCheckboxList<T>(this List<T> entities, Func<T, object> value, Func<T, object> text, Func<T, bool> isChecked) 
    { 
     return entities.Select(x => new CheckboxViewModel 
     { 
      Id = (int)value(x), 
      Name = text(x).ToString(), 
      Checked = isChecked(x) 
     }); 
    } 

：

result = devices.CreateCheckboxList(x => x.Id, x => x.Name, x => selectedDevices.Contains(x.Id)).ToList(); 

@for (var deviceIndex = 0; deviceIndex < Model.Devices.Count(); deviceIndex ++) 
          { 
           <div class="form-group"> 
            <div class="checkbox checkbox-primary"> 
             @Html.HiddenFor(model => model.Devices[deviceIndex ].Id) 
             @Html.CheckBoxFor(model => model.Devices[deviceIndex ].Checked) 
             @Html.LabelFor(model => model.Devices[deviceIndex ].Checked, Model.Devices[deviceIndex ].Name) 
            </div> 
           </div> 
          }