How to bind a model in Blazor Toggle Switch Button
14 Aug 20261 minute to read
This section demonstrates the model binding support in the Toggle Switch Button. A view that can bind to any model is called a strongly typed view. You can bind any class as a model to a view. Model properties can be accessed directly in the view. The data associated with the model can be used to render the component.
In this sample, select the option and click the Submit button to post the selected value in the Toggle Switch Button. When the value is not checked, a validation error message is shown below the Toggle Switch Button.
@using Syncfusion.Blazor.Buttons
@using System.ComponentModel.DataAnnotations
<EditForm Model="Annotate">
<DataAnnotationsValidator></DataAnnotationsValidator>
<div class="form-group">
<SfSwitch @bind-Checked="@Annotate.Check"></SfSwitch>
<label>I agree to receive newsletter</label>
<ValidationMessage For="@(() => Annotate.Check)" />
</div>
<SfButton HtmlAttributes="@Submit" Content="Submit" IsPrimary="true"></SfButton>
</EditForm>
@code {
public Annotation Annotate = new Annotation();
public class Annotation
{
[Range(typeof(bool), "true", "true", ErrorMessage = "You need to agree to receive newsletter")]
public bool Check { get; set; }
}
public Dictionary<string, object> Submit = new Dictionary<string, object>()
{
{ "type", "submit" }
};
}