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]

How do I bind input of type time with Blazor?

You can  bind an input of type time in Blazor by using the @bind property to the time value and @bind:format property to specify the supported time format in the DOM input element. Refer to the following code sample.

How do I render raw HTML in Blazor?

Raw HTML can be rendered in Blazor by using the MarkupString. You can set the raw HTML as a string to any parameter and cast it in a markup string.

How do I do case insensitive string comparison in a Blazor page?

String comparison with case insensitivity can be carried out using the  String.Compare method, where the first and second parameters are the strings to be compared and the third parameter is for ignoring case sensitivity (case insensitive comparison). View Sample in GitHub