Dont see the value of the checkboxes in the HTTP POST

Question

Dont see the value of the checkboxes in the HTTP POST

Anjali Agarwal 1,531

I have the following Model class:

public partial class EmployeeInfo

{

public int EmployeeInfoId { get; set; }

public string LastName { get; set; } = null!;

public string FirstName { get; set; } = null!;

public virtual Reassignment? Reassignment { get; set; }

}

public partial class Reassignment

{

public int ReassignmentId { get; set; }

public int EmployeeInfoId { get; set; }

public virtual EmployeeInfo EmployeeInfo { get; set; } = null!;

public virtual ICollection<ReassignmentSectionJoin> ReassignmentSectionJoins { get; } = new List<ReassignmentSectionJoin>();

}

public partial class ReassignmentSectionJoin

{

public int ReassignmentSectionJoinId { get; set; }

public int ReassignmentId { get; set; }

public int ReassignmentSectionLookupId { get; set; }

public virtual Reassignment Reassignment { get; set; } = null!;

public virtual ReassignmentSectionLookup ReassignmentSectionLookup { get; set; } = null!;

}

public partial class ReassignmentSectionLookup

{

public int ReassignmentSectionLookupId { get; set; }

public string Category { get; set; } = null!;

public string Section { get; set; } = null!;

public virtual ICollection<ReassignmentSectionJoin> ReassignmentSectionJoins { get; } = new List<ReassignmentSectionJoin>();

}

public class ReassignmentSectionLookupOption

{

    public string Text { get; set; }

    public int Value { get; set; }

}

I am trying to show checkBoxes and some textBoxes on razor page which has a model binding with

EmployeeInfo. below is my code:

For textBox, I did this:

@model AckPackage.Models.EmployeeInfo

@{

ViewData["Title"] = "Create";

}

                <div class="col-sm-12">

                    <label asp-for="@Model.Reassignment.ReassignmentRemarks" class="control-label"></label>

                    <input asp-for="Reassignment.ReassignmentRemarks" class="form-control" />

                    <span asp-validation-for="@Model.Reassignment.ReassignmentRemarks" class="text-danger"></span>

               </div>

               

          

            </div>

On HTTPPost, I can see value of remark when I send the employeeInfo, but I dont

see the value of any of the checkboxes. this is how I am retrieving the Checkboxes on razor:

<div>

                        <br /><b>IT</b>  <br /><br />

                        @{

                            var ITSections = ViewData["ITSections"] as List<ReassignmentSectionLookupOption>;

                            if (ITSections != null && ITSections.Any())

                            {

                                foreach (var item in ITSections)

                                {

                                    <input type="checkbox" name="selectedItems" value="@item.Value" ) /> @item.Text  <br />

                                }

                            }

                        }

                    </div>

The controller has this:

public async Task<IActionResult> Create()

    {

      var ITSections= new List<ReassignmentSectionLookup>();

      ITSections= await _employeeService.GetITSections();

      ViewData["ITSections"] = ITSections.Select(x => new ReassignmentSectionLookupOption

        {

            Value = x.ReassignmentSectionLookupId,

            Text = x.Section

        }).ToList();

		return View(employee);

    }

 public async Task<List<ReassignmentSectionLookup>> GetITSections()

    {

        return await _ackContext.ReassignmentSectionLookups.Where(s => s.Category == "IT").ToListAsync(); ;

    }

I have around 20 check boxes in IT section. If I check the checkboxes, I want to see the value in 
		HTTPost, but I dont see any value. below is my HTTPPost screen shot:

![User's image](/api/attachments/401a015a-a07e-4ab9-88b4-e1a175c67c9d?platform=QnA)

As you can see, I have 0 count for ReassignmentSectionLookup.

Any help will be highly appreciated.

AgaveJoe 30,126 Reputation points

2023-02-12T00:45:32.87+00:00

The View design creates an array of checkboxes named selectedItems not ReassignmentSectionLookup. If you open the browser's dev tools and look at the post collection, you'll see an array named selectedItems that are checked. Unchecked inputs are not submitted by the browser.

I recommend that you go through the tutorials on this site which covers fundamental patterns when working with data.

ASP.NET Core MVC with EF Core - tutorial series

I think you'll also be interested in learning model binding so you understand the data interface between a View and an Action.

Model Binding in ASP.NET Core
Qing Guo - MSFT 896 Reputation points Microsoft External Staff

2023-02-13T05:39:24.0966667+00:00

Hi @Anjali Agarwal ,

If you want count for checkboxes , you need to keep the name attribute of checkboxes as same as the property in your EmployeeInfo or in your post method parameter, so that you can correctly bind the checkboxes value when you check.

Accepted answer

1 additional answer

Your answer

AgaveJoe 30,126 Reputation points

2023-02-12T00:45:32.87+00:00

The View design creates an array of checkboxes named selectedItems not ReassignmentSectionLookup. If you open the browser's dev tools and look at the post collection, you'll see an array named selectedItems that are checked. Unchecked inputs are not submitted by the browser.

I recommend that you go through the tutorials on this site which covers fundamental patterns when working with data.

ASP.NET Core MVC with EF Core - tutorial series

I think you'll also be interested in learning model binding so you understand the data interface between a View and an Action.

Model Binding in ASP.NET Core
Qing Guo - MSFT 896 Reputation points Microsoft External Staff

2023-02-13T05:39:24.0966667+00:00

Hi @Anjali Agarwal ,

If you want count for checkboxes , you need to keep the name attribute of checkboxes as same as the property in your EmployeeInfo or in your post method parameter, so that you can correctly bind the checkboxes value when you check.

Answer 1

Below is an example that illustrates basic HTML forms and the naming convention used by the model binder. The post method return JSON which is intended to show the data format - for testing.

using Microsoft.AspNetCore.Mvc;
using MvcDemo.Models;

namespace MvcDemo.Controllers
{
    public class CheckController : Controller
    {
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public IActionResult Index(List<int> selectedItems)
        {
            return Ok(selectedItems);
        }

        [HttpGet]
        public IActionResult ComplexEx()
        {
            return View();
        }

        [HttpPost]
        public IActionResult ComplexEx(ComplexOneLevelVm model)
        {
            return Ok(model);
        }

        [HttpGet]
        public IActionResult Complex2Ex()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Complex2Ex(ComplexTwoLevelVm model)
        {
           
            return Ok(model);
        }

    }
}

Models

    public class ComplexOneLevelVm
    {
        public string? Name { get; set; }
        public List<int>? selectedItems { get; set; }
    }

    public class ComplexTwoLevelVm
    {
        public string? TopLevelName { get; set;}
        public ComplexOneLevelVm? NestedComplexType { get; set;}
    }

Index.cshtml


@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>
<div>
    <form method="post">
        1: <input type="checkbox" name="selectedItems" value="1" /><br />
        2: <input type="checkbox" name="selectedItems" value="2" /><br />
        3: <input type="checkbox" name="selectedItems" value="3" /><br />
        4: <input type="checkbox" name="selectedItems" value="4" /><br />
        5: <input type="checkbox" name="selectedItems" value="5" /><br />
        6: <input type="checkbox" name="selectedItems" value="6" /><br />
        7: <input type="checkbox" name="selectedItems" value="7" /><br />
        <div>
            <input type="submit" name="submit" value="submit" />
        </div>
    </form>
</div>

ComplexEx.cshtml

@model MvcDemo.Models.ComplexOneLevelVm

@{
    ViewData["Title"] = "ComplexEx";
}

<h1>ComplexEx</h1>

<form method="post">
    Name: <input type="text" name="Name" /><br />
    1: <input type="checkbox" name="selectedItems" value="1" /><br />
    2: <input type="checkbox" name="selectedItems" value="2" /><br />
    3: <input type="checkbox" name="selectedItems" value="3" /><br />
    4: <input type="checkbox" name="selectedItems" value="4" /><br />
    5: <input type="checkbox" name="selectedItems" value="5" /><br />
    6: <input type="checkbox" name="selectedItems" value="6" /><br />
    7: <input type="checkbox" name="selectedItems" value="7" /><br />
    <div>
        <input type="submit" name="submit" value="submit" />
    </div>
</form>

Complex2Ex.cshtml

@model MvcDemo.Models.ComplexTwoLevelVm

@{
    ViewData["Title"] = "Complex2Ex";
}

<h1>Complex2Ex</h1>

<h4>ComplexTwoLevelVm</h4>
<hr />
<div>
    <form method="post">
        <div>
            TopLevelName: <input type="text" name="TopLevelName" /><br />
        </div>
        <div style="margin-top:100px;">
            Name: <input type="text" name="NestedComplexType.Name" /><br />
            1: <input type="checkbox" name="NestedComplexType.selectedItems" value="1" /><br />
            2: <input type="checkbox" name="NestedComplexType.selectedItems" value="2" /><br />
            3: <input type="checkbox" name="NestedComplexType.selectedItems" value="3" /><br />
            4: <input type="checkbox" name="NestedComplexType.selectedItems" value="4" /><br />
            5: <input type="checkbox" name="NestedComplexType.selectedItems" value="5" /><br />
            6: <input type="checkbox" name="NestedComplexType.selectedItems" value="6" /><br />
            7: <input type="checkbox" name="NestedComplexType.selectedItems" value="7" /><br />
        </div>

        <div>
            <input type="submit" name="submit" value="submit" />
        </div>
    </form>
</div>

Example of the Browser's Network utility in Developer Tools.

Capture

As you can see the model binder uses a naming convention that maps the input names to the C# types. When you manually build the HTML, as you are doing, then you have to follow the naming rules. You can't make up your own naming rules - programming does not work that way.

I recommend that you use the asp-for helper which will render the correct input names.

Note: only the checkboxes that are checked are submitted.

Answer 2

Karen Payne MVP 35,586 Volunteer Moderator

I happen to be writing an article on Checked List today for Razor Pages.

The code reads from a mocked list at this point but makes no difference other than no save to a database which I will have tomorrow.

GitHub source Set the under debug properties, Url to Index1 as Index is an example how to do it wrong.

When posting, the results are shown in the console window.

FF1

Anjali Agarwal 1,531 Reputation points

2023-02-12T02:50:07.0366667+00:00

I looked at the developers tools and dont see that checkbox is checked or not. Below is the screen shot of the developers tool:

I do see the value of other checkboxes in HTTPPost, but since this one is nested inside a class. I dont see any value and the count is always 0
AgaveJoe 30,126 Reputation points

2023-02-12T12:08:14.18+00:00

I looked at the developers tools and dont see that checkbox is checked or not. Below is the screen shot of the developers tool:

Oh my... The network view shows the submitted values.

I do see the value of other checkboxes in HTTPPost, but since this one is nested inside a class. I dont see any value and the count is always 0

Then the element names are wrong and the HTML is malformed!

The link I proved above has an example that is very similar to your question. I think you would learn a lot if you took the time to go through the tutorial.

Share via

Dont see the value of the checkboxes in the HTTP POST

1 additional answer

Your answer