Astuce Blazor : Séparer la vue du code

Depuis quelque temps dans la communauté .NET on ~~parle~~ fait pas mal de marketing autour de Blazor. Je ne vais pas vous présenter cette nouvelle techno... si vous etes ici, c'est que vous connaissez déjà :).

Une des premières choses qui m'a embété fut de voir dans les articles de présentation un mélange sans vergogne du code html et du code .NET wrappé dans la section @functions

je parle de ca :

@using System
@page "/guid"


    <h1>Guid Generator</h1>

    <input type="text" value="@generatedGuid"/><button type="button" @onclick(Generate)>Generate!</button>

    @functions {

        string generatedGuid = string.Empty;

        private void Generate()
        {
            generatedGuid = Guid.NewGuid().ToString();
        }
    }

Evidemment, ici le code est extremement simple, mais dans la vraie vie j'vous le donne dans le mille on aurait envie de faire des tests unitaires de notre code C#.

Je vous propose donc cette facon de faire. On va créer un classe qui hérite de BlazorComponent et on y mettra notre code métier.

Commençons par créér une classe qui contiendra notre code behind

using System;
using Microsoft.AspNetCore.Blazor.Components;

namespace OwnBlazor.Pages
{
    public class GuidGenerator : BlazorComponent
    {
        public string GeneratedGuid { get; set; }

        public void Generate()
        {
            GeneratedGuid = Guid.NewGuid().ToString();
        }
    }
}

la seule chose qu'il faut noter ici, c'est que notre classe hérite de BlazorComponent

Passons à notre vue qui est maintenant beaucoup plus propre.

@page "/guid2"
@inherits OwnBlazor.Pages.GuidGenerator

    <h1>Guid Generator</h1>

    <input type="text" value="@GeneratedGuid"/><button type="button" @onclick(Generate)>Generate</button>

Dans la vue on spécifiera que l'on hérite de notre classe GuidGenerator précédement créée.

Voila, c'est quand même un peu plus propre et surtout pn peut facilement tester notre code C#.

Menu