Blazor/Documentation/docusaurus/docs/add-item/add-button.md

sidebar_position	title
4	Add button

In order to access your add page, we are going to add a button above our grid.

Open the Pages/List.razor file and add the highlighted changes:

@page "/list"
@using MyBeautifulAdmin.Models

<h3>List</h3>

// highlight-start
<div>
    <NavLink class="btn btn-primary" href="Add" Match="NavLinkMatch.All">
        <i class="fa fa-plus"></i> Ajouter
    </NavLink>
</div>
// highlight-end

<DataGrid TItem="Data"
          Data="@data"
          ReadData="@OnReadData"
          TotalItems="@totalData"
          PageSize="10"
          ShowPager
          Responsive>
    <DataGridColumn TItem="Data" Field="@nameof(Data.Id)" Caption="#" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.FirstName)" Caption="First Name" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.LastName)" Caption="Last Name" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.DateOfBirth)" Caption="Date Of Birth" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.Roles)" Caption="Roles">
        <DisplayTemplate>
            @(string.Join(", ", ((Data)context).Roles))
        </DisplayTemplate>
    </DataGridColumn>
</DataGrid>

Concept: Routing

Routing patterns

The Router component allows routing to Razor components in a Blazor application. The Router component is used in the App component of Blazor apps.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

When a Razor component (.razor) with an @page directive is compiled, the generated component class is supplied as a RouteAttribute specifying the component's routing model.

When the app starts, the assembly specified as the AppAssembly router is scanned to collect routing information for app components that have a RouteAttribute .

At runtime, the RouteView component:

• Receives all route parameters from the RouteData Router.
• Renders the specified component with its layout, including additional nested layouts.

Components support multiple routing patterns using multiple @page directives.

The following sample component loads on requests for /BlazorRoute and /DifferentBlazorRoute.

// highlight-start
@page "/BlazorRoute"
@page "/DifferentBlazorRoute"
// highlight-end

<h1>Blazor routing</h1>

:::info For URLs to resolve correctly, the application must include a <base> in its wwwroot/index.html file (Blazor WebAssembly) or Pages/_Layout.cshtml file (Blazor Server) with the application base path specified in the href attribute. :::