Dopo circa due mesi dal rilascio di .NET Core 3.0, Microsoft rende disponibile anche la nuova minor release .NET Core 3.1 che ha l'obiettivo di raffinare le funzionalità già introdotte precedentemente. Trattandosi di una versione LTS (Long-Term Support), godrà di un ciclo di aggiornamenti che durerà almeno 3 anni e perciò è la versione che dovremmo scegliere se stiamo iniziando un nuovo progetto.
I fix hanno riguardato principalmente Blazor Server, Entity Framework Core e le tecnologie di sviluppo desktop come WinForms e WPF che possono essere usate su .NET Core già dalla versione 3.0.

Quest'oggi, in particolare, vedremo quali sono i fix che hanno interessato Blazor Server.

Supporto ai codefile per i Razor Component

• Nel file con estensione .razor manteniamo il markup HTML e la direttiva @page;
• In un nuovo file con estensione .razor.cs definiamo una partial class e inseriamo in essa il codice C# che si trovava nel blocco @code.

Questo modello di separazione del codice risulterà familiare a chi ha già esperienza con ASP.NET, infatti ricorda quello di Razor Pages e, ancor prima, quello di ASP.NET WebForms che pure impiegava una pagina per il markup HTML e un relativo codefile per il codice C#.

Nuovo tag helper Component

<app>
  @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

Da ASP.NET Core 3.1, l'html helper continua a essere supportato ma al suo posto è preferibile usare l'apposito tag helper Component. Ecco dunque un esempio di codice per iniziare a sfruttarlo.

<app>
  <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

Su questo tag helper possiamo indicare degli attributi personalizzati per fornire dei valori al Razor Component. Gli attributi devono possedere il prefisso param- come nel seguente esempio.

<app>
  <component type="typeof(App)" render-mode="ServerPrerendered" param-ProductId="5" />
</app>

Il valore dell'attributo potrà poi essere recuperato dal codefile del Razor Component definendo una proprietà pubblica che porta lo stesso nome e decorandola con l'attributo [ParameterAttribute]. Perciò, nella classe del Razor Component, aggiungiamo quanto segue.

[ParameterAttribute]
public int ProductId { get; set; }

Gestire gli effetti collaterali degli eventi client

<article @onclick="OpenArticle">
  <h2>Web UI con Blazor Server</h2>
  <p>Questa settimana costruiamo un'applicazione con Blazor Server.</p>
  <p>Pubblicato su: <a href="https://www.aspitalia.com">ASPItalia.com</a></p>
</article>

Se l'utente clicca il link ad ASPItalia.com, si verificheranno due effetti:

• Il browser inizierà la navigazione verso www.aspitalia.com, come azione predefinita che si verifica al click su un link;
• Il metodo OpenArticle verrà invocato perché il browser propaga gli eventi anche agli elementi contenitori, per via di un effetto chiamato bubbling;

In alcune situazioni, potremmo avere la necessità di impedire uno o entrambi questi effetti collaterali. Perciò possiamo usare due speciali attributi denomitati onNomeEvento:preventDefault e onNomeEvento:stopPropagation.

• Con @onclick:preventDefault impediamo l'azione predefinita, ovvero la navigazione verso www.aspitalia.com;
• Con @onclick:stopPropagation impediamo il bubbling dell'evento, e perciò OpenArticle non verrà eseguito.

Vediamo dunque come aggiungere questi attributi sul link.

<a href="https://www.aspitalia.com" @onclick:preventDefault @onclick:stopPropagation>ASPItalia.com</a>

Se preferiamo essere espliciti, possiamo valorizzare i due attributi con true o false ed eventualmente usare un'espressione C# per fare in modo che il loro valore cambi dinamicamente.

Visualizzare errori dettagliati

"DetailedErrors": true

A questo punto possiamo avviare il debug dell'applicazione e quindi aprire gli strumenti di sviluppo del browser con il tasto F12. In console vedremo apparire sia il testo che lo stack trace di ogni eccezione non gestita.

Eventualmente, possiamo rendere più evidente il problema aggiungendo un elemento div come il seguente all'interno del file /Pages/_Host.cshtml.

<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Questo elemento sarà tenuto nascosto dagli stili CSS iniettati nella pagina da Blazor Server, per poi essere reso visibile al verificarsi di un'eccezione.

Conclusioni