What are all the hosting models available in Blazor? Which Blazor hosting model should I choose and when?
There are two hosting models available in Blazor: Blazor Server and Blazor WebAssembly. Blazor Server Server-side Blazor apps are executed on the server within an ASP.NET Core application. All UI updates, JavaScript calls, and event handling are handled from the server using a SignalR connection. On the client side, the blazor.server.js script sets up the SignalR connection with the server. The script is served to the client-side app from an embedded resource in the ASP.NET Core shared framework. Blazor WebAssembly Blazor WebAssembly apps are executed on the client-side in the browser. The .NET runtime is downloaded with the app along with the app assembly and any required dependencies, then the application is executed directly from the browser UI thread. The WebAssembly app static assets are loaded as static files to a web server or service capable of serving static content to clients. The blazor.webassembly.js script handles downloading the app, the app’s dependencies, and the .NET runtime. The script file also initializes the runtime to run the app. Refer to this documentation section to help you choose a Blazor hosting model.
How do I cancel background long-running tasks when a user navigates to another page in Blazor?
The background long-running tasks are cancelled by using the CancellationToken object in Blazor. If an application downloads the data to render in view and then you navigate to another page, the CancellationToken cancels the download by using the Cancel() method. Call the Cancel() method by using the Dispose() method to cancel the background running task. In the following example, the background running task in the FetchData.razor component is cancelled when a user navigates to other pages in Blazor.[FetchData.razor] Refer to this documentation for more details.
How do you initiate automatic logout when a user is inactive in Blazor?
Using JavaScript onmousemove and onkeypress events to trigger the Timer function in a Razor component can identify whether a user is active or inactive. If the user has not performed any onmousemove or onkeypress events, the user is considered in an inactive state and the Timer function is called after certain TimeInterval to log the user out. Follow these steps to log the user out automatically if they’re not active: Call the onmousemove and onkeypress properties in a JavaScript function to fire the Timer function in the Razor component. [_Host.cshtml] Now call the Timer method to identify whether the user is active or not. Add navigation to the logout action when the user is inactive.[MainLayout.razor]
What is Blazor CSS isolation? How do you enable it for your application?
Blazor CSS isolation is a process that occurs at build time. By utilizing CSS isolation, you can restrict the scope of CSS files or styles to specific components within your app, preventing them from affecting other components globally. The CSS selectors are rewritten by Blazor to match markup rendered by the component. These rewritten CSS files are loaded as static assets in the {{Your_App_Name}}.styles.css.The static file name is referenced inside the tag of the _Host.cshtml file.[_Host.cshtml] / [index.html] <head> // . . . <link href=”{{Your_App_Name}}.styles.css” rel=”stylesheet” /></head> Follow these steps to enable CSS isolation for a Blazor application. Create a Blazor Server or WebAssembly application. To enable CSS isolation, create a razor.css file matching the .razor file for the component in the same folder.For example, if your component is named “Isolate.razor,” create a file alongside the component named “Isolate.razor.css.” The Isolate.razor.css file is placed in the same folder as the Isolate.razor component.[Pages/Isolate.razor] @page “/isolate” <h1>Hello, World</h1><p>Welcome to your new app</p> [Pages/Isolate.razor.css] h1 { color: blue; font-style: italic; text-shadow: 2px 2px 2px gray;} The Isolate.razor.css styles work only for the Isolate.razor component. Refer to this documentation for more details. View Sample in GitHub
How do you detect navigation events in Blazor WebAssembly?
The LocationChanged event handler is triggered when there is a change in the navigation location. In the example below, a JavaScript interop function is used to display an alert to the user whenever the navigation location changes: Refer to this documentation for more details.