ASP.Net  »  Articoli  »  Esempi e controlli ASP.NET 

Nell'articolo precendente abbiamo osservato le basi del controllo Repeater e ci siamo ripromessi di utilizzare questo controllo per visualizzare il feed RSS di Edit.

L'elenco delle news di Edit

La prima cosa da fare è creare una sorgente dati XML che peschi informazioni dal file RSS e le fornisca al nostro Repeater. Per questo utilizziamo un XmlDataSource che chiamiamo "FeedEdit":

<asp:XmlDataSource ID="FeedEdit" runat="server"
                   DataFile="http://blog.html.it/rss"  
                   XPath="//item">
</asp:XmlDataSource>

L'attributo DataFile indica il file XML da interrogare e in XPath abbiamo definito l'espressione che preleva tutti gli elementi "item" del documento. Questo componente ci fornirà quindi tutte le entries del nostro feed. Non ci resta che andare avanti con Repeater.

Inseriamo i dati nel template

Una volta creato il nostro datasource, riprendiamo il codice che avevamo visto la scorsa volta e vediamo come collegare il controllo ai dati.

Il binding è molto semplice, è sufficiente attribuire al DataSourceID del Repeater l'ID della fonte di dati:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="FeedEdit" >

A questo punto è tutto collegato, non ci resta che decidere il markup HTML che ci serve per mostrare le informazioni. Optiamo per un template di questo tipo:

<h1>Titolo del feed</h1><dl><!--header-->

<dt><a href=""><!-- titolo dell'item --></a></dt>
<dd><!-- descrizione dell'item --></dd>

<div class="separator"><a href="#">top</a></div><!--separator-->

<dt class ="even"><a href=""><!-- titolo dell'item alternativo --></a></dt>
<dd class ="even"><!-- descrizione dell'item alternativo --></dd>

<div class="separator"><a href="#">top</a></div><!--separator-->

</dl><div class="bottom">HTML.it</div> <!--footer-->

Non ci resta che incastonare il nostro markup HTML nel template del Repeater:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="FeedEdit" >

  <HeaderTemplate><h1>Feed RSS di <a href="http://blog.html.it/rss">Edit</a></h1><dl></HeaderTemplate>
  
  <ItemTemplate>
    <dt><a href="<%#  XPath("link") %>"><%# XPath("title") %></a></dt>
	<dd><%# XPath("description") %></dd>
  </ItemTemplate>
  
  <AlternatingItemTemplate>
    <dt class ="even"><a href="<%# XPath("link") %>"><%# XPath("title") %></a></dt>
	<dd class ="even"><%# XPath("description") %></dd>
  </AlternatingItemTemplate>
  
  <SeparatorTemplate><div class="separator"><a href="#">top</a></div></SeparatorTemplate>
  
  <FooterTemplate></dl><div class="bottom">HTML.it</div></FooterTemplate>

</asp:Repeater>

XPath()

Il gioco è fatto, ma prima di passare al make-up soffermiamoci sul metodo XPath(). Qui è importante sottolineare che non utilizziamo Eval() come faremmo ad esempio quando il datasource è una tabella SQL, per semplicità possiamo dire che XPath() è l'omologo di Eval() ma è anche molto potente e permette di effettuare vere e proprie interrogazioni in formato XPath appunto alla nostra sorgente dati.

Il CSS

Per ottenere il look-and-feel che abbiamo visto la scorsa volta non ci resta che inserire un po' di CSS:

a  {font-family:Georgia, serif; text-decoration:none; color:#000; }
a:hover {color:#770;}
h1 {font:40px Georgia, serif; font-style:italic;}
dl {margin:30px; width:600px;}
dt {margin-top:20px; font-size:24px;}
dd {font:16px Georgia, serif; margin:0; padding:10px 0; color: #222; }
.even { text-align:right;}
.separator {border-bottom:1px solid #eee; width:150px; margin:10px auto;font: 9px verdana,sans-serif; text-align:center; letter-spacing:0.2em;}
.bottom {width:630px; background-color:#700; font:12px Georgia, serif; color:#fff; text-align:right;padding:2px; }

Altri articoli

Altre guide

Altre newsletter