ASP.NET Core 3.1 MVC：将选中的复选框发送到控制器

Question

我有以下带有复选框的列表视图：

@model IEnumerable<PaketServisAracTakip.Models.Item>

@{
    ViewData["Title"] = "Yükleme Yap";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2 class="text-center text-success">@ViewBag.name İsimli Araca Yükleme Yap</h2>

<form asp-controller="Vehicle"
      asp-action="LoadItem" method="post">
    <br />
    <input type="submit" name="submit" value="Oluştur" class="btn btn-primary" />
</form>

<table class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th class="text-center">
                Yüklensin mi?
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Description)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <div class="form-check">
                        <label class="form-check-label" for="@item.Id" asp-validation-for="@item.Id"></label>
                        <input class="form-check-input" name="ids" type="checkbox" value="@item.Id" id="@item.Id">
                    </div>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    ₺@Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
            </tr>
        }
    </tbody>
</table>

以及我的集成数据库的项目模型：

[Table("Items")]
public class Item
{
        [Key]
        public int Id { get; set; }
        [Display(Name = "İsim")]
        [Required(ErrorMessage ="{0} alanı boş bırakılamaz.")]
        [MaxLength(50, ErrorMessage ="İsim 50 karakteri geçemez.")]
        public String Name { get; set; }
        [Display(Name = "Fiyat")]
        [Required(ErrorMessage = "{0} alanı boş bırakılamaz.")]
        [Range(0, Double.MaxValue, ErrorMessage = "Minimum 0 girmelisin.")]
        public int Price { get; set; }
        [Display(Name = "Açıklama")]
        public String Description { get; set; }
}

view

因此，当单击按钮时，我想在我的控制器中获取选中的项目。我试过了，但它是空的：

[HttpPost]
public ActionResult LoadItem(IEnumerable<Item> model)
{
    return RedirectToAction("Index");
}

我也试过 int array 和 FormCollection 但没有用。我想我需要一些标签助手，但不知道是哪个。

Answer 1

when button is clicked i want to get checked items in my controller. I tried this but its empty

请检查查看页面中的代码，由于 table 不在 <form> 元素中，当您单击 Submit 按钮时，提交的表单不会包含相关数据。

此外，要使用模型绑定将模型数据提交给控制器，我们应该使用@for语句循环遍历实体并使用隐藏字段来存储相关数据。请参考以下示例并更改您的代码：

型号：

[Table("Items")]
public class Item
{
    [Key]
    public int Id { get; set; }
    [Display(Name = "İsim")]
    [Required(ErrorMessage = "{0} alanı boş bırakılamaz.")]
    [MaxLength(50, ErrorMessage = "İsim 50 karakteri geçemez.")]
    public String Name { get; set; }
    [Display(Name = "Fiyat")]
    [Required(ErrorMessage = "{0} alanı boş bırakılamaz.")]
    [Range(0, Double.MaxValue, ErrorMessage = "Minimum 0 girmelisin.")]
    public int Price { get; set; }
    [Display(Name = "Açıklama")]
    public String Description { get; set; }

    public Boolean IsChecked { get; set; } //add a property to store whether the item is check or not.
}

查看页面：

@model List<netcore3_1sample.Models.Item>

@{
    ViewData["Title"] = "ItemIndex";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h2 class="text-center text-success">@ViewBag.name İsimli Araca Yükleme Yap</h2>

<form asp-controller="Home"
      asp-action="LoadItem" method="post">
    <br /> 
    <input type="submit" name="submit" value="Oluştur" class="btn btn-primary" />
    <br />
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th class="text-center">
                    Yüklensin mi?
                </th>
                <th class="text-center">
                    Name
                </th>
                <th class="text-center">
                    Price
                </th>
                <th class="text-center">
                    Description
                </th>
            </tr>
        </thead>
        <tbody> 
            @for( var i = 0; i < Model.Count;i++)
            {
                <tr>
                    <td>
                        <div class="form-check">
                            <label class="form-check-label" for="@Model[i].Id" asp-validation-for="@Model[i].Id"></label>
                            <input class="form-check-input" name="ids" type="checkbox" value="@Model[i].Id" id="@Model[i].Id">
                            @*<input type="checkbox" asp-for="@Model[i].IsChecked" />*@
                            <input type="hidden" asp-for="@Model[i].Id" />
                        </div>
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => Model[i].Name)
                        <input type="hidden" asp-for="@Model[i].Name" />
                    </td>
                    <td>
                        ₺@Html.DisplayFor(modelItem => Model[i].Price)
                        <input type="hidden" asp-for="@Model[i].Price" />
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => Model[i].Description)
                        <input type="hidden" asp-for="@Model[i].Description" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</form>

控制器中的代码：

    [HttpPost]
    public ActionResult LoadItem(List<Item> model, int[] ids)
    {
        return RedirectToAction("ItemIndex");
    }

根据您的代码，您正在使用 html 复选框元素来存储选定的项目 ID，因此这里我们需要添加一个数组来获取选定的 ID。

此外，您可以在Item模型中添加一个IsChecked 属性，然后更改如下代码：

    <input class="form-check-input" name="ids" type="checkbox" value="@Model[i].Id" id="@Model[i].Id">

至

    <input type="checkbox" asp-for="@Model[i].IsChecked" />

通过使用此方法，在控制器中，您可以根据 IsChecked 过滤所选项目属性。

结果是这样的：

ASP.NET Core 3.1 MVC：将选中的复选框发送到控制器

ASP.NET Core 3.1 MVC : sending selected checkboxes to controller

asp.net-core-mvc