You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.9 KiB
84 lines
2.9 KiB
2 years ago
|
---
|
||
|
|
sidebar_position: 4
|
||
|
|
title: 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:
|
||
|
|
|
||
|
|
```cshtml title="Pages/List.razor"
|
||
|
|
@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.
|
||
|
|
|
||
|
|
```cshtml title="App.razor"
|
||
|
|
<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`.
|
||
|
|
|
||
|
|
```cshtml title="Pages/BlazorRoute.razor"
|
||
|
|
// 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.
|
||
|
|
:::
|