Blazor : ma première application (binding)

avr. 4 2018 5:35

Update v0.2

Série d'article sur Blazor :

Si vous ne l'avez déjà fait, je vous invite à lire l'article précédent sur l'installation et la présentation de Blazor.

Remarque important : ce article est basé sur la version 0.1 de Blazor. Donc beaucoup de choses risque de changer dans les semaines qui viennent.

So, let's go!

Maintenant que vous avez créé votre première application Blazor, regardons plus avant son contenu :

On a l'impression de se retrouver face à une application ASP .NET Core MVC "classique". Mais rappelez vous qu'ici, il n'y est pas question de serveur, de WebApi ou similaire : tout s'exécute côté client, dans le navigateur.

@page

Regardons le contenu de la page index.cshtml :

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

Tout dans Blazor (au niveau UI) est un Component. Une page est un Component, une page contient des Component qui peuvent contenir des Components, etc.

Ici, on a un Component un peu particulier puisqu'il possède la nouvelle directive @page qui indique au moteur de Blazor que l'on peut naviguer vers cette page. Le système de routage de Blazor peut faire lz sujet d'un article complet aussi la seule chose importante à retenir ici, c'est que l'argument de la directive donne le lien relatif. Comme dans notre page Component Index il n'y a rien c'est donc la page d'accueil de notre site.

NB: un Component Blazor est juste une classe .NET qui hérite de Microsoft.AspNetCore.Blazor.Components.IComponent. Le framework Blazor ajoute une implémentation avec le BlazorComponent.

Ensuite on a du code html "classique" jusqu'au tag SurveyPrompt avec son attribut Title.

Component

Ce tag est en réalité un autre Component de notre application qui possède une propriété public Title. Si l'on regarde le code de notre Component SurveyPrompt :

<div class="alert alert-survey" role="alert">
    <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
    <strong>@Title</strong>
 
    Please take our
    <a target="_blank" class="alert-link" href="https://go.microsoft.com/fwlink/?linkid=870381">
        brief survey
    </a>
    and tell us what you think.
</div>
 
@functions
{
    // This is to demonstrate how a parent component can supply parameters
    public string Title { get; set; }
}

Cette fois, comme on n'a pas la directive @page, ce composant est destiné a être inclu dans un autre composant. Mais surtout, on voit la directive @function (classique dans Razor) pour indiquer que l'on a du code C# à cet endroit.

On retrouve notre propriété Title que l'on a définit dans notre page index.

NB : le code "behind" est directement inclu dans la page .cshtml. Il est prévu qu'à terme il y ai la possibilité d'avoir 2 fichiers par component, un pour l'UI (code Razor) et un autre pour le code behinf en .NET (C#, VB, F#, etc.).

Binding Code => UI (One-Way binding)

On a donc notre propriété Title que l'on veut afficher dans l'UI de notre composant SurveyPrompt. Le binding est ici unidirectionnel du code vers l'UI. Ie si l'on change la valeur de la propriété Title, l'UI sera modifiée. Ce binding se fait grâce à la syntaxe suivante :

@Title

(équivalent de {{title}} en Angular).

Binding UI => Code (Event binding)

Pour voir ce type de binding, allons voir le code du composant Counter (Counter.cshtml) :

@page "/counter"
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
 
<button onclick="@IncrementCount">Click me</button>

 
@functions {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
}

C'est une page que l'on accède via l'url http://localhost:4242/counter (directive @page). Dans le code behind, on a une méthode IncrementCount. Cette méthode est appelée quand on clique sur le bouton. Vous pouvez écrire ce code de la façon suivante :

onclick="@(() => IncrementCount())"

Pour l'instant, on n'a pas beaucoup d'évènement auxquels on peut réagir :

onclick
onchange

OK, c'est vraiment léger mais ce n'est que le début ;-)

(équivalent de (click)='onclick()' en Angular).

Binding UI <=> Code (Two-Way binding)

Cette fois, on est dans le scénario ou l'on veut lié une propriété de notre composant avec un élément de l'UI de notre composant. Par exemple, une zone de saisie comme un <input ...>.

Dans le template "client only" de la v0.1 de Blazor, il n'y a pas d'exemple de binding two way. Qu'à cela tienne, on va modifier notre exemple de la page counter :

@using System.Globalization
@page "/counter"
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
<p>Increment value: <input bind="@IncrementValue" type="number" ></p>
 
<button @onclick(() => IncrementCount())>Click me</button>
 
@functions {
    int currentCount = 0;
    private int _incrementValue = 1;
 
    public string IncrementValue
    {
        get { return _incrementValue.ToString(CultureInfo.InvariantCulture); }
        set { int.TryParse(value, out _incrementValue); }
    }
 
    void IncrementCount()
    {
        currentCount+= _incrementValue;
    }
}

Le binding entre la propriété IncrementValue et le tag <input> s'effectue grâce à la directive @bind tout simplement.

IMPORTANT : cette directive @bind est appelée à disparaitre avec une nouvelle syntaxe qui permettra des scénarios de binding plus complexe. Cela devrait apparaitre dès la version v0.2 du framework Blazor.