Pages

Les pages sont des composants qui définissent le contenu de la page web.

Page simple

Une page très simple ressemble à ceci:

@page "/mapage"

<PageTitle>Titre de la page</PageTitle>

<h1>Hello, world!</h1>

<p>C'est du HTML</p>

Le @page "/mapage" définit l'URL de la page. Ici la page sera accessible à l'URL http://monsite/mapage.

La balise <PageTitle> permet de définir le titre de la page, c'est un composant fourni par Blazor.

Le reste du code est du HTML classique.

Une page peut contenir des composants imbriqués, des balises C# et des balises HTML.

Page avec paramètre

Votre page peux être appelé avec des paramètre.

Prenons pour exemple une page /random qui nous génère un nombre aléatoire

@page "/random"

<p>@ValeurRandom</p>

@code {
    private static int min = 0;
    private static int max = 10;
    private int ValeurRandom = new Random().Next(min, max);
}

Si l'on veux controller notre valeur min et valeur max on va les ajouter a notre url On aurait donc un lien semblable a cela pour générer un chiffre entre 1 et 10 : http://localhost/random/1/10

@page "/random"
@page "/random/{Min:int}/{Max:int}"

<p>@ValeurRandom</p>

@code {
    [Parameter] public int? Min {get; set;}
    [Parameter] public int? Max {get; set;}
    private int ValeurRandom = -1;

    protected override void OnInitialized() 
    {
        base.OnInitialized();
        ValeurRandom = new Random().Next(Min ?? 42, Max ?? 1337);
    }
}

Vous notterez la présence de 2 @page. Notre page peut donc être appelé via http://localhost/random ou http://localhost/random/1/10.

Le second @page contient 2 paramètres, ce sont les valeurs entre {}.

On a un paramètre min et un paramètre max, par défaut les paramètre sont en string ici on a ajouté :int pour spécifier que l'on attend des entier.

On récupère par la suite les valeurs dans el bloc de code.

Nos paramètres sont annoté avec [Parameter] et la variable est nommé avec le même nom que dans le @page. Les variable sont nullable ? pour gérer le cas ou l'on arrive depuis l'url http://localhost/random .

Page interactive

Une page un peu plus complexe pourrait ressembler à ceci:

@page "/"
@rendermode InteractiveServer
@using System

<PageTitle>Interactive</PageTitle>

<h1>Such wow</h1>

@if (hidden == false)
{
    <p>J'adore les @fruits</p>
} else {
    <p>Caché !</p>
}

<button class="btn btn-primary" @onclick="DoSomething">Do something</button>
<button class="btn btn-primary" @onclick="Hide">Hide/Show</button>

@code {
    private string fruits = "pommes";
    private bool hidden = false;

    private void DoSomething()
    {
        fruits = "cerises";
    }

    private void Hide()
    {
        hidden = !hidden;
    }
}

Ici, nous avons un bouton qui change le texte affiché lorsque l'on clique dessus.

Lors du clic sur le bouton, la méthode DoSomething est appelée et change la valeur de la variable fruits.

Le rendermode InteractiveServer permet d'indiquer que la page est interactive, lorsque l'on appuie sur le bouton, le code est exécuté côté serveur et la page est mise à jour.

Le code C# est défini dans la balise @code et peux être utilisé dans le reste de la page.

Pour déclencher l'appel de la méthode DoSomething lors du clic sur le bouton, on utilise l'attribut @onclick qui prend en paramètre la fonction à appeler.

Vous noterez également la présence d'une condition if qui permet d'afficher ou non un élément en fonction de la valeur de hidden.

Si l'on a besoin d'inclure un namespace, on peut l'ajouter en utilisant la directive @using en haut du fichier.