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.
What is Dependency Injection (DI) in Blazor?
Dependency Injection is a technique for accessing services configured in a central location. Blazor has built-in support for dependency injection (DI). Users can use predefined services in their apps by directly injecting them in the components. Blazor apps can also define custom services and make them available via DI. Blazor has a special base component called OwningComponentBase. For example, a component is created by the user by extending the OwningComponentBase will have special controls over injected services and ensure their proper disposal when a component is destroyed. Users can create custom services and use those services in the entire application. To do so, the custom services need to be added to the startup.cs (server side) and to program.cs (client-side Blazor) as either a singleton or scoped service. For more information, please refer here.
How are events suppressed in Blazor?
Blazor provides support for suppressing events of the HTML DOM element in two ways Suppressing default event Suppressing event propagation Suppressing default event: The default events of the HTML DOM element can be suppressed by using the @on{Event}:preventDefault directive attribute provided in Blazor. This is useful in scenarios like suppressing the on key press event of an input text box. You can also add your own event listener as done for event handling. Supressing event propagation: HTML DOM element’s events tend to propagate some events to their parent element and then its parent element, and so on. Blazor provides support to supress the event propagation using the @on{EVENT}:stopPropagation directive attribute. This takes a Boolean variable as the input. This is visualized as follows. As the stopPropagation attribute which takes the value of a Boolean variable can be bound to a property, the propagation can be stopped based on the user requirement.
How to prevent a default action of a link/anchor tag and perform a custom action when the link is clicked?
You can call the preventDefault action in onclick event of an anchor tag. Refer to the following code sample to prevent opening a link when the link is clicked. This feature was made available from .NET Core 3.1 Preview 2 for Blazor. You can also perform custom action for onclick in the anchor tag by defining the same onclick event and mapping it to custom action.
