Question 209706 in ASP.NET Question posted in
The official documentation can be found here.

Asp.net – How do I pass list of checked checboxes to MVC controller

I am able to add the asp tag helpers asp-for to text input elements like this:

        <label asp-for="Year" class="control-label"></label>
        <input asp-for="Year" type="text" class="form-control" id="Year" />

And I get the data in the controller.

But, how do you do the same for checkboxes that are checked like the ones below so that I can access them in the controller?

I am trying to bind all the checked checkboxes to this model property: public List<string> PTList { get; set; }

            <div class="col-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="U100" id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                        U100
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="U110" id="flexCheckChecked" checked>
                    <label class="form-check-label" for="flexCheckChecked">
                        U110
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="U130" id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                        U130
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="U150" id="flexCheckChecked" checked>
                    <label class="form-check-label" for="flexCheckChecked">
                        U150
                    </label>
                </div>
            </div>
Tags:

2

Answers


  1. 0

    You can use name atttribute to pass the checkbox value ,like

    <div class="col-3">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="U100"  name="ck" id="flexCheckDefault">
            <label class="form-check-label" for="flexCheckDefault">
                U100
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="U110"  name="ck"id="flexCheckChecked" checked>
            <label class="form-check-label" for="flexCheckChecked">
                U110
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="U130" name="ck" id="flexCheckDefault">
            <label class="form-check-label" for="flexCheckDefault">
                U130
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="U150" name="ck" id="flexCheckChecked" checked>
            <label class="form-check-label" for="flexCheckChecked">
                U150
            </label>
        </div>
    </div>

    result:

    enter image description here

    Login or Signup to reply.
  2. 0

    To access values in the controller you can do the following:

    1. Make sure you have your html form properly set

    2. Use the name attribute

    <form action="/your-route">
    <div class="col-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="U100" name="checkboxes" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            U100
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="U110" name="checkboxes" id="flexCheckChecked" checked>
                        <label class="form-check-label" for="flexCheckChecked">
                            U110
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="U130" name="checkboxes" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            U130
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="U150" name="checkboxes" id="flexCheckChecked" checked>
                        <label class="form-check-label" for="flexCheckChecked">
                            U150
                        </label>
                    </div>
</div>

                <button type="submit">Submit</button>
</form>

    2. In the controller:

       [Route("/your-route")]
    public IActionResult AccessCheckboxes(List<string> checkboxes)
    {
        YourModel model = new();
        model.PTList = checkboxes.ToList();

        return View();
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search