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

Question

I have following list view with checkboxes:

@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>

And my item model with database integrated:

[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

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

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

I also tried int array and FormCollection but didn't work. I think I need some tag helpers but don't know which.

Zhi Lv · Accepted Answer · 2021-04-29 05:18:14Z

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

Please check the code in the View Page, since the table doesn't in the <form> element, when you click the Submit button, the submitted form doesn't contain the related data.

Besides, to submit the model data to the controller using model binding, we should use the @for statement to loop through the entities and use hidden fields to store the related data. Please refer the following sample and change your code:

Model:

[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.
}

View page:

@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>

Code in the controller:

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

According to your code, you are using a html checkbox element to store the selected Item ID, so here we need to add an array to get the selected ids.

Besides, you could add a IsChecked property in the Item model, then change the following code:

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

to

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

By using this method, in the controller, you could filter the selected item based on the IsChecked property.

The result like this:

Thanks i solved issue with this but what is the difference with for and foreach in this situation?
I have checked both for and foreach statement, it seems that when using foreach statement, after submitting the form, the data will be null in the controller. But if using for statement, we could get the submitted model.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related