Javascript e ASP.NET
Ormai è una cosa nota: ASP.NET, grazie al Framework, facilita il lavoro di sviluppo di siti anche di una certa complessità grazie alle numerose classi messe a disposizione, ai numerosi Web Control presenti e a tutti quelli che, creati da terze parti, si possono aggiungere ai nostri progetti con un banale clicca-trascina-rilascia in ambienti di sviluppo RAD come Visual Studio.NET.
Forse a causa dell'approccio non proprio semplice di questo nuovo "mondo", agli inizi un programmatore che proviene da altre tecnologie server-side come le "vecchie" ASP, si trova disorientato nell'eseguire operazioni semplici come l'aggiunta di codice JavaScript all'interno delle proprie pagine, per modificare dinamicamente sul browser del client alcuni elementi creati dai Web Control server-side.
Di seguito cercherò di mostrare i vari metodi che possiamo utilizzare e le varie tecniche per accedere ai vari componenti presenti nelle pagine create.
RegisterClientScriptBlock e RegisterStartupClient
Con le nostre pagine ASP, per aggiungere dinamicamente delle routine in JS dipendentemente a certi eventi bisogna scivere:
<html><body>
<% if evento=true then %>
<script language="Javascript">
alert ("Evento true");
</script>
<% end if %>
...
</body></html>Con ASP.NET? In questo ambiente sono ancora supportati i tag di aperta e chiusura del contesto in linea degli script e possiamo continuare ad utilizzarli, come in questo esempio:
<%@ Page Language="c#" %>
<script runat="server">
bool evento;
void Page_Load(Object o, EventArgs e) {
evento=true;
}
</script>
<html><body>
<% if (evento==true) { %>
<script language="Javascript">
alert ("Evento true");
</script>
<% } %>
...
</body></html>
Come si fa lo stessa cosa utilizzando VS.NET per i nostri progetti con il code-behind o semplicemente inserirndo il codice di controllo all'interno del nostro codice HTML?
L'approccio è differente, non è complicatissimo ma è di seguito riportato un esempio:
<%@ Page Language="c#" %>
<script runat="server">
void Page_Load(Object o, EventArgs e) {
bool evento=true;
if (evento==true) Page.RegisterStartupScript("codice","<script>alert('Evento=true');</"+"script>");
}
</script>
<html><body>
<form runat="server">
...
</form>
</body></html>Avremmo potuto scrivere anche in questa forma alternativa:
bool evento=true;
if (evento==true) Page.RegisterClientScriptBlock ("codice","<script>alert('Evento=true');</"+"script>");
}Avremmo ottenuto lo stesso risultato, ovvero la visualizzazione di un alert al caricamento della pagina.
RegisterClientScriptBlock
RegisterStartupScript
<form runat="server">
Con
RegisterClientScriptBlock
<html><body>
<form name="_ctl0" method="post" action="js3.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwtMTI3OTMzNDM4NDs7Ps85Eeylb4RbsdJWhbcRz7eyOJzj" />
<script>alert('Evento=true');</script>
Pagina di esempio per inserire
del codice JS all'interno del
nosto codice HTML.
</form>
</body></html>Mentre con
RegisterStartupScript
<html><body>
<form name="_ctl0" method="post" action="js3.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwtMTI3OTMzNDM4NDs7Ps85Eeylb4RbsdJWhbcRz7eyOJzj" />
Pagina di esempio per inserire
del codice JS all'interno del
nosto codice HTML.
<script>alert('Evento=true');</script>
</form>
</body></html>La prima,
RegisterClientScriptBlock
Avremmo potuto utilizzare anche l'altra funzione,
RegisterStartupScript
Ipotizziamo di avere un pulsante che richiama una funzione Javascript che verrà inserita dal nostro codice server-side, con una pagina è di dimensioni considerevoli ed è lenta ad essere scaricata dal server.
Se un utente dovesse cliccare sul pulsante, che cosa accadrebbe? Il codice della funzione non sarebbe ancora presente nel browser del client e otterremo un errore.
Con l'uso della prima funzione, invece, ci assicuriamo che quelle funzioni siano caricate all'inizio della pagina, evitando appunto problemi di errori client-side.
RegisterStartupScript
Questo codice viene inserito esattamente prima del tag di chiusura del form per lo stesso motivo della funzione precedente: se volessimo impostare il focus su un oggetto e questo non fosse stato caricato ancora nella pagina si otterrebbe un errore.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Short-circuiting della Pipeline in ASP.NET Core
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Implementare il throttling in ASP.NET Core
Load test di ASP.NET Core con k6
Generare file per il download da Blazor WebAssembly
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Eseguire operazioni con timeout in React
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
