提交后复选框保持选中状态

Question

所以我有这些复选框将值传递给控制器​​，然后这些值用于从数据库中取回一些东西。但是当我单击提交按钮时，一切正常，但是现在未选中选中的复选框。 这是视图：

<form>
@foreach(var type in types) {
<input type="checkbox" name="checkedTypes" value="@type.id" />
<label>@type.Name</label>
}
<button type="submit" class="btn customGreen">Set filters</button>
</form>

这是控制器：

public async Task < ViewResult > Index(List < int > checkedTypes) 
{
var products = from p in _db.Products
select p;

if (checkedTypes.Count != 0) {
products = products.Where(p =>checkedTypes.Contains(p.TypeId));
}

return View(product);
}

有没有办法让选中的复选框在提交后保持选中状态？或者有没有更好的方法来使用 .net core 处理复选框。

Answer 1

可以将checkedTypes存储在一个ViewBag中，然后判断，再判断是否需要在前端选中checkbox。

一个简单的例子如下：

查看：

@{ 
    var types = new List<MyType>
    {
        new MyType{Id = 1, Name ="AA"},
        new MyType{Id = 2, Name ="BB"},
        new MyType{Id = 3, Name ="CC"},
    };
    var checkedTypes = ViewBag.checkedTypes;
}

<form method="post">
    @foreach (var type in types)
    {
        if (checkedTypes != null && checkedTypes.Contains(type.Id))
        {
            <input type="checkbox" name="checkedTypes" value="@type.Id" checked />
        }
        else
        {
            <input type="checkbox" name="checkedTypes" value="@type.Id" />
        }

        <label>@type.Name</label>
    }
    <button type="submit" class="btn customGreen">Set filters</button>
</form>

控制器：

public IActionResult Index()
{
    return View();
}

[HttpPost]
public async Task<ViewResult> Index(List<int> checkedTypes)
{
    if (checkedTypes.Count != 0)
    {
        ViewBag.checkedTypes = checkedTypes;
    }
    return View();
}

结果：