Votazione Ajax con jQuery e WebServices



Lavorare con contenuti Ajax è ormai all’ordine del giorno e costruire applicazioni dinamiche, veloci e graficamente piacevoli ed usabili in stile Facebook diventa sempre più alla portata di tutti.

Questo grazie anche all’utilizzo per esempio del framework javascript jQuery  in accoppiata con i WebServices; in particolare presento un esempio di votazione (5 stelle) utilizzando .Net come strumento di comunicazione lato server.

Il risultato finale sarà simile a questo:

Esempio

dove al click su una stella l’utente avrà in risposta:

– l’ultimo voto inserito (il suo)
– Il numero totale dei voti
– La media dei voti

Innanzitutto includiamo jQuery:

<script src="js/jquery-1.3.2.min.js" type="text/javascript">
</script>

La parte html sarà per es:

<img src="img/star.gif" alt="1" class="imgRate" />
<img src="img/star.gif" alt="2" class="imgRate" />
<img src="img/star.gif" alt="3" class="imgRate" />
<img src="img/star.gif" alt="4" class="imgRate" />
<img src="img/star.gif" alt="5" class="imgRate" />

Quindi andiamo a definire il comportamento delle nostre stelle al corrispondente click:

<script type="text/javascript">
    $(document).ready(function() {
        $(".imgRate").click(function() {
            $.ajax({
                type: "POST",
                url: "Default.aspx/Vota",
                data: "{'Voto':'" + $(this).attr("alt") + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    alert("Ultimo voto: " + msg.d.UltimoVoto +
                          "nTotaleVoti: " + msg.d.TotaleVoti +
                          "nMediaVoti: " + msg.d.MediaVoti);
                }
            });
            return false;
        });
    });
</script>

Non faccio altro che fare una chiamata post ajax attraverso jquery ad un webmethod situato nel codice della pagina Default.aspx di nome Vota; definisco che lo scambio di dati è in formato json ed in caso di esito positivo della chiamata visualizzo i dati di ritorno in un alert.

Il metodo sarà così definito:

[WebMethod]
public static Voto Vota(int Voto)
{
    Voto _voto = new Voto();
    _voto.UltimoVoto = Voto;
    _voto.TotaleVoti += 1;
    _voto.MediaVoti = (_voto.MediaVoti + Voto) / _voto.TotaleVoti;
    return _voto;
}

Dove il valore di ritorno è di tipo Voto che è definito dalla seguente classe:

public class Voto
{
    public Int32 UltimoVoto;
    public Double MediaVoti;
    public Int32 TotaleVoti;
}

Importante è notare il valore di risposta del metodo; es:

{"d":{"__type":"_Default+Voto","UltimoVoto":4,"MediaVoti":4,
"TotaleVoti":1}}

che viene serializzato in automatico in json dall’estensione ASP.NET AJAX (il mio test è stato fatto con il framework 3.5).

Il WebMethod in una situazione reale può salvare e recuperare i dati da un database per es, mentre il messaggio di risposta può essere presentato all’utente in qualunque forma vogliate.

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest