Challenge: Adding Razor Components to the Homepage

Test yourself by adding Razor components to the homepage of a Blazor MAUI app.

We'll cover the following

Using the project at the end of this lesson, perform the tasks highlighted in the problem statement section.

Problem statement

The challenge consists of the following tasks:

  • Adding Razor components to the main page.

  • Modifying the layout.

Adding Razor components to the main page

The project at the end of this lesson represents a standard Blazor template with three separate Razor component pages: Index, Counter, and FetchData. You need to make changes to the application so the Counter and FetchData Razor components are shown directly on the homepage.

Modifying the layout

Since we're no longer using separate Razor component pages, you will need to do the following:

  • Remove the page directive from Counter and FetchData Razor components.

  • Remove the reference to NavMenu from the layout.

  • Add a footer to the layout, which should be represented by a div HTML element. This element should contain a horizontal line separator represented by an hr tag and a p element containing any arbitrary text.

The differences in the app UI before and after the changes should be as follows:

Get hands-on with 1400+ tech skills courses.