Hello!
Today we will look at how you can create a new page in BlazorServer and add it to the menu.
Add new page
To do this, right-click on the Pages folder and select Razor Component...
The following window will appear in which you need to enter the name and click Add.
The page will be created with the following content:
<h3>Test1</h3>
@code {
}
To be able to open it in the browser at the beginning of the file you need to add @page" /test1" where test1 is the name of the endpoint. And now run the application and enter it in the browser localhost:5001/test1
But our page is not displayed in the menu. Let’s add it now.
Add page in menu
Select the file with menu Shared/NavMenu.razor
The file has the following content
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">BlazorLearn</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>
</div>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
What we need is to add another element to @NavMenuCssClass, it is this div that is responsible for displaying the menu elements. I will add the following item
<li class="nav-item px-3">
<NavLink class="nav-link" href="test1">
<span class="oi oi-aperture" aria-hidden="true"></span> Test1
</NavLink>
</li>
href - this is the endpoint of the page
<span class="oi oi-aperture" aria-hidden="true"></span> - adds an icon to the menu item
Start applications and get the result.
Folder structure
Pages can be organized into folders. For example, I will create a Demo folder inside Pages and move the page Test1.razor to it.
After launching the application, the page will still work, even if we change it location. But with such a folder structure, it would be more logical to reflect this in the endopint. To do this in Test1.razor i will change the endpoint from@page "/test1"to@page "/demo/test1". Also, I need to make change in the NavMenu.razor file from href = "test1" to href = "demo/test1".
