Refactoring Razor components

In the current implementation, we can observe that most of the duplicated code is found in the Items and ItemDetail pages. Throughout the remainder of this chapter, we will transform this duplicated code into Razor components.

We will create the following components:

• Navbar: This component displays a navigation bar.
• Dropdown: This component supports a context menu.
• ListView: This component displays a list of items.

The ListView component is the most complex one, so we will address it at the end of this section. For now, let’s focus on the Navbar and Dropdown components first.

Creating the Navbar component

Let’s examine the navigation bar UI in Figure 10.11. We can observe that the navigation bar features a Back button, a Title, and an Add button:

Figure 10.11: Navigation bar

The following paragraph presents the current code of the navigation bar. This code snippet appears on both the...