Anche se Blazor ci permette di usare C# per realizzare la parte client di un'applicazione web, avremo ancora la necessità di interoperare con librerie scritte in JavaScript: mappe, grafici, caroselli e player video sono solo alcune delle funzionalità avanzate che possiamo implementare usando una di queste librerie.
Man mano che l'ecosistema di Blazor matura, interagire con tali librerie JavaScript diventerà più semplice grazie a pacchetti NuGet che agiscono da wrapper e che perciò ci permettono di usarle scrivendo unicamente codice C#. Questo sta già succedendo: si veda ad esempio Awesome Blazor, un repository GitHub che censisce svariati di questi wrapper. Alcuni sono pronti per l'uso in produzione, mentre altri sono solo in versione alpha.
[url]https://github.com/AdrienTorris/awesome-blazor#libraries--extensions[/url]
Tuttavia, ad oggi, Blazor Server è un prodotto ancora giovane e quindi in alcune situazioni potrebbe capitarci di dover interoperare con JavaScript. Vediamo come fare.
Un semplice esempio di interoperabilità con JavaScript
Iniziamo creando una funzione JavaScript molto semplice, che poi andremo a invocare da codice C#.Per prima cosa creiamo un nuovo file .js, ad esempio /wwwroot/js/app.js, in cui definiamo la seguente funzione JavaScript. A scopo puramente esemplificativo, la funzione si limiterà a porre il focus su un elemento HTML il cui id viene fornito come argomento.
function focusElement(elementId) { document.getElementById(elementId).focus(); }
Ora andiamo a referenziare il file /wwwroot/js/app.js dalla Razor Page che ospita la nostra applicazione Blazor Server, ad esempio la /Pages/_Host.cshtml. Aggiungiamo la riga seguente subito prima della chiusura del tag body.
<script src="~/js/app.js"></script>
Usare un file JavaScript esterno come questo è essenziale, perché le funzioni JavaScript non possono essere definite nei Razor Component, cioè nei file con estensione .razor. Infatti, se lo facessimo, otterremmo questo errore all'atto della compilazione.
error RZ9992: Script tags should not be placed inside components because they cannot be updated dynamically.
Invocare la funzione JavaScript da un Razor Component
Ora che abbiamo creato la nostra funzione chiamata focusElement la possiamo invocare da un Razor Component grazie al servizio IJSRuntime che riceviamo con la direttiva @inject. Andiamo a porre quanto segue nel file /Pages/Index.razor o in un qualsiasi altro Razor Component.@page "/" @inject IJSRuntime jsRuntime <input type="search" id="searchBox" placeholder="Cerca..." /> @code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { //Il Razor component è stato appena renderizzato per la prima volta //quindi posso invocare la funzione JavaScript usando il servizio IJSRuntime //Passiamo come argomenti il nome della funzione e l'id dell'elemento su cui dev'essere posto il focus await jsRuntime.InvokeVoidAsync("focusElement", "searchBox"); } } }
Se avviamo l'applicazione, noteremo che il focus viene posto automaticamente nella casella ogni volta che visitiamo il Razor Component. Questa è la riprova che il nostro codice sta funzionando.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Eseguire operazioni sui blob con Azure Storage Actions
Utilizzare i primary constructor in C#
Usare le navigation property in QuickGrid di Blazor
Hosting di componenti WebAssembly in un'applicazione Blazor static
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Eseguire una GroupBy per entity in Entity Framework
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Implementare l'infinite scroll con QuickGrid in Blazor Server
Utilizzare un service principal per accedere a Azure Container Registry
Utilizzare QuickGrid di Blazor con Entity Framework
I più letti di oggi
- anche domani dalle 17:30 seguite con noi live #build15 https://aspit.co/build15
- Webcast 'AJAX & ATLAS Overview'
- a #igds il 25 e 26/10 a Milano puoi sviluppare un gioco per #wp8 con @AppCampus. in palio 70.000 Euro: https://aspit.co/apa
- WinJS in Windows Phone 8.1
- la RC di #vs13 è compatibile con #win81 RTM, non con la Preview. l'annuncio ufficiale è su https://aspit.co/any
- Ancora un bug: esce Mono 0.23
- SSL Certificates for everyone on Azure
- Mostrare una MessageBox con un custom control
- disponibile la preview 1 ci #dotnetcore 2.1, #aspnetcore, #efcore. performance, novità e migliorie su https://aspit.co/bmf
- si continua a #netconfit con 'developing modern web apps with #aspnetcore', con il nostro @dbochicchiohttps://aspit.co/netconf-18