La unobtrusive validation ha il pregio di mantenere separato il markup HTML dal codice javascript necessario a implementare le logiche di validazione lato client. Ciò è possibile grazie a una serie di attributi personalizzati, identificati dal prefisso data-val-*, che vengono automaticamente aggiunti agli elementi che devono essere validati:
<div class="editor-field"> <input type="text" value="" id="FirstName" data-val="true" data-val-required="The FirstName field is required." /> <span data-valmsg-for="FirstName" data-valmsg-replace="true"></span> </div>
L'engine responsabile della unobtrusive validation, al caricamento della pagina, effettua automaticamente il parsing di questi attributi, preoccupandosi poi di aggiungere gli handler e le logiche di controllo necessarie.
Quando carichiamo una view tramite AJAX, per esempio sfruttando l'helper Ajax.ActionLink, l'operazione di parsing di questi attributi è stata già eseguita e, pertanto, il risultato è che la validazione lato client non sarà attiva. Per evitare questo problema, è sufficiente eseguire un'opportuna funzione Javascript al termine del caricamento:
<script type="text/ecmascript"> function initializeValidation() { $.validator.unobtrusive.parse('#contentDiv'); } </script> <div> @Ajax.ActionLink("New person", "Create", new AjaxOptions() { UpdateTargetId = "contentDiv", OnSuccess="initializeValidation" }) </div> <div id="contentDiv"></div>
Nella codice in alto, abbiamo definito una funzione initializeValidation che forza la rilettura degli attributi della unobtrusive validation sul contenuto di contentDiv. Essa verrà automaticamente eseguita al termine del caricamento della nuova view, dato che l'abbiamo referenziata nelle AjaxOptions utilizzate per impostare l'helper.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Visual Studio Code per lo sviluppo in team
Selezione e configurazione degli agent nelle pipeline di Azure DevOps
Progressive Web Apps with Blazor and Azure
Introduzione a Blazor WebAssembly
Ottimizzare le dimensioni di un'applicazione .NET Core tramite il trimming
Utilizzare Azure log streaming con ASP.NET Core
Utilizzare la libreria FluentValidation per validare formalmente un oggetto .NET
Utilizzare un web worker in Angular
Tracciabilità dei work item nel ciclo di vita del software con Azure DevOps
Navigazione sfruttando i fragments con Angular
Utilizzare il CSS Grid Model per creare il layout di un sito
PWAConf 2020
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un record in C#
- Winget: un nuovo package manager per Windows
- il 18/02 c'è il #container & #devops day! https://aspit.co/ContainerDevOpsDay-21 Le iscrizioni sono sempre aperte e la Call For Paper è attiva fino al 28/01! #aspilive #cfp
- Attesa e validazione manuale nelle pipeline YAML di Azure DevOps
- Utilizzare il CSS Grid Model per creare il layout di un sito