復選框列表值未綁定到ASP.NET Core MVC中的View GET Request

Question

在我的ViewModel中，我有以下兩個列表（一個用於顯示表單中所有可用的類別，另一個用於僅由用戶選擇的類別值）：

public List<CategoryViewModel> Categories{ get; set; }
public List<string> SelectedCategoryValues { get; set; }

在我看來，我的一種形式具有以下內容：

@foreach (var category in Model.Categories) {
     <div class="checkbox">
          <label><input type="checkbox" name="SelectedCategoryValues" 
          value="@category.Value">@category.Name</label>
     </div>
}

提交表單時，模型綁定器正確綁定了SelectedCategoryValues列表。

但是，在加載頁面時，所選復選框不會自動選中。

以下代碼在我的“編輯GET操作”中：

    var vm = new ProductEditViewModel()
    {
        Id = product.Id,
        Name = product.Name,
        Categories = new List<CategoryViewModel>()
        {
            new CategoryViewModel() { Name = "Category 1", Value = "category1" },
            new CategoryViewModel() { Name = "Category 2", Value = "category2" },
            new CategoryViewModel() { Name = "Category 3", Value = "category3" }
        },
        SelectedCategoryValues = productCategories.Select(c => c.Value).ToList()
    };

    return View(vm);

Answer 1

您需要在bool IsSelected{get;set;}包含bool IsSelected{get;set;} CategoryViewModel並在控制器中分配值。

var vm = new ProductEditViewModel()
{
    Id = product.Id,
    Name = product.Name,
    Categories = new List<CategoryViewModel>()
    {
        new CategoryViewModel() { Name = "Category 1", Value = "category1",
         IsSelected = productCategories.Where(c => c.Value == "category1").Count() > 0 ? true : false},
         //do the same
        //new CategoryViewModel() { Name = "Category 2", Value = "category2" },
        //new CategoryViewModel() { Name = "Category 3", Value = "category3" }
    },
    //not required
    //SelectedCategoryValues = productCategories.Select(c => c.Value).ToList()
};

return View(vm);

並認為

@foreach (var category in Model.Categories) {
     <div class="checkbox">
          <label><input type="checkbox" checked="@category.IsSelected" name="SelectedCategoryValues" 
          value="@category.Value">@category.Name</label>
     </div>
}