c# - Unable to post an array of checkboxes to server

I'm using AJAX and Javascript to generate an array of checkboxes within a form.

But when the form is posted, my columns parameter only contains the values of some of the checkboxes. As long as all checkboxes are checked, then I get them all. But as soon as it hits the first unchecked checkbox, none of the remaining checkbox values are returned, even those remaining checkboxes that are checked.

I understand that unchecked checkboxes do not post their values. But how can I get all the values for the checkboxes that are checked?

Post Handler

public async Task<IActionResult> OnPostAsync(int id, string[] columns)
{
}

Generated Markup

<div id="column-checkboxes" class="col-md-12">
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Customer" id="Columns_0_" name="Columns[0]">
        <label class="form-check-label" for="Columns_0_">Customer</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Origin" id="Columns_1_" name="Columns[1]">
        <label class="form-check-label" for="Columns_1_">Origin</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Checklist Status" id="Columns_2_" name="Columns[2]">
        <label class="form-check-label" for="Columns_2_">Checklist Status</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Product" id="Columns_3_" name="Columns[3]">
        <label class="form-check-label" for="Columns_3_">Product</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Unit Of Measurement" id="Columns_4_" name="Columns[4]">
        <label class="form-check-label" for="Columns_4_">Unit Of Measurement</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Original Weight" id="Columns_5_" name="Columns[5]">
        <label class="form-check-label" for="Columns_5_">Original Weight</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Current Weight" id="Columns_6_" name="Columns[6]">
        <label class="form-check-label" for="Columns_6_">Current Weight</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Empty" id="Columns_7_" name="Columns[7]">
        <label class="form-check-label" for="Columns_7_">Empty</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Arrival" id="Columns_8_" name="Columns[8]">
        <label class="form-check-label" for="Columns_8_">Arrival</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Railroad" id="Columns_9_" name="Columns[9]">
        <label class="form-check-label" for="Columns_9_">Railroad</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Track" id="Columns_10_" name="Columns[10]">
        <label class="form-check-label" for="Columns_10_">Track</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Sequence" id="Columns_11_" name="Columns[11]">
        <label class="form-check-label" for="Columns_11_">Sequence</label>
    </div>
</div>

I'm using AJAX and Javascript to generate an array of checkboxes within a form.

I understand that unchecked checkboxes do not post their values. But how can I get all the values for the checkboxes that are checked?

Post Handler

public async Task<IActionResult> OnPostAsync(int id, string[] columns)
{
}

Generated Markup

<div id="column-checkboxes" class="col-md-12">
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Customer" id="Columns_0_" name="Columns[0]">
        <label class="form-check-label" for="Columns_0_">Customer</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Origin" id="Columns_1_" name="Columns[1]">
        <label class="form-check-label" for="Columns_1_">Origin</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Checklist Status" id="Columns_2_" name="Columns[2]">
        <label class="form-check-label" for="Columns_2_">Checklist Status</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Product" id="Columns_3_" name="Columns[3]">
        <label class="form-check-label" for="Columns_3_">Product</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Unit Of Measurement" id="Columns_4_" name="Columns[4]">
        <label class="form-check-label" for="Columns_4_">Unit Of Measurement</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Original Weight" id="Columns_5_" name="Columns[5]">
        <label class="form-check-label" for="Columns_5_">Original Weight</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Current Weight" id="Columns_6_" name="Columns[6]">
        <label class="form-check-label" for="Columns_6_">Current Weight</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Empty" id="Columns_7_" name="Columns[7]">
        <label class="form-check-label" for="Columns_7_">Empty</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Arrival" id="Columns_8_" name="Columns[8]">
        <label class="form-check-label" for="Columns_8_">Arrival</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Railroad" id="Columns_9_" name="Columns[9]">
        <label class="form-check-label" for="Columns_9_">Railroad</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Track" id="Columns_10_" name="Columns[10]">
        <label class="form-check-label" for="Columns_10_">Track</label>
    </div>
    <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" value="Sequence" id="Columns_11_" name="Columns[11]">
        <label class="form-check-label" for="Columns_11_">Sequence</label>
    </div>
</div>

Share Improve this question edited Feb 6 at 3:33 asked Feb 4 at 20:09 Jonathan Wood 67.3k82 gold badges302 silver badges529 bronze badges

1 HTMLInputElement has the property checked, and... Also, please read this: How to create a Minimal, Reproducible Example. – Sergey A Kryukov Commented Feb 5 at 1:25
Hi @Jonathan Wood, could you pls share your razor code instead of generated html code? – Rena Commented Feb 5 at 2:22
@Rena: As stated, I'm generating this code from Javascript. This is how my mark up looks once it gets generated. All I have in razor is a parent element where I add all the checkboxes. – Jonathan Wood Commented Feb 6 at 3:33
1 @JonathanWood Just my comment - if you generated this from javascript, likely you need to follow pure HTML/javascript rules instead. I'm no Razor expert, but normally in HTML you would need the Checkboxes to have the same name (e.g. name="columns" instead of "Columns[0]"). Hope this help – Hoàng Long Commented Feb 6 at 4:36

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

In ASP.NET Core, when a checkbox is unchecked, its value is not sent in the form data. However, the asp-for tag helper automatically generates a hidden input for each checkbox with the same name, ensuring that a value is always sent for the model binding to work properly.

If you only want to receive the checked value, just change the name to name="Columns".

If you want to receive all the checkbox value, you need manually add the hidden input for each checkbox

<div id="column-checkboxes" class="col-md-12">
    <div class="form-check form-switch">
        <input name="Columns[0]" type="hidden" value="false">
        <input type="checkbox" class="form-check-input" value="Customer" id="Columns_0_" name="Columns[0]">
        <label class="form-check-label" for="Columns_0_">Customer</label>
    </div>
    <div class="form-check form-switch">
        <input name="Columns[1]" type="hidden" value="false">
        <input type="checkbox" class="form-check-input" value="Origin" id="Columns_1_" name="Columns[1]">
        <label class="form-check-label" for="Columns_1_">Origin</label>
    </div>
    <!-- Repeat for other checkboxes -->
</div>

If I set the name to all checkboxes to the same value (e.g. "Columns"), it works as I wanted it to. Razor Pages correctly translates that markup to an array with all the checked values.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

c# - Unable to post an array of checkboxes to server - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)