使用ASP.NET MVC 5的CheckBoxList

Question

我无法理解如何从数据库中的Device表中检索数据到CheckBoxList。

我相信我已正确设置了Models，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 Model

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


}

创建视图

<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

我对前一个感到抱歉，但这是正确的版本：它使用bootstrap样式作为复选框：

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