无法选中 ASP.NET Core MVC 视图中的复选框

Question

我目前正在开发一个 ASP.NET Core 3.1 MVC 应用程序。我需要创建一个动态复选框菜单，它显示可用的水果并将选定的水果存储到另一个数据源中。

我的问题是，我无法检查/单击视图上的任何复选框并将所选项目发送回我的控制器。

我的 FruitsViewModel 看起来像这样：

public class FruitsViewModel
{
    public IList<string> SelectedFruits { get; set; } = new List<string>();

    public IList<SelectListItem> AvailableFruits { get; set; } = new List<SelectListItem>();
}

我的 FruitsController 看起来像这样：

public class FruitsController : Controller
{
    [HttpGet]
    public async Task<IActionResult> Index()
    {
        var viewModel = new FruitsViewModel { 
                                                  AvailableFruits = GetAvailableFruits()
                                                };

        return View(viewModel);
    }

    [HttpPost]
    public async Task<IActionResult> Index(FruitsViewModel fruitsViewModel)
    {
        // ... process data
    }

    private IList<SelectListItem> GetAvailableFruits()
    {   
        // the values are originally retrieved from a DB, here I use just sample data   
        return new List<SelectListItem>
                       {
                           new SelectListItem {Text = "Apple", Value = "Apple"},
                           new SelectListItem {Text = "Pear", Value = "Pear"},
                           new SelectListItem {Text = "Banana", Value = "Banana"},
                           new SelectListItem {Text = "Orange", Value = "Orange"},
                       };
    }
}

我的 FruitsController Index.cshtml 视图如下所示：

<form method="post">
    <div class="form-group row">
        <!-- Fruits -->
        <label class="col-4">Fruits</label>
        <div class="col-8">
            @foreach (SelectListItem availableFruit in Model.AvailableFruits)
            {
                <div class="custom-control custom-checkbox custom-control-inline">
                    <label class="custom-control-label">
                        <input type="checkbox"
                               class="custom-control-input"
                               name="SelectedFruits"
                               value="@availableFruit.Value"
                               @if (Model.SelectedFruits.Contains(availableFruit.Value))
                               {
                                   @:checked
                               }/>
                        @availableFruit.Text
                    </label>
                </div>
            }
        </div>
    </div>
    <div class="form-group row">
        <div class="offset-4 col-8">
            <button name="submit" type="submit" class="btn btn-info">Send</button>
        </div>
    </div>
</form>

您知道如何检查在 ASP.NET Core MVC 视图上动态加载的复选框并将选定的值相应地发送回控制器吗？

如果可能我不想使用 jQuery。

我已经关注了这个类似的post。

Answer 1

我无法选中/单击视图上的任何复选框并将所选项目发送回我的控制器。

您可以尝试修改如下代码以动态生成checkbox(es) with Bootstrap styles。

<div class="col-8">
    @foreach (SelectListItem availableFruit in Model.AvailableFruits)
    {
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" id="@availableFruit.Value"
                    class="custom-control-input"
                    name="SelectedFruits"
                    value="@availableFruit.Value"
                    @if (Model.SelectedFruits.Contains(availableFruit.Value)) { @: checked
                    } />
            <label class="custom-control-label" for="@availableFruit.Value">@availableFruit.Text</label>
        </div>
                
    }
</div>

测试结果

选中的选项

在action方法中获取检查值