Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 20 di 24
  • livello principiante
Indice lezioni

ASP.NET ed AJAX

Un esempio di applicazione di AJAX specifica per la tecnologia ASP.NET
Un esempio di applicazione di AJAX specifica per la tecnologia ASP.NET
Link copiato negli appunti

Per la sola tecnologia ASP.NET vale la pena spendere qualche parola in più riguardo lo sviluppo di applicativi AJAX poiché gli esempi proposti in questa guida, strutturati spesso forzatamente in modo analogo agli stessi più idonei per l'interfacciamento con PHP, non presentano il modo più naturale di sfruttare questo tipo di interazione.

Principalmente, oltre a permettere un confronto per gli interessati dell'una o dell'altra tecnologia, si è mostrato volutamente come una pagina aspx possa comunque rispettare gli standards senza dover utilizzare necessariamente le comode automazioni presenti all'interno dell'ambiente di sviluppo, in questo caso Visual Web Developer, il quale seppur modifichi prepotentemente il layout mette a disposizione degli sviluppatori un'interfaccia dedicata e la possibilità di gestire al meglio i vari eventi.

Il codice JavaScript viene generato direttamente dal server ed aggiunto alla pagina, mentre il controllo sullo stato delle operazioni supporta nativamente la gestione delle eccezioni generate eventualmente dai metodi o funzioni addette a manipolare lo scambio dei dati.

La scelta in questo caso è sicuramente complessa poiché rinunciare alla possibilità di gestire eccezioni o sfruttare il controllo messo a disposizione dall'ambiente, a favore della pulizia del codice, della degradabilità strutturata o della più mirata accessibilità potrebbe non essere la soluzione migliore, soprattutto qualora l'applicativo dovesse essere mediamente complesso.

Quanto appena detto potrebbe essere mostrato attraverso questo esempio dedicato al solo ambiente ASP.NET, che spieghiamo commentando il codice.

Listato 32. Esempio di ASP.NET + AJAX

<%@ Page Language="C#" debug="true" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
<script runat="server">
  // per sfruttare il codice messo a disposizione dal Framework
  // è necessario implementare l'interfaccia
  // System.Web.UI.ICallbackEventHandler

  // a questo punto è possibile utilizzare una variabile
  // di tipo stringa per memorizzare nell'evento
  // dedicato quanto inviato dal javascript
  private System.String __nomeUtente;

    // tale variabile verrà assegnata al richiamo
    // dell'evento callback, gestito in automatico da ASP.NET
    void ICallbackEventHandler.RaiseCallbackEvent(System.String stringaEvento)
    {
      // assegnazione della stringa inviata all'evento
      __nomeUtente = stringaEvento;
    }

    // è possibile dichiarare il metodo GetCallbackResult
    // il quale avrà il compito di effettuare le operazioni
    // necessarie prima che la funzione dedicata javascript
    // riceva il risultato dell'interazione
    System.String ICallbackEventHandler.GetCallbackResult()
    {
      // in questo caso si restituisce una stringa
      // differente a seconda che il nome sia
      // stato scritto o meno ...
      System.String risultato;
      if (__nomeUtente.Length > 0)
        risultato = "Ciao <strong>" + __nomeUtente + "</strong>,
benvenuto in AJAX!";
      else
        risultato = "Non vuoi dirmi il tuo nome ?";

      // ... per poi inviare quanto assegnato
      // alla funzione javascript, richiamata sempre
      // in automatico
      return risultato;
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
 <head>
  <title>AJAX :: Esempio dedicato per C# ed ASP.NET</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="guida ajax, esempio ASP.NET" />
  <meta name="keywords" content="guida, ajax, remote scripting, esempio, esempi" />
  <meta name="author" content="Andrea Giammarchi per HTML.IT" />
  <script type="text/javascript" src="utility.js"><!--// ajax utility //--
>
</script>
  <script type="text/javascript"><!--//

  // funzione dedicata a questa interazione
  // riceve una stringa contenente il nome
  // inviato dall'utente e l'elemento
  // che ha richiamato l'interazione asincrona
  function OnCallback(risultato, elemento) {
 
    // messaggio risultante
    prendiElementoDaId('contenuto-dinamico').innerHTML = risultato;
  };

  // funzione richiamata qualora
  // dovessero esserci eccezioni durante l'interazione
  function OnException(messaggioEccezione) {

  // messaggio risultante
  prendiElementoDaId('contenuto-dinamico').innerHTML =
     "Problemi durante l'interazione asincrona." +
     messaggioEccezione;
  };
  //--></script>

  <style type="text/css" media="all">@import "semplice.css";</style>
 </head>
 <body>
  <div>
    <!--//
    Per poter usufruire della libreria integrata
    e permettere a questa pagina di implementare il
    codice utile per effettuare l'interazione
    asincrona è necessario processare la form sul server
    //-->

    <form runat="server">
      <fieldset>
        <legend>Permettimi di salutarti</legend>
        <label for="nome-utente">Scrivi il tuo nome</label>
        <input
          tabindex="1"
          id="nome-utente"
          name="nome-utente"
          type="text"
          value="come ti chiami ?"
          onfocus="this.value = '';"
        />
        <label for="risultato">Leggi il saluto</label>

<!--//
Il bottone addetto alla chiamata asincrona, se presente all'interno di un form,
non deve essere di tipo submit, altrimenti la pagina verrà ricaricata senza attendere
l'esito dell'interazione.

A gestire l'evento onclick ci penserà il metodo GetCallbackEventReference il quale accetta
come parametri

* l'elemento di controllo oppure il target che implementa
* l'interfaccia ICallbackEventHandler ed in questo caso la pagina stessa,
* l'argomento da inviare all'evento RaiseCallbackEvent,
* il nome della funzione javascript da richiamare a fine operazioni,
* il pulsante o il contesto, che ha effettuato queste operazioni
* eventualmente la funzione javascript dedicata alla gestione errori di
  callback richiamata qualora il server generi una eccezione
* infine un valore booleano che specifica se la chiamata è asincrona oppure no.
//-->
        <input
          tabindex="2"
          id="risultato"
          type="button"
          value="invia"
          onclick="<%=
            ClientScript.GetCallbackEventReference(
              this,
              "prendiElementoDaId('nome-
utente').value",
              "OnCallback",
              "this",
              "OnException",
              true
            )
          %>"
        />
      </fieldset>
   </form>
   <div id="contenuto-dinamico"></div>
  </div>
 </body>
</html>

La pagina proposta è presente all'interno di questo archivio, comprensivo dei file JavaScript e CSS.

Ciò che salta agli occhi, andando a spulciare il sorgente generato dopo aver processato la pagina, l'aggiunta di tag <script>, assieme a diversi input di tipo hidden, sempre generati e gestiti automaticamente dal server.

Per capire invece quanto sia semplice gestire eccezioni basterà aggiungere un throw new Exception("eccezione") all'interno del metodo GetCallbackResult, così da rendersi conto del controllo automatizzato permesso da questa piattaforma.

Certo è che la libreria da 20 Kb generata in automatico da ASP.NET sembra essere veramente ben fatta e le possibilità di sfruttarla al meglio sono diverse. L'accoppiata con JSON potrebbe già permettere interazioni molto avanzate, vale anche per l'accoppiata ajax e PHP, e se ne consiglia un approfondimento.

Non è questo comunque l'unico modo di implementare uno scambio dati asincrono in una applicazione, esistono infatti tools aggiuntivi appositi in grado di semplificare le operazioni ed aggiungere ancora più debug durante lo sviluppo del sistema.

Tra i più famosi si ricordano atlas, gratuito e ben documentato, ed ajax.NET gratuito anch'esso e ricco di esempi pratici in diverse comunità di sviluppatori.

Ti consigliamo anche