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.
How is the onclick event of HTML element handled in Blazor?
Blazor provides support for event handling of HTML element by referring a pointer to the function that is used to handle the event, For handling @onclick event of the HTML element, define a function/method in the @code section and then refer the delegate typed value to the @onclick attribute of the HTML element. Refer to the following code sample. Here, the ButtonClick is the event handler function (delegate typed value) assigned to @onclick of the button (HTML element).
How to implement State Management in Blazor?
State in Blazor: In Blazor, the user’s state is held in the server’s memory in a circuit. State Management refers to the persisting state of an application even after the connection is lost or disconnected. The state held for a user’s circuit may be any of the following, Need for State Management: In Blazor, the application is connected through a circuit to the server, which holds the user’s state and this can be lost or disconnected due to multiple reasons. Some of the reasons are as follows, Due to the above, user’s state may be lost and can also cause loss of crucial data gathered in the application such as, When data is lost after completing processes with multiple steps or creating a shopping list, it results in unnecessary time consumption. So, in Blazor, the data is stored in the local cache and state persists even when the circuit gets disconnected. Persisting the State/State Management: The three locations for persisting state in a Blazor application are as follows, Server-side (Database): To store data/state permanently or any data that spans multiple users or devices, the server-side database should be used. Client-side (Browser): Most suited when the user is actively creating transient data, that can be stored in the browsers, localStorage and sessionStorage. URL: This is best suited when the data/state needs to persist when navigating from one page of the application to another. For more information on state management, refer here. View Sample in GitHub