Come fare una chiamata ajax ad un metodo di una pagina aspx con jquery

In questo articolo vi mostrerò come effettuare una chiamata ajax ad un metodo di una pagina aspx in modo tale da evitare il fastidioso refresh dovuto al postback.

• Download del codice : AjaxCallToPageMethod.zip
• Guarda il video in HD su Vimeo : http://vimeo.com/25091952

Video Tutorial

Play youtube videos con jquery colorbox plugin

In questo articolo vi mostrerò come utilizzare il plugin jquery colorbox. E’ un plugin che offre la possibilità di visualizzare all’interno di un browser immagini , codice html , video all’interno di una modal box. Il tutto con una grafica bella e professionale.  Le potenzialità di questo plugin sono molteplici ,  ma in questo articolo ci soffermeremo nell’analizzare come visualizzare video yuotube.   Per ulteriori informazioni su colorbox andate sul sito ufficiale  http://colorpowered.com/colorbox/. Qui troverete il link per scaricare il plugin e una serie di esempi che illustrano le potenzialità del plugin stesso.

Se decidete di fare il  download  del codice di esempio che ho creato potete evitare di scaricare il plugin dal sito in quanto è già contenuto nel progetto.

• Download del codice : colorbox_youtube_crossdomain.zip
• Guarda il video in HD su Vimeo : http://vimeo.com/22168146
• Demo : http://www.zanninofrancesco.altervista.org/colorbox_youtube/index.html

Video Tutorial

jquery twitter

In questo articolo vi mostro come leggere i tweet del vostro  o di qualsiasi altro utente twitter con la libreria  jquery tweet .

Per scaricare il codice clicca jquery-twitter-tutorial.zip oppure scaricalo dal FlashWidget andando qui a fianco nella barra laterale ( Area Download ) nella cartella jquery.

• Clicca per vedere una  DEMO del programma .
• Guarda un esempio editabile su jsFiddle
• Guarda il video su Vimeo : http://vimeo.com/20583513

Video tutorial :

jquery data link

In questo tutorial vi mostro molto semplicemente come potete utilizzare la libreria jquery data link per fare il binding bidirezionale tra variabili javasrcript e html elements di tipo <input type”text”>. Inoltre nell’esempio viene riportato un ulteriore esempio sull’utilizzo della libreria jquery templates. Per maggiori dettagli su jquery template guarda gli altri articoli :

• La libreria jquery templates

• jquery templates ( uso di tmplItem )

Per maggiori in formazioni su jquery data link andate a questo link.

• Per scaricare il codice di esempio  e le relative librerie cliccate   jquery-DataLink-Templates.zip o andate andate  nel FlashWidget nella barra laterale ( Area Dowload ) sotto la cartella jquery
• Per vedere una demo funzionante del codice clicca : DEMO
• Guarda il video in HD su Vimeo : http://vimeo.com/20333331

___________________________________________________________________________

ECCO IL VIDEO TUTORIAL :

Leggere dati da file xml con jquery

In questo articolo vi mostrerò come leggere i dati da un file XML con l’utilizzo della libreria jquery. In questo modo vi basterà caricare nel vostro progetto la sola libreria jquery e non avrete quindi bisogno di una usare nessun tipo di linguaggio di programmazione lato server ( php , asp.net , java , ecc.. ).

Per scaricare il codice cliccate : jquery-xml.zip o scaricatelo dal FlashWidget qui a lato nella barra latera ( Area Download ) sotto la cartella jquery.

Ecco il Video tutorial :

( part – 1 )

( part – 2 )

jquery templates ( uso di tmplItem )

jquery templates e gli items

In questo secondo articolo dedicato alla libreria jquery templates vi voglio mostrare un modo diverso per creare i templates ( tramite tags <script>) e come utilizzare la funzione tmplItem. Guarda i video articoli che seguono. Guarda anche il mio articolo di introduzione alla libreria jquery templates

Per scaricare il codice clicca : jquerytemplate-items.html o scarica il file dal FlashWidget che trovi qui nella barra laterale ( Area Download ) sotto la cartella jquery.

——————–

Video Tutorial :

Invece di (part 1)  e (part 2) ho messo (part 3) e (part 4) per dare un seguito all’artiocolo precedente di introduzione alla libreria jquery templates.  I due video qui di seguito comunque compongono un tutorial completo.

( parte 3 )

( parte 4)

jquery templates

La libreria jquery templates

Binding di dati utilizzando la libreria jquery templates

Jquery Templates  è un’utilissima libreria che permette di fare il binding di una variabile javascript all’interno di codice html in modo molto semplice ma molto efficace. La libreria in oggetto è un’estensione dell’ormai famosissima e utilizzatissima libreria jquery. Quest’ultima è ormai diventata di fatto uno standard grazie al fatto che rende la programmazione lato client facile e potente con poche linee di codice. Per utilizzare la libreria jquery template in un nostro progetto dobbiamo includere i files .js relativi alle due librerie ( jquery e jquery-template). A tale scopo possiamo usare due metodi :

1. scaricare i files dal sito jquery.com
2. inserire i files scaricandoli direttamente all’interno della nostra pagina dai server CDN ( Content Delivery Network ) di Google o Miscrosoft.

Il secondo metodo è preferibile in quanto evita al server che ospita il nostro sito di dover fornire agli utenti che vi accedono anche i files .js in questione. Nelle’esempio che sto per mostrare in questo articolo utilizzeremo il secondo metodo.

Potete scaricare il codice dell’esempio a questo link : jqueryTemplate.html o dal FlashWidget che trovate qui a lato nella barra laterale ( Area Download ) sotto la cartella jquery.

Esempio e analisi del codice ( Video Tutorial )

( parte 1 )

( parte 2 )

Visualizzare video YouTube con jquery e fancybox

Il plug-in fancybox

Fancybox è un utilissimo plug-in basato sulla libreria  jquery  che permette di visualizzare in una dialog box immagini , testo , codice html e file swf.  Come avrete intuito,  in questo articolo vi mostrerò come usare il plug-in per visualizzare all’interno  di un’ applicazione web i video di yuotube. Seguiranno altri articoli dedicati ad esplorare tutte le potenzialità di fancybox ( creare foto slider , visualizzare il  risultat di una richiesta ajax ecc..). Per  scaricare il plug-in andate al sito http://fancybox.net/ . Il pacchetto di downlaod conterrà la cartella fancybox all’interno della quale troverete tutti i files .js , il file css e le immagini necessarie al funzionamento  del plug-in.

Inserire in plug-in nel nostro progetto

Vediamo il primo passo da fare per raggiungere lo scopo. Creiamo un’applicazione vuota ( per questo esempio io ho utilizzato un’applicazione ASP.NET con Visual Studio ma potete utilizzare tranquillamente anche un progetto PHP o Java).  Una volta creato il progetto copiamo al suo interno l’intera cartella fancybox. Successivamente creiamo una pagina aspx ( per chi usa ASP.NET ) o una pagina PHP ( per chi usa il PHP ).  Con usa serie di tag <script> includiamo nella pagina appena creata tutti i file .js  e con il tag <link> il file css della cartella fancybox. Infine includiamo con un ulteriore tag <script> la libreria jquery. Vediamo questa prima parte di codice :

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head runat="server">
  3     <title>YouTube Slider</title>
  4     <link href="fancybox/jquery.fancybox-1.3.2.css" rel="stylesheet" type="text/css" />
  5     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
  6     <script src="fancybox/jquery.fancybox-1.3.2.js" type="text/javascript"></script>
  7     <script src="fancybox/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
  8     <script src="fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
  9     <script src="fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
 10 </head>
 11 <body>

A questo punto abbiamo tutto il necessario per creare il nostro “YouTube  Slider”. Per capire come procedere occorre fare una premessa. Fancybox utilizza gli elementi anchor ( <a></a> ) come elementi base al quale applicare le funzionalità del plug-in stesso. Per capire meglio guardiamo la parte di codice relativa a quanto appena descritto :

  1 <div>
  2     <a href="http://www.youtube.com/watch?v=7FaKYHfwUkM" class="video">
  3         <img src="http://i4.ytimg.com/vi/7FaKYHfwUkM/default.jpg" height="80" width="80" alt="#"/>
  4     </a>
  5     <a href="http://www.youtube.com/watch?v=XhhDY0GeBI4" class="video">
  6         <img src="http://i1.ytimg.com/vi/XhhDY0GeBI4/default.jpg" height="80" width="80" alt="#"/>
  7     </a>
  8 </div>

Come potete vedere all’interno di un <div> abbiamo due elementi anchor ( <a></a> ) e all’interno di ognuno di essi un tag <img>.  Ogni elemento <a> rappresenta un video. Di fatti,  potete facilmente notare che l’attributo href fa riferimento propio al link di un video di youtube. Ogni immagine contenuta all’interno dell’anchor ( riga 3  - riga  6 )  è la miniatura relativa la video tesso. L’attributo src è l’indirizzo di tale immagine. In questo esempio , per semplicità , ho inserito soltanto due video. Va da se che potete inserire tutti quelli che volete. Per rendere la vostra applicazione il più flessibile possibile potreste ,  per esempio ,  creare un file xml contenente i link dei video che volete visualizzare. Oppure potete usare le Google API per inserirli dinamicamente  ( per esempio i video più cliccati della giornata ecc …) . Continuiamo per ora con il nostro semplice esempio. In seguito pubblicherò altri articoli con  esempi più  completi.

Adesso passiamo alla parte più interessante del codice. Andiamo ad applicare le funzioni del plug-in fancybox  ai nostri elementi anchor. A tale scopo creiamo un blocco javascript in fondo alla nostra pagina :

  1 <script type="text/javascript">
  2         $("a.video").click(function () {
  3             $.fancybox({
  4                 'padding': 0,
  5                 'autoScale': false,
  6                 'transitionIn': 'none',
  7                 'transitionOut': 'none',
  8                 'title': this.title,
  9                 'width': 680,
 10                 'height': 495,
 11                 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
 12                 'type': 'swf',
 13                 'swf': { 'allowfullscreen': 'true'}
 14             });
 15             return false;
 16
 17         });
 18 </script>

Alla riga 2 usiamo il selettore jquery per recuperare tutti gli elementi anchor che hanno l’attributo class = video ( notare che ogni elemento <a> ha l’attributo class=”video” in modo tale da differenziarli da altri possibili elementi <a> che non fanno riferimento ad un video. Ovviamente potete usare un qualsiasi nome come parametro per l’attributo class. Io ho usato “video” per rendere più comprensibile il codice). Ogni volta che si clicca su un elemento <a> applichiamo la funzione $.fancybox all’elemento cliccato. All’interno della funzione trovate una serie di parametri per adattare alle vostre esigenze la il modo in cui i vari video verranno visualizzati.
Di seguito potete vedere il codice completo della pagina aspx :

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="YoutubeSlider.Default" %>
  2
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>YouTube Slider</title>
  8     <link href="fancybox/jquery.fancybox-1.3.2.css" rel="stylesheet" type="text/css" />
  9     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
 10     <script src="fancybox/jquery.fancybox-1.3.2.js" type="text/javascript"></script>
 11     <script src="fancybox/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
 12     <script src="fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
 13     <script src="fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
 14 </head>
 15 <body>
 16     <form id="form1" runat="server">
 17     <h2 style="color:#45d; border-bottom:1px solid #ddd"><i>YouTube Slider</i></h2>
 18     <div>
 19         <a href="http://www.youtube.com/watch?v=7FaKYHfwUkM" class="video">
 20             <img src="http://i4.ytimg.com/vi/7FaKYHfwUkM/default.jpg" height="80" width="80" alt="#"/>
 21         </a>
 22         <a href="http://www.youtube.com/watch?v=XhhDY0GeBI4" class="video">
 23             <img src="http://i1.ytimg.com/vi/XhhDY0GeBI4/default.jpg" height="80" width="80" alt="#"/>
 24         </a>
 25     </div>
 26     </form>
 27     <script type="text/javascript">
 28         $("a.video").click(function () {
 29             $.fancybox({
 30                 'padding': 0,
 31                 'autoScale': false,
 32                 'transitionIn': 'none',
 33                 'transitionOut': 'none',
 34                 'title': this.title,
 35                 'width': 680,
 36                 'height': 495,
 37                 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
 38                 'type': 'swf',
 39                 'swf': { 'allowfullscreen': 'true'}
 40             });
 41             return false;
 42
 43         });
 44     </script>
 45 </body>
 46 </html>

Video dell’applicazione in esecuzione

Download del codice completo ( ASP.NET Framework 3.5 )

Nota : Se scaricate il codice potete evitare di fare il download del  plug-in fancybox in quanto è già incluso nel progetto.

JQueryUI e ASP.NET

Come installare JQuery UI in un’applicazone ASP.NET

JQuery UI è una sorta di framework che estende la  famosissima e potentissima libreria JQuery. Di fatti per potere utilizzare JQuery UI occorre caricare la libreria JQuery. Ci sono sostanzianzialmente due metodi per installare queste librerie javascript  in una nostra applicazione web :

1. Scaricare i vari files javascript (.js) e metterli sul server nel quale risiede la nostra applicazione.
2. Caricare i files javascript da Google CDN o Microsoft CDN.

Metodo .1

Scarichiamo la libreria dal sito jquery.com e carichiamo i file necessari nel nostro progetto

Video Parte – 1

Video Parte – 2

Metodo .2

Implementiamo la libreria jqeryUI caricandola dai server esterni Microsoft CDN

Video

Visuallizzare RSS Feed con asp.net e jqueryUI

Visualizzare i Feeds usando l’oggetto DataSet

Ci sono vari metodi per visualizzare gli RSS Feeds. Quello preso in esame in questo articolo si basa sull ‘ utilizzo dell’oggetto DataSet del .NET Framework. Questo metodo permette di leggere il contenuto del feed in modo molto semplice con poche linee di codice.

Come molti di voi sapranno , l’oggetto DataSet è una classe in grado di contenere in memoria tabelle provenienti dai database ed implementa i vari metodi per gestirne i dati. Un file RSS , che non è altro che un file xml opportunamente formattato , può essere tranquillamente convertito e  memorizzato come una tabella. L’oggetto DataSet  mette a disposizione due funzioni membro DataSet.ReadXml(string url-path) e DataSet.ReadXmlSchema(string file.xsd) che permettono di mappare un file xml all’interno del DataSet esattamente come avviene per le tabelle di un database. Per fare ciò è necessario che il DataSet conosca la stuttura del file file xml. E’ possibile definire la struttura di un qualsiasi file xml tramite un file .xsd ( Xml Schema). Vediamo uu semplice esempo di un file xml e il relativo schema xsd :