[英]Cannot check checkbox in ASP.NET Core MVC view
I'm currently working on an ASP.NET Core 3.1 MVC application.我目前正在开发一个 ASP.NET Core 3.1 MVC 应用程序。 I need to create a dynamic checkbox menu, which shows available fruits and stores the selected fruits into another data source.我需要创建一个动态复选框菜单,它显示可用的水果并将选定的水果存储到另一个数据源中。
My problem is, I cannot check/click any checkbox on my view and send the selected items back to my controller.我的问题是,我无法选中/单击视图上的任何复选框并将所选项目发送回我的控制器。
My FruitsViewModel looks like this:我的FruitsViewModel看起来像这样:
public class FruitsViewModel
{
public IList<string> SelectedFruits { get; set; } = new List<string>();
public IList<SelectListItem> AvailableFruits { get; set; } = new List<SelectListItem>();
}
My FruitsController looks like this:我的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"},
};
}
}
My FruitsController Index.cshtml view looks like this:我的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>
Do you know how to check a checkbox which is loaded dynamically on a ASP.NET Core MVC view and send the selected value back to the controller accordingly?您知道如何选中在 ASP.NET Core MVC 视图上动态加载的复选框并将所选值相应地发送回控制器吗?
If possible I don't want to use jQuery.如果可能的话,我不想使用 jQuery。
I cannot check/click any checkbox on my view and send the selected items back to my controller.我无法选中/单击视图上的任何复选框并将所选项目发送回我的控制器。
You can try to modify the code like below to dynamically generate checkbox(es) with Bootstrap styles .您可以尝试修改如下代码以动态生成带有 Bootstrap 样式的复选框。
<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>
Test Result测试结果
Checked options勾选选项
Get checked values in action method在操作方法中获取选中的值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.