In questi giorni sto realizzando la sezione Gallery di un sito di una gioielleria aretina utilizzando alcune delle ottime tecniche CSS presenti su CssPlay (so che a molti potrebbe non interessare ma è un ottima fonte ).  Ho deciso quindi di modellare delle semplici entity rappresentanti il catalogo delle immagini

                                                           

 

 

Dato che come hosting il sito si appoggerà sul piano base di Aruba ( lungi da me riaprire la interminabile diatriba sulla qualità del servizio) ho deciso di utilizzare come fonte dati un file xml che presenta una struttura che ben descrive le entities sopra mostrare ( niente impedance mismatching sarà per la prox volta   )

<Categorie>
    <Categoria>
      <NomeCategoria>Orecchini</NomeCategoria>
      <Articoli>
        <Articolo>
          <Titolo>foto1</Titolo>
          <Descrizione>desc1</Descrizione>
          <PathImmagine>images/Gallery/pic_1h.jpg</PathImmagine>
          <AltText>ciao </AltText>
        </Articolo>
      </Articoli>
    </Categoria>
</Categorie>

Ecco a questo punto viene il bello... nel senso che per come sono state definite le entity nel caso in esame, ho deciso di usare un Repeater che ciclando sulle varie categorie si occupi anche delle gestione dei singoli articoli sfruttando all' interno del proprio ItemTemplate un Nested Repeater;  di seguito vi mostro uno stralcio del markup utilizzato all' interno della pagina .aspx  

   1: <asp:Repeater ID="CategoryRepeater" runat="server" OnItemDataBound="CategoryRepeater_ItemDataBound">
   2:     <ItemTemplate>
   3:       <li><a href="#nogo" class="set">
   4:           <%#DataBinder.Eval(Container.DataItem, "NomeCategoria")%>
   5:           </a>
   6:           <ul>
   7:              <asp:Repeater ID="ImageRepeater" runat="server">
   8:                <ItemTemplate>
   9:                   <li><a href="#nogo" class="hor">
  10:                            <img src="<%# DataBinder.Eval(Container.DataItem,"PathImmagine") %>" 
  11:                                 alt="<%# DataBinder.Eval(Container.DataItem,"AltText") %>" 
  12:                                 title="<%# DataBinder.Eval(Container.DataItem,"Titolo") %>" />
  13:                         <b><%# DataBinder.Eval(Container.DataItem,"Descrizione")%></b></a></li>
  14:                 </ItemTemplate>
  15:               </asp:Repeater>
  16:            </ul>
  17:       </li>
  18:     </ItemTemplate>
  19: </asp:Repeater>
  20:  

Passiamo adesso ad analizzare il code-behind della seguente pagina dove viene effettuata l' operazione di data binding fra il Catalogo e il Repeater 

public partial class CatalogBO : System.Web.UI.Page
{
    protected System.Web.UI.WebControls.Repeater ImageRepeater;
    private Catalogo catalogo; 
 
    protected void Page_Load(object sender, EventArgs e)
    {
        XmlSerializer serializer = new XmlSerializer(typeof(Catalogo));
        StreamReader xmlReader = new StreamReader(MapPath(@"App_Data\ImagePublicCatalog.xml"));
        catalogo = (Catalogo)serializer.Deserialize(xmlReader);
        CategoryRepeater.DataSource = catalogo.Categorie;
        CategoryRepeater.DataBind();
    }
    protected void CategoryRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        RepeaterItem item = e.Item;
        if ((item.ItemType == ListItemType.Item) ||
            (item.ItemType == ListItemType.AlternatingItem))
        {
            ImageRepeater = (Repeater)item.FindControl("ImageRepeater");
            ImageRepeater.DataSource = catalogo.Categorie[e.Item.ItemIndex].Articoli;
            ImageRepeater.DataBind();
        }
    }
}

 

Durante l' evento di Page Load viene effettuata l'effettiva operazione di caricamento dei dati deserializzando il contenuto del file .xml all' interno dell' oggetto Catalogo, fatto ciò viene impostato il binding sul repeater esterno; per effettuare il binding del repeater interno viene utilizzato l'evento ItemDataBound che viene scatenato prima che l'item sottoposto a data-bound venga renderizzato; all' interno quindi del gestore dell 'evento ItemDataBound viene recuperata una reference al nested repeater e in seguito viene settato il binding utilizzando l' ItemIndex corrispondente alla relativa categoria in modo tale da recuperare gli articoli effettivamente appartenenti a quella categoria.

Ad maiora...

Technorati tags: