How do I add UI features, such as smooth scrolling that are already available in jQuery UI components?

You can add smooth scrolling to a Blazor app using a combination of Blazor components and JavaScript interop, similar to the functionality available in jQuery UI components.   Step 1: Create a New Blazor App Run the following command to create a new Blazor WebAssembly app:   .NET CLI   dotnet new blazorserver -n SmoothScrollDemo  Step 2: Add CSS Styles Open the wwwroot/css/site.css file and add the following CSS class for smooth scrolling:  [wwwroot/css/site.css]   Step 3: Create a SmoothScroll Component Create a new Blazor component named SmoothScroll.razor:   [SmoothScroll.razor] Step 4: Add the following JavaScript function for scrolling to the bottom of the page in _Host.cshtml.  [_Host.cshtml] Step 5: Test the Smooth Scrolling Effect Run the Blazor app using the following command: NET CLI  dotnet run  View Sample in GitHub  

How do I modify the current culture date format in Blazor Server and Blazor WebAssembly apps?

DateTime.Now.ToShortDateString() and DateTime.Now.ToLongDateString() are methods that return the current culture date format. The string returned by the ToShortDateString and ToLongDateString methods are culture-sensitive. It reflects the pattern defined by the current culture’s date format. You can get the current culture date format by using either of the following methods. or

How do I show/customize a loading screen while loading a Blazor WebAssembly (client-side) app?

You can customize the loading text in a Blazor WebAssembly application by editing the tag for target framework version 3.* or the tag for target framework version 5.* in the index.html page. In the following example, I have customized the loading text while loading. [index.html] for target framework version 3.* [index.html] for target framework version 5.* Refer to this link for more details. View Sample in GitHub

How do I show/customize a loading screen while loading a Blazor Server app?

In the following example, LoadingScreen will display a loading message while data is loaded asynchronously. Once the data has been loaded, it replaces the loading message with the actual content. [LoadingScreen.razor] Wrap the Router in the LoadingScreen to show the loading screen in the Blazor app. [App.razor] Please refer to this link for more details. View Sample in GitHub