Change order of generated input elements in asp-for checkbox helper

[rblackman]

When rendering a checkbox input. There is a hidden input with a false value rendered after the checkbox input. See the example below.

<input asp-for="Foo" type="checkbox"/>
<label asp-for="Foo">Foo?</label>

becomes

<input data-val="true" data-val-required="The Foo field is required." id="Foo" name="Foo" type="checkbox" value="true" />
<input name="Foo" type="hidden" value="false" />
<label for="Foo">Foo?</label>

It is relatively common to style a label based on a checkboxes checked state e.g.

input[type="checkbox"] + label {
    /* style a */
}
input[type="checkbox"]:checked + label {
     /* style b */
}

The addition of the hidden input breaks this sort of selector.

I would suggest, putting the hidden input first (since it doesn't seem to matter which order the inputs are rendered in). So the above code would become:

<input name="Foo" type="hidden" value="false" />
<input data-val="true" data-val-required="The Foo field is required." id="Foo" name="Foo" type="checkbox" value="true" />
<label for="Foo">Foo?</label>

[danroth27]

@dougbu @DamianEdwards

[Eilon]

See http://stackoverflow.com/questions/2860940/why-does-the-checkboxfor-render-an-additional-input-tag-and-how-can-i-get-the-v for an explanation and the history of this.

[Eilon]

Solution:

1. The Html.CheckBox HTML helpers and <input type="checkbox"> tag helper will render only the checkbox inline
2. These helpers will not render the hidden input, and instead add it to the current form's context
3. The form HTML helper will render all the extra hidden inputs at the bottom of the form
4. A new "hidden" <form> tag helper (editorbrowsable=never) will capture all <form> elements regardless of attributes and its sole job is to render the extra hidden inputs at the bottom of the form
5. If the HTML/tag helper cannot find a form context then it will fall back to the current behavior of rendering the hidden input immediately after the checkbox

[ajaybhargavb]

d40e661