Two way binding CustomCheckbox

sjefvanleeuwen · sjefvanleeuwen · commit fab9d0c96824 · 2020-08-19T16:03:03.000+02:00
diff --git a/src/Blazor.AdminLte.Site.Shared/Pages/Forms/General.razor b/src/Blazor.AdminLte.Site.Shared/Pages/Forms/General.razor
@@ -9,17 +9,17 @@
         <Title><CardTitle>Some simple link content</CardTitle></Title>
         <Body>
             <FormGroup>
-                @code{ 
-                        List<CustomCheckboxState> Checkboxes = new List<CustomCheckboxState>()
-                    {
-                        new CustomCheckboxState(){ Identifier = "customCheckbox1", Value="option1", Label=new MarkupString("Custom Checkbox")},
-                        new CustomCheckboxState(){ Identifier = "customCheckbox2", Value="option2", IsChecked=true, Label=new MarkupString("Custom Checkbox checked")},
-                        new CustomCheckboxState(){ Identifier = "customCheckbox3", Value="option3", IsDisabled=true, Label=new MarkupString("Custom Checkbox disabled")}
+                @code{
+                    List<CustomCheckboxState> Checkboxes = new List<CustomCheckboxState>()
+                                                        {
+                        new CustomCheckboxState(){ Identifier = "customCheckbox1", Value="option1", Label="Custom Checkbox"},
+                        new CustomCheckboxState(){ Identifier = "customCheckbox2", Value="option2", IsChecked=true, Label= "Custom Checkbox checked"},
+                        new CustomCheckboxState(){ Identifier = "customCheckbox3", Value="option3", IsDisabled=true, Label= "Custom Checkbox disabled"}
                     };
                 }
-                @for (int i=0;i<Checkboxes.Count;i++)
+                @for (int i = 0; i < Checkboxes.Count; i++)
                 {
-                    <CustomCheckbox @bind-State="Checkboxes[i]" />
+                    <CustomCheckbox  @bind-State="Checkboxes[i]" /> <text>Checked: @Checkboxes[i].IsChecked;</text>
                 }
             </FormGroup>
         </Body>
diff --git a/src/Blazor.AdminLte/Forms/CustomCheckbox.razor b/src/Blazor.AdminLte/Forms/CustomCheckbox.razor
@@ -1,5 +1,6 @@
 ﻿@namespace Blazor.AdminLte
 <div class="custom-control custom-checkbox">
     <input class="custom-control-input" type="checkbox" id="@State.Identifier" value="@State.Value" disabled="@State.IsDisabled" checked="@State.IsChecked" @onchange="DoChange">
-    <label for="@State.Identifier" class="custom-control-label">@State.Label</label>
-</div>
+    <label for="@State.Identifier" class="custom-control-label">@((MarkupString)State.Label)</label>
+</div>
+
diff --git a/src/Blazor.AdminLte/Forms/CustomCheckbox.razor.cs b/src/Blazor.AdminLte/Forms/CustomCheckbox.razor.cs
@@ -11,15 +11,14 @@ public partial class CustomCheckbox
         public EventCallback<CustomCheckboxState> StateChanged { get; set; }
 
         [Parameter]
-        public RenderFragment ChildContent { get; set; }
+        public EventCallback<CustomCheckboxState> OnChange { get; set; }
 
-        [Parameter]
-        public EventCallback<ChangeEventArgs> OnChange { get; set; }
-
-        private async void DoChange(ChangeEventArgs e)
+        private void DoChange(ChangeEventArgs e)
         {
+            State.IsChecked = (bool?)e.Value;
+            StateChanged.InvokeAsync(State);
             if (OnChange.HasDelegate)
-                await OnChange.InvokeAsync(e);
+              OnChange.InvokeAsync(State);
         }
     }
 }
diff --git a/src/Blazor.AdminLte/Forms/CustomCheckboxState.cs b/src/Blazor.AdminLte/Forms/CustomCheckboxState.cs
@@ -8,6 +8,6 @@ public class CustomCheckboxState
         public bool IsDisabled { get; set; }
         public string Value { get; set; }
         public string Identifier { get; set; }
-        public MarkupString Label { get; set; }
+        public string Label { get; set; }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -11,15 +11,14 @@ public partial class CustomCheckbox`
`11`	`11`	`public EventCallback<CustomCheckboxState> StateChanged { get; set; }`
`12`	`12`
`13`	`13`	`[Parameter]`
`14`		`- public RenderFragment ChildContent { get; set; }`
	`14`	`+ public EventCallback<CustomCheckboxState> OnChange { get; set; }`
`15`	`15`
`16`		`- [Parameter]`
`17`		`- public EventCallback<ChangeEventArgs> OnChange { get; set; }`
`18`		`-`
`19`		`- private async void DoChange(ChangeEventArgs e)`
	`16`	`+ private void DoChange(ChangeEventArgs e)`
`20`	`17`	`{`
	`18`	`+ State.IsChecked = (bool?)e.Value;`
	`19`	`+ StateChanged.InvokeAsync(State);`
`21`	`20`	`if (OnChange.HasDelegate)`
`22`		`- await OnChange.InvokeAsync(e);`
	`21`	`+ OnChange.InvokeAsync(State);`
`23`	`22`	`}`
`24`	`23`	`}`
`25`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,6 @@ public class CustomCheckboxState`
`8`	`8`	`public bool IsDisabled { get; set; }`
`9`	`9`	`public string Value { get; set; }`
`10`	`10`	`public string Identifier { get; set; }`
`11`		`- public MarkupString Label { get; set; }`
	`11`	`+ public string Label { get; set; }`
`12`	`12`	`}`
`13`	`13`	`}`