Creating more Razor components

We developed Modal dialog components in Chapter 9, Razor Components and Data Binding. In this chapter, we will refine our code to remove the duplicated code in Items and ItemDetail pages and convert the duplicated code into Razor components. We will create the following components:

• Navbar – This is a component to display a navigation bar
• Dropdown – This is a component to support the context menu
• ListView – This is a component to display a list of items

The ListView component is the most complicated one so we will leave it till the end of this section. Let’s work on Navbar and Dropdown first.

Creating the Navbar component

Let’s look at the navigation bar UI in Figure 10.1. We can see that the navigation bar contains a Back button, a title, and an Add button:

Figure 10.1: Navigation bar

The current code of the navigation bar is shown next, and this code snippet...