How do I create a custom component?
You can create custom components in Blazor and reuse them across the application. You can also create a razor component in a shared or custom folder, and define it. Then, the custom component like HTML tag (FileName) can be used in the application. //parent component In the above example, the header component is used in the index page. Similarly, the component can be shared across the application as a HTML tag to improve code reusability.
Does Blazor support end-to-end (E2E) testing?
Yes, Blazor supports E2E testing with the help of the Steve’s prototype library. This library can be included in your testing projects for E2E testing. Its compatible with traditional unit testing frameworks such as XUnit and NUnit and is a straightforward and clean way of writing tests. For more information, please refer to here.
How do I automatically refresh a component in Blazor?
Blazor detects the UI changes in common scenarios like EventCallback (button click, dropdown select, etc.), and refreshes the component. However, there are some situations in an app where a UI refresh needs to be triggered manually to re-render the component. The StateHasChanged method is used to force re-render a component UI.
How to create a Blazor app with responsive design for both Desktop and Mobile browsers?
Blazor application renders UI as HTML content in client-side (browser). So, you can determine whether it is a Desktop, or a Mobile device based on the viewport’s width. The meta tag named “viewport” is used to design the webpage responsiveness and this is included in all Blazor applications, _Host.cshtml file in Blazor server-side application and index.html file in Blazor Web Assembly application. CSS styling makes designs responsive in Blazor apps. Another way, you can create a responsive design using media queries that adjusts to the size of the user’s screen based on desktop or mobile browser. For example, you define breakpoints for small, medium, and large screen sizes. For more details, refer to this link.
How do I reconnect Blazor server-side automatically?
To reconnect the Blazor server automatically you need to include the following code in the script of the Blazor application. This will refresh the Blazor server automatically when it is up again. [_Host.cshtml]