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 fromCounter
andFetchData
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 anhr
tag and ap
element containing any arbitrary text.
The differences in the app UI before and after the changes should be as follows:
Get hands-on with 1200+ tech skills courses.