Creating Advanced Blazor Components (Part 3)

 

Exploring The New Built-in Component

When Blazor was initially released, several tasks were difficult to accomplish, and in some instances, we had to use JavaScript to address the challenges. There are following new components or functions:

• Setting the focus of the UI
• Influencing HTML head
• Component virtualization

Setting The Focus of the UI

By using ElementReference, you can now set the focus on the element. Let's build a component:

• Right-click on the Pages folder, select New | Razor component, and name it SetFocus.Razor.

• Open SetFocus.Razor and add a page directive.

• Add an element reference.

• Add the textbox and a button. By using @ref, you specify a reference to an object that you can use to access the input box. The button onclick method will execute the FocusAsync() method and set the focus on the textbox.

• Press F5 to run the project and then navigate to /setfocus.

• Press the Set focus button and notice how the textbox gets its focus.

Influencing HTML Head

At times, we may need to modify the page title or update the meta tags for social media. The head tag can be found in index.html (for WebAssembly) or _host.cshtml (for server-side), and this section of the page does not get reloaded or rerendered (only the components within the app component are updated). In earlier versions of Blazor, you’d have to implement this functionality yourself using JavaScript.

But .NET has a couple of new components we can use to solve that:

• Title
• Link
• Meta

You only have to add these components to your component to change the title, link, or meta tag. This feature never got into the final release of .NET 5. It is still in preview, but it was a very big deal.

To use these components, we will create a page to view one of our blog posts. We will use many of the techniques we have learned:

• First, we need to add a reference to the Microsoft.AspNetCore.Components. Web.Extensions NuGet package. In the solutions explorer beneath the MyBlogServerSide node, right-click on Dependencies and select Manage Nuget Packages.

• Search for Microsoft.AspNetCore.Components.Web.Extensions, select it, and click Install. This package is only available in preview, so make sure to check the Include prerelease option.

• Open Pages/Index.razor.

• Change the foreach loop.

• Right-click on the Pages folder, select Add | Razor component, and name the component Post.razor.

• In the code section, add a parameter that will hold the ID of the post.

• Add a page directive to get the set, the URL, and the ID. The page directive will set the URL for our blog post to /post/, followed by the ID of the post. We are also specifying that the BlogPostId is an integer. If the URL contains something that is not an integer, then Blazor will not find the page in question.

• We don't have to add a using statement to all our components. Instead, open _imports.razor and add namespaces. This will make sure that all the components we build will have namespaces by default.

• Open Post.razor again and, just beneath the page directive, inject the API (the namespace is now supplied from _imports.razor). Our API will now be injected into the component and we can retrieve our blog post. We also have access to a navigation manager.

• In the code section, add a property for our blog post. This is going to contain the blog post we want to show on the page.

• To load the blog post, add code. We can use the OnParameterSet() method. This is just to make sure that the parameter is set when we get data from the database, as well as to make sure that the content updates when the parameter changes.

• We also need to show the post and add the necessary meta tags. When the page is first loaded, the BlogPost parameter can be null, so we first need to check whether we should show the content at all. By adding the Title component, Blazor will set the title of our site to, in this instance, the title of our blog post.

• Run the project by pressing F5 and navigate to a blog post to see the title change.

Component Virtualization

Virtualize is a newly introduced feature in Blazor that ensures only the components or rows currently in view are rendered. Displaying all items in a large list can significantly affect memory usage. Numerous third-party component providers offer grid components with similar virtualization capabilities.

The Virtualize component determines the number of items that can be displayed on the screen, considering both the window size and the height of each item. When you scroll the page, Blazor inserts a div tag before and after the content list to ensure that the scrollbar displays the correct position, even if no items are currently rendered. The Virtualize component operates similarly to a foreach loop.

The Virtualize component is very powerful:

• Open Pages/Index.razor.

• Delete the OnInitializedAsync method and protected List posts = new List(). We don't need this.

• Change the loading of the post to Virtualize. We will use a method called LoadPosts, which we also need to add to the file.

• Now, let's add the LoadPosts method by adding code. We add a totalBlogposts property where we store how many posts we currently have in our database. The LoadPost method returns ValueTask with ItemsProviderResult. The method has ItemsProviderRequest as a parameter, which contains the number of posts the Virtualize component wants and how many it wants to skip.

Now we have implemented a Virtualize component that will load and render only the number of blog posts needed to fill the screen.

Conclusion

We have successfully looked at more advanced scenarios for building components. We also learnt about some of the new features in .NET 5 for Blazor to load and display data.