Negli ultimi script abbiamo proposto un paio di esempi (https://www.aspitalia.com/script/1338/Impostare-Focus-Controllo-Blazor-Tramite-JavaScript.aspx e https://www.aspitalia.com/script/1339/Invocare-Funzioni-JavaScript-Maniera-Fortemente-Tipizzata-Blazor.aspx) su come interagire con il mondo JavaScript dai nostri componenti Blazor.
Proseguendo sul medesimo caso d'uso di impostare il focus su un particolare elemento della pagina, possiamo apportare ancora una miglioria alla nostra invocazione. L'obiettivo, questa volta, è eliminare anche la stringa con cui indichiamo l'id dell'elemento su cui porre il focus. Andiamo quindi a correggere il Razor Component in questo modo.
@page "/"
@inject IJSRuntime jsRuntime
<input type="search" @ref="searchBox" placeholder="Cerca..." />
@code {
ElementReference searchBox;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await jsRuntime.FocusElement(searchBox);
}
}
}
In questo caso abbiamo posto l'attributo @ref sulla casella di testo, che ci permette di ottenere il riferimento a quell'elemento HTML e di conservarlo in un campo privato di tipo ElementReference. Tale riferimento viene quindi fornito come argomento all'extension method, che aggiorniamo come segue.
namespace BlazorDemo.Extensions
{
public static class IJSRuntimeExtensions
{
public static async Task FocusElement(this IJSRuntime jsRuntime, ElementReference element)
{
await jsRuntime.InvokeVoidAsync("focusElement", element);
}
}
}
E, per finire, dobbiamo anche aggiornare la funzione JavaScript focusElement, che ora riceverà il riferimento all'elemento stesso, anziché il suo id.
function focusElement(element) {
element.focus();
}
In questo modo, con pochi e semplici passi, siamo riusciti a rendere fortemente tipizzate anche le invocazioni a funzioni JavaScript.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare gRPC su App Service di Azure
Potenziare la ricerca su Cosmos DB con Full Text Search
Eliminare una project wiki di Azure DevOps
Gestione file Javascript in Blazor con .NET 9
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Utilizzare una qualunque lista per i parametri di tipo params in C#
Gestire il colore CSS con HWB
Gestire gli accessi con Token su Azure Container Registry
Rendere le variabili read-only in una pipeline di Azure DevOps
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Generare velocemente pagine CRUD in Blazor con QuickGrid
I più letti di oggi
- Disponibile l'Update 1 per Entity Framework 4.1
- Dal 29 febbraio arriva WinRTItalia.com: tutto sullo sviluppo per Windows 8 e Metro
- Annunciato Visual Studio 2013: la prima preview a fine mese a Build
- Anteprima del nuovo Web Matrix
- Le pubblicazioni riprenderanno il 12
- Microsoft Launch Tour 2006 a partire dal 7 marzo 2006