Continuiamo il discorso intrapreso in un precedente articolo sulle librerie Ajax per ASP.NET .
Anthem.NET si annovera tra le librerie più adatte allo sviluppo di soluzioni "da zero" piuttosto che al restyling di applicazioni pre-esistenti poiché le funzionalità Ajax sono implementate principalmente attraverso una nuova serie di controlli. Un approccio molto simile ad ASP.NET Ajax (nome in codice Atlas), la soluzione ufficiale Microsoft.
Molto probabilmente i controlli ufficiali Microsoft soppianteranno Anthem.NET ma questa libreria rimane utile a chi sviluppa in ASP.NET 1.1, versione non supportata dalla libreria Microsoft. Inoltre è documentata anche la compatibilità con Mono per chi sviluppa applicazioni ASP.NET con Linux.
Sebbene il sito ufficiale, negli ultimi tempi sia stato un po' trascurato dal suo autore, Jason Diamone, attorno ad Anthem è sorta una non piccola comunità di sviluppatori che lo utilizza, lo modifica e lo commenta nel Forum dedicato.
Procediamo ad esaminare dunque le caratteristiche principali della libreria.
Installazione
La procedura di installazione è analoga a quella di qualsiasi altro componente nella piattaforma ASP.NET
Scaricare le libreria
Scarichiamo la libreria dal sito web.
Nota: Il componente sviluppato da Jason Diamond è il meglio documentato tra tutti quelli che abbiamo preso in esame, ma, curiosamente, la DLL non viene fornita già compilata; per risparmiare tempo mettiamo a disposizione le versioni compilate per .NET 1.1 e 2.0
Creare riferimenti nel progetto
Creiamo un nuovo sito web su Visual Studio o VWD (File>Nuovo Sito Web) e aggiungiamo un riferimento (tasto destro sul progetto). Selezioniamo dalla tab "Sfoglia" la dll di Anthem che abbiamo compilato o scaricato.
Aggiungere i controlli nella casella degli strumenti
Clicchiamo col destro nella 'Casella degli strumenti' per aggiungere una nuova scheda ("Aggiungi scheda") che chiamiamo "Anthem", poi clicchiamo col destro sulla scheda appena creata e selezioniamo "Scegli elementi". Usiamo il pulsante "Sfoglia" per aprire di nuovo il file "Anthem.dll" dalla cartella bin del nostro progetto. Otteniamo i moltissimi controlli che Anthem riproduce.
Hello World
Proviamo a riprodurre un esempio già sperimentato con altre librerie: una pagina che carica immagini casuali cliccando un bottone.
Immagine casuale (Web Form)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Anthem" Namespace="Anthem" TagPrefix="anthem" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Pagina senza titolo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<anthem:Image ID="Image1" runat="server" ImageUrl="~/img/img1.jpg" />
<anthem:Button ID="Button1" runat="server" Text="Cambia immagine" OnClick="button_Click"/>
<anthem:Label ID="Label1" runat="server"></anthem:Label>
</div>
</form>
</body>
</html>
Immagine casuale (Code behind)
protected void button_Click(object sender, EventArgs e){
string[] fileName = {"img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"};
Random rnd = new Random();
Image1.ImageUrl = "~/img/"+fileName[rnd.Next(0,fileName.Length -1)];
Image1.UpdateAfterCallBack = true;
}
Tutti i controlli Anthem riproducono i tipici controlli ASP.NET ma vi aggiungono alcune caratteristiche. In questo caso ad esempio notiamo nel code behind la proprietà UpdateAfterCallBack impostata su true.
Esaminiamo un secondo esempio basato sul precedente in cui aggiungiamo un testo di attesa sul controllo, che viene visualizzato durante il postback Ajax. Il controllo viene esplicitamente disabilitato durante il postback.
Disabilitare il bottone durante il postback
<anthem:Button ID="Button1" runat="server" Text="Cambia immagine" OnClick="button_Click"
TextDuringCallBack="Disabilitato" EnabledDuringCallBack="false"/>
Possiamo applicare le stesse proprietà anche a LinkButton ed ImageButton.
Il timer
Altra funzionalità interessante è quella che ci permette di innescare il postback Ajax attraverso un timer. Proviamo ad applicarla al cambio di immagine.
Aggiungere un timer
<anthem:Timer ID="Timer1" runat="server"
Enabled="true" Interval="2000"
OnTick="button_Click">
</anthem:Timer>
Allo scadere dei due secondi viene invocato il codice per la generazione della nuova immagine. Il timer può essere abilitato, o meno, agendo sulla proprietà Timer.enabled.
Aggiornare solo una parte della pagina
È possibile aggiornare una singola area della pagina, ovvero un singolo controllo. Anthem.NET possiede un controllo Panel molto potente. Qui mostriamo solo la più semplice delle sue applicazioni, la proprietà che, durante il postback Ajax, fa apparire o scomparire gli elementi annidati al suo interno.
Esempio di uso di Panel (WebForm)
<anthem:Panel ID="Panel1" Visible=true runat="server">
Pannello 1
</anthem:Panel>
Esempio di uso di Panel (Code behind)
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Panel1.Visible = Not Panel1.Visible
End Sub
Concludiamo con un esempio più interessante, ovvero un controllo GridView che popola un DetailsView. Tra gli esempi del sito ce n'è uno elementare dedicato al "vecchio" Datagrid mentre il GridView è trattato estesamente senza però alcun commento al codice. Nel nostro esempio usiamo come DB la versione SQLExpress di "NorthWind".
Non mostriamo tutto il codice che si trova in allegato, piuttosto ne esaminiamo alcuni elementi particolari. Ad esempio sulla selezione della riga del GridView lanciamo un semplice JavaScript (un alert che indica l'ID della riga selezionata).
Interazione tra JavaScript ed Anthem.NET
Jason Diamond, l'autore di questa libreria, si è ispirato al famoso Ajax.NET che aggiunge ai tipici due livelli WebForm/CodeBehind un terzo, in cui inserire codice client side in JavaScript.
Esaminiamo un semplice esempio che innesca tutti gli eventi gestiti da questo complesso postback.
Bottone che richiama funzioni JavaScript (WebForm)
<anthem:Button ID="button" runat="server"
Text="Chiama una serie di funzioni JavaScript"
OnClick="button_Click"
PreCallBackFunction="FunzioneJSChiamataPrimaDelPostback"
PostCallBackFunction="FunzioneJSChiamataDopoIlPostback" />
Bottone che richiama funzioni JavaScript (JavaScript)
<script language="JavaScript" type="text/JavaScript">
function FunzioneJSChiamataPrimaDelPostback(button) {
if (!confirm('Sai che stai entrando nel Postback?'))
return false;
}
function FunzioneJSChiamataDopoIlPostback(button) {
alert('Il Postback è terminato');
}
Bottone che richiama funzioni JavaScript (Code behind)
protected void button_Click(object sender, EventArgs e){
Image1.Visible = true;
Label1.Text = "Io sono il contenuto del PostBack";
Image1.UpdateAfterCallBack = true;
Label1.UpdateAfterCallBack = true;
}
- Prima che il Postback venga innescato l'attributo
PreCallBackFunctionchiama la prima funzione JavaScript - Viene innescato il Postback Ajax
- Si conclude il "Postback Ajax" con la funzione
PostCallBackFunctione la chiamata all'ultima funzione JavaScript
Tipicamente PreCallBackFunction è usato per una funzione che avverte prima della cancellazione di un record.
Metodi Anthem.NET
Altra caratteristica ereditata da Ajax.NET è quella di una "classe proxy" ovvero un file JavaScript client side che mappa un metodo presente in uno script server side.
Vediamo nel dettaglio come funziona tutto questo riprendendo un esempio dal sito ufficiale.
Addizione (WebForm)
<input id="a" size="3" value="1">
<input id="b" size="3" value="2">
<button onclick="DoAdd(); return false;" type="button">Addiziona</button>
<input id="c" size="6">
Addizione (JavaScript)
<script language="JavaScript" type="text/JavaScript">
function DoAdd() {
Anthem_InvokePageMethod('Add',
[document.getElementById('a').value, document.getElementById('b').value],
function(result) {
document.getElementById('c').value = result.value;
}
);
}
</script>
Addizione (Code Behind)
void Page_Load() {
Anthem.Manager.Register(this);
}
[Anthem.Method]
public int Add(int a, int b) { return a + b; }
Leggiamo dall'alto verso il basso questo listato: semplici elementi HTML inviano i loro parametri ed invocano la funzione JavaScript DoAdd() a questa funzione corrisponde un <Anthem.Method()> ovvero una funzione pubblica, contenuta nel Code Behind.
L'utilità pratica sta nel fatto di poter richiamare i risultati di funzioni C# o VB.NET direttamente dal client.
Un esempio interessante, riportato nel sito ufficiale viene implementato per mostrare eccezioni.
Conclusione
Con questo articolo abbiamo messo le basi per l'approfondimento di questa libreria. Approfondimento che può essere effettuato consultando gli esempi online dal sito ufficiale.
