diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/SwitchDocumentation.razor index 0f77f81c1..c240b8e2c 100644 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/SwitchDocumentation.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/SwitchDocumentation.razor @@ -34,9 +34,12 @@ + + + @code { private string pageUrl = "/form/switch"; private string title = "Blazor Switch Component"; private string description = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox."; - private string imageUrl = "https://i.imgur.com/iUNBkki.png"; + private string imageUrl = "https://i.imgur.com/ALKzreq.png"; } diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor index 1c710dcc0..ff3f786e0 100644 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor @@ -2,7 +2,7 @@
@displaySwitchStatus
- + @code { private bool agree; @@ -14,5 +14,5 @@ displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}."; } - private void ToogleSwitch() => agree = !agree; + private void ToggleSwitch() => agree = !agree; } diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/Switch_Demo_05_Form.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/Switch_Demo_05_Form.razor new file mode 100644 index 000000000..a2b51208f --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Form/Switch/Switch_Demo_05_Form.razor @@ -0,0 +1,115 @@ +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ + +
+
+ + +@code { + private bool disableSave; + private Employee employee = new(); + private EditContext editContext; + + [Inject] private ToastService ToastService { get; set; } + + protected override void OnInitialized() + { + employee = new() { FirstName = "Vikram Reddy", LastName = "Gaddam", IsActive = true }; + editContext = new EditContext(employee); + editContext.OnFieldChanged += HandleFieldChanged; + + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + disableSave = !editContext.Validate(); + + var toastMessage = new ToastMessage + { + Title = "Save Employee Details", + Message = $"Employee details saved successfully.", + AutoHide = true, + Type = ToastType.Success, + IconName = IconName.CheckCircleFill, + }; + + ToastService.Notify(toastMessage); + } + + private void HandleFieldChanged(object sender, FieldChangedEventArgs e) + { + disableSave = !editContext.Validate(); + + var toastMessage = new ToastMessage + { + Title = "Field Changed Notification", + Message = $"The field \"{e.FieldIdentifier.FieldName}\" was changed.", + AutoHide = true, + Type = ToastType.Info + }; + + ToastService.Notify(toastMessage); + } + + private void ResetForm() + { + employee = new(); + editContext = new EditContext(employee); + editContext.OnFieldChanged += HandleFieldChanged; + } + + public class Employee + { + [Required(ErrorMessage = "First name required.")] + public string? FirstName { get; set; } + + [Required(ErrorMessage = "Last name required.")] + public string? LastName { get; set; } + + public bool IsActive { get; set; } + } +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/SwitchDocumentation.razor index 0f77f81c1..c240b8e2c 100644 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/SwitchDocumentation.razor +++ b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/SwitchDocumentation.razor @@ -34,9 +34,12 @@ + + + @code { private string pageUrl = "/form/switch"; private string title = "Blazor Switch Component"; private string description = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox."; - private string imageUrl = "https://i.imgur.com/iUNBkki.png"; + private string imageUrl = "https://i.imgur.com/ALKzreq.png"; } diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor index 1c710dcc0..ff3f786e0 100644 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor +++ b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor @@ -2,7 +2,7 @@
@displaySwitchStatus
- + @code { private bool agree; @@ -14,5 +14,5 @@ displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}."; } - private void ToogleSwitch() => agree = !agree; + private void ToggleSwitch() => agree = !agree; } diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_05_Form.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_05_Form.razor new file mode 100644 index 000000000..a2b51208f --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_05_Form.razor @@ -0,0 +1,115 @@ +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ + +
+
+ + +@code { + private bool disableSave; + private Employee employee = new(); + private EditContext editContext; + + [Inject] private ToastService ToastService { get; set; } + + protected override void OnInitialized() + { + employee = new() { FirstName = "Vikram Reddy", LastName = "Gaddam", IsActive = true }; + editContext = new EditContext(employee); + editContext.OnFieldChanged += HandleFieldChanged; + + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + disableSave = !editContext.Validate(); + + var toastMessage = new ToastMessage + { + Title = "Save Employee Details", + Message = $"Employee details saved successfully.", + AutoHide = true, + Type = ToastType.Success, + IconName = IconName.CheckCircleFill, + }; + + ToastService.Notify(toastMessage); + } + + private void HandleFieldChanged(object sender, FieldChangedEventArgs e) + { + disableSave = !editContext.Validate(); + + var toastMessage = new ToastMessage + { + Title = "Field Changed Notification", + Message = $"The field \"{e.FieldIdentifier.FieldName}\" was changed.", + AutoHide = true, + Type = ToastType.Info + }; + + ToastService.Notify(toastMessage); + } + + private void ResetForm() + { + employee = new(); + editContext = new EditContext(employee); + editContext.OnFieldChanged += HandleFieldChanged; + } + + public class Employee + { + [Required(ErrorMessage = "First name required.")] + public string? FirstName { get; set; } + + [Required(ErrorMessage = "Last name required.")] + public string? LastName { get; set; } + + public bool IsActive { get; set; } + } +} diff --git a/BlazorBootstrap.Demo/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo/Pages/Form/Switch/SwitchDocumentation.razor index 0f77f81c1..c240b8e2c 100644 --- a/BlazorBootstrap.Demo/Pages/Form/Switch/SwitchDocumentation.razor +++ b/BlazorBootstrap.Demo/Pages/Form/Switch/SwitchDocumentation.razor @@ -34,9 +34,12 @@ + + + @code { private string pageUrl = "/form/switch"; private string title = "Blazor Switch Component"; private string description = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox."; - private string imageUrl = "https://i.imgur.com/iUNBkki.png"; + private string imageUrl = "https://i.imgur.com/ALKzreq.png"; } diff --git a/BlazorBootstrap.Demo/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor b/BlazorBootstrap.Demo/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor index 1c710dcc0..ff3f786e0 100644 --- a/BlazorBootstrap.Demo/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor +++ b/BlazorBootstrap.Demo/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor @@ -2,7 +2,7 @@
@displaySwitchStatus
- + @code { private bool agree; @@ -14,5 +14,5 @@ displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}."; } - private void ToogleSwitch() => agree = !agree; + private void ToggleSwitch() => agree = !agree; } diff --git a/BlazorBootstrap.Demo/Pages/Form/Switch/Switch_Demo_05_Form.razor b/BlazorBootstrap.Demo/Pages/Form/Switch/Switch_Demo_05_Form.razor new file mode 100644 index 000000000..a2b51208f --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Form/Switch/Switch_Demo_05_Form.razor @@ -0,0 +1,115 @@ +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ + +
+
+ + +@code { + private bool disableSave; + private Employee employee = new(); + private EditContext editContext; + + [Inject] private ToastService ToastService { get; set; } + + protected override void OnInitialized() + { + employee = new() { FirstName = "Vikram Reddy", LastName = "Gaddam", IsActive = true }; + editContext = new EditContext(employee); + editContext.OnFieldChanged += HandleFieldChanged; + + base.OnInitialized(); + } + + public void HandleOnValidSubmit() + { + disableSave = !editContext.Validate(); + + var toastMessage = new ToastMessage + { + Title = "Save Employee Details", + Message = $"Employee details saved successfully.", + AutoHide = true, + Type = ToastType.Success, + IconName = IconName.CheckCircleFill, + }; + + ToastService.Notify(toastMessage); + } + + private void HandleFieldChanged(object sender, FieldChangedEventArgs e) + { + disableSave = !editContext.Validate(); + + var toastMessage = new ToastMessage + { + Title = "Field Changed Notification", + Message = $"The field \"{e.FieldIdentifier.FieldName}\" was changed.", + AutoHide = true, + Type = ToastType.Info + }; + + ToastService.Notify(toastMessage); + } + + private void ResetForm() + { + employee = new(); + editContext = new EditContext(employee); + editContext.OnFieldChanged += HandleFieldChanged; + } + + public class Employee + { + [Required(ErrorMessage = "First name required.")] + public string? FirstName { get; set; } + + [Required(ErrorMessage = "Last name required.")] + public string? LastName { get; set; } + + public bool IsActive { get; set; } + } +} diff --git a/blazorbootstrap/Components/Form/Switch/Switch.razor.cs b/blazorbootstrap/Components/Form/Switch/Switch.razor.cs index 99e39775e..57d540e39 100644 --- a/blazorbootstrap/Components/Form/Switch/Switch.razor.cs +++ b/blazorbootstrap/Components/Form/Switch/Switch.razor.cs @@ -5,7 +5,7 @@ public partial class Switch : BaseComponent #region Events /// - /// This event fired when the switch selection changed. + /// This event is fired when the switch selection changes. /// [Parameter] public EventCallback ValueChanged { get; set; } = default!; @@ -27,6 +27,8 @@ public partial class Switch : BaseComponent protected override async Task OnInitializedAsync() { + oldValue = Value; + Attributes ??= new Dictionary(); fieldIdentifier = FieldIdentifier.Create(ValueExpression); @@ -56,6 +58,10 @@ protected override async Task OnParametersSetAsync() /// public void Enable() => Disabled = false; + /// + /// This event is triggered only when the user changes the selection from the UI. + /// + /// private async Task OnChange(ChangeEventArgs args) { bool.TryParse(args.Value?.ToString(), out var newValue);