Merge pull request #72 from haacked/gh71

Add demo checkboxes for `bool` property on list

Author: haacked

Pages/Demos/Checkboxes.cshtml

@@ -80,6 +80,26 @@
             }
         </div>
 
+        <div class="form-field">
+            <p>
+                It's also common to bind a boolean property from a list to checkboxes.
+            </p>
+            @for (var i = 0; i <Model.Numbers.Count; i++) {
+                var number = Model.Numbers[i];
+
+                <label>
+                    <input type="checkbox" asp-for="Numbers[i].IsSelected" />
+                    @number.Name
+                </label>
+                @* The asp-for above appends an input with value="false" to the form. *@
+                @* An explicit hidden generates input with value="False": *@
+                @* <input type="hidden" asp-for="Numbers[i].IsSelected" /> *@
+                <input type="hidden" asp-for="Numbers[i].Name" />
+            }
+            <span asp-validation-for="Numbers"></span>
+            <em class="results">Selected numbers: @string.Join(", ", Model.Numbers.Where(n => n.IsSelected).Select(n => n.Name))</em>
+        </div>
+
         <input type="submit" value="Submit"/>
     </form>
 </fieldset>

Pages/Demos/Checkboxes.cshtml.cs

@@ -8,6 +8,13 @@ public class Checkboxes : PageModel
 {
     public string? StatusMessage { get; set; }
 
+    public void OnGet()
+    {
+        Numbers.Add(new() { Name = "One" });
+        Numbers.Add(new() { Name = "Two" });
+        Numbers.Add(new() { Name = "Three" });
+    }
+
     public IActionResult OnPost()
     {
         StatusMessage = "Form was submitted: " + (ModelState.IsValid
@@ -36,4 +43,13 @@ public class InputModel
     {
         public bool IsChecked { get; set; }
     }
+
+    [BindProperty]
+    public List<Selectable> Numbers { get; } = new();
+
+    public class Selectable
+    {
+        public required string Name { get; set; }
+        public bool IsSelected { get; set; }
+    }
 }