Fotogallery e login Ajax per Personal Web Site Starter Kit

Il Personal Web Site starter kit fornisce una buona base di partenza per la realizzazione di un proprio sito personale con tanto di fotogallery. Ne abbiamo già parlato nella Guida ASP.NET Starter Kit, cui possiamo fare riferimento per l'installazione e la configurazione di base.

In questo articolo utilizzeremo lo Starter Kit come pretesto per lavorare un po' con ASP.NET AJAX e l'AJAX Control Toolkit. Quello che faremo è riadattare alcune alcune funzionalità del sito come il login e la fotogallery.

Login

Iniziamo con il pannello del login e osserviamo come, con poche righe di codice, inserire un form in testa alla pagina e farlo visualizzare in un pannello che rimane in primo piano.

Assicuriamoci di aver correttamente configurato l'applicazione per l'uso di ASP.NET AJAX è sufficiente utilizzare l'extender CollapsiblePanelExtender sul Panel che conterrà il controllo Login.

Questo extender, infatti, permette ad un Panel di collassare ed estendersi, rimanendo sempre in primo piano, e ha diverse impostazione per poter modificare la posizione, la dimensione, l'allineamento ed altre proprietà del Panel che estende.

Il codice che sarà sufficiente inserire in testa alla master page è simile al seguente:

<asp:Panel runat="server" id="loginPanel">
  <asp:Login runat="server" ID="loginControl" />
</asp:Panel>

<asp:LinkButton runat="server" ID="lbLogin" Text="Login"
                OnClientClick="return false;" />
                
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" 
      runat="server" 
      ExpandControlID="lbLogin" 
      CollapsedSize="0"
      CollapseControlID="lbLogin"  
      ExpandDirection="Vertical" 
      TargetControlID="loginPanel" 
      Collapsed="true" 
      CollapsedText="<< Login >>"
      ExpandedText="<< Chiudi >>"
      TextLabelID="lbLogin" />

Nota: controlli contenuti negli AJAX Control Toolkit permettono di aggiungere funzionalità e comportamenti ai controlli che utilizziamo abitualmente, sgravando il programmatore dalla scrittura di un bel po' di codice.

Fotogallery

Tra le funzionalità del Personal Web Site starter kit abbiamo una fotogallery, che permette l'upload delle foto e la creazione di album direttamente dall'area di amministrazione del web site. È infatti possibile creare un numero illimitato di album, che potranno contenere altrettante foto.

Come abbiamo visto nella guida ASP.NET Starter Kit, la fotogallery si compone di tre pagine:

• Albums.aspx che contiene l'elenco degli album
• Photos.aspx per la visualizzazioni delle immagini dell'album selezionato
• Details.aspx che mostra la singola foto dell'album e ne permette lo scorrimento

Per dare maggior dinamicità, si può implementare una fotogallery utilizzando ASP.NET AJAX, e più precisamente integrando il controllo SlideShow, che permette lo scorrimento (anche automatico) delle immagini contenute in un album, senza causare il caricamento completo della pagina, e quindi dando un feedback migliore ai visitatori del sito.

Creiamo allora un metodo nella pagina Details.aspx che restituisca un array di slide, e lo decoriamo con gli attributi WebMethod e ScriptMethod per permettere la chiamata a questo metodo direttamente dal client:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
  int albumID = Int32.Parse(HttpContext.Current.Request.QueryString["AlbumID"]);
  IList<Photo> photos = PhotoManager.GetPhotos(albumID);

  Slide[] slides = new Slide[photos.Count];

  for (int i = 0; i < photos.Count; i++)
  {
    Slide slide = new Slide();
    slide.ImagePath = string.Format("Handler.ashx?PhotoID={0}&Size=L",photos[i].PhotoID);
    slide.Name = photos[i].Caption;
    slide.Description = photos[i].Caption;
    slides[i] = slide;
  }
  return slides;
}

Nella pagina oltre al controllo SlideShow si deve inserire anche lo ScriptManager, per permettere l'uso di ASP.NET AJAX, ed impostare su true la proprietà EnablePageMethods per poter chiamare il metodo GetSlides() appena creato.

<asp:ScriptManager  ID="ScriptManager1" 
      runat="server" <span class="rossaccio">EnablePageMethods="true"</span> />

<div style="text-align:center">

<asp:Label runat="Server" ID="imageTitle" CssClass="slideTitle"/> <br />

<asp:Image ID="Image1" runat="server"  Height="300"
           Style="border: 1px solid black;width:auto" 
           ImageUrl="~/SlideShow/images/Blue hills.jpg"
           AlternateText="Blue Hills image" />

<asp:Label runat="server" ID="imageDescription" CssClass="slideDescription" /><br /><br />

<asp:Button runat="Server" ID="prevButton" 
            Text="Prev" Font-Size="Larger" />
            
<asp:Button runat="Server" ID="playButton" 
            Text="Play" Font-Size="Larger" />

<asp:Button runat="Server" ID="nextButton" 
            Text="Next" Font-Size="Larger" />

<ajaxToolkit:SlideShowExtender ID="slideshowextend1" runat="server" 
            TargetControlID="Image1"
            SlideShowServiceMethod="GetSlides" 
            AutoPlay="true" 
            ImageTitleLabelID="imageTitle"
            ImageDescriptionLabelID="imageDescription"
            NextButtonID="nextButton" 
            PlayButtonText="Play" 
            StopButtonText="Stop"
            PreviousButtonID="prevButton" 
            PlayButtonID="playButton" 
            Loop="true" />
</div>