When does the StateHasChanged method call automatically?
The StateHasChanged method is called whenever a bound property is changed or a UI event triggered for an instance. This notifies the Blazor that the component should rerender it. For example, when a button is clicked in the index page, the index component rerenders (no need to call StateHasChanged) because the button’s parent is an index; but when it has a child component it has be notified to render as the parent has changed.
How to make two-way binding with input date value?
Two-way binding is having a bidirectional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property. Blazor provides support for two-way binding using the bind attribute. Syntax for creating two-way binding property: For e.g.., in InputDate, a form component can be used to achieve two-way data binding with input date values in a Blazor application. Refer to the following code for more details. In this example code, when the value of _test.DateValue is changed in the code or user changes the date in the InputDate component, the same will be reflected in the paragraph, “Selected Date”.
How to make one-way binding with the input date value?
One-way (unidirectional) binding is all about moving data in one direction from the “Parameter/Property” to the UI (components). You just need to add the @ symbol to the variable name (for example, @yourVariable). For example, one-way binding with an input date value can be achieved using the InputDate component (form component in Blazor) as follows in an application. In this example, the property DateValue in _test class is bound to the InputDate component’s value property using the value attribute. A form is defined by the EditForm component.
How to perform validations in Blazor?
Blazor provides support for validating form input using data annotations with the built-in DataAnnotationsValidator. The ValidationSummary can be used to display error messages for all the fields. It can also be used to display custom error messages. The <DataAnnotationsValidator/> and <ValidationSummary /> components only validate top-level properties. It does not validate the collection or complex-type properties of the model class. The Model class needs to be bound to the EditForm component. Blazor provides ObjectGraphDataAnnotationsValidator to validate the entire model object including collection and complex-type properties. This component is defined in Microsoft.AspNetCore.Blazor.DataAnnotations.Validation package and currently it is in an experimental stage.
What is the purpose of component initialization methods in Blazor?
Blazor provides both synchronous and asynchronous initialization lifecycle methods to perform additional operations on components during initialization and rendering. Initialization methods are: OnInitialized and OnInitializedAsync are executed when the component is initialized after having received its initial parameters from its parent component in the render tree. Use OnInitializedAsync when the component performs an asynchronous operation and the changes should refresh the component when the operation is completed. Refer to this link for more details.