Un Blog con ASP.Net e SQLite, Terza Parte

27 settembre 2007 | Sviluppo Web | Nessun Commento.
Questo tutorial è diviso in tre parti distinte:

Negli interventi precedenti sono stati trattati, dopo una rapida introduzione a SQLite, la creazione del database e della pagina di amministrazione.

In questo ultimo intervento vedremo, invece, come creare l’ultimo componente del mini-blog: una semplice pagina per visualizzare gli interventi e navigarli per categorie.
La struttura sarà molto simile a quella della pagina di amministrazione: tramite una MultiView, infatti, caricheremo o una lista degli ultimi dieci interventi, oppure una lista degli interventi appartenenti ad una determinata categoria.

Scarica il progetto completo!

Organizziamo la pagina: la colonna di sinistra

Il layout sarà costituito da due colonne, quella di sinistra conterrà il menu di navigazione e l’altra gli interventi:

<div style="width:75%;">
     <div style="float: left; width: 25%;"></div>
     <div style="float: right; width: 69%;"></div>
</div>

Per mostrare la lista delle categorie, sarà sufficiente un controllo Repeater associato ad un SqlDataSource (per la quanto riguarda la creazione della stringa di connessione al database si veda la seconda parte del tutorial):

<div style="float: left; width: 25%;">
    <span style="font-weight: bold;">Categorie</span>
    <asp:Repeater ID="Categorie" runat="server" DataSourceID="Categorie_Source">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <li>
                <a href="default.aspx?categoria=<%# (string)Eval("NomeCategoria") %>"
                        title="<%# (string)Eval("NomeCategoria") %>">
                      <%# (string)Eval("NomeCategoria") %></a>
            </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
</div>
<asp:SqlDataSource ID="Categorie_Source" runat="server" ProviderName="System.Data.SQLite"
    ConnectionString="<%$ ConnectionStrings:ExampleBlogConnString %>"
    SelectCommand="SELECT * FROM Categorie">
</asp:SqlDataSource>

Come potete vedere il Repeater crea una lista non ordinata di elementi che nel nostro caso saranno i nomi delle categorie, con un link che passa come parametro nella query string il nome della categoria. Questo viene recuperato nell’evento onLoad della pagina e la vista attiva all’interno del MultiView (che creeremo fra poche righe) modificata di conseguenza:

protected void Page_Load(object sender, EventArgs e)
{
   if (!this.IsPostBack)
      if (!string.IsNullOrEmpty(Request.QueryString["categoria"]))
      {
         MultiView1.ActiveViewIndex = 1;
         NomeCategoria.Text = Request.QueryString["categoria"];
      }
      else
         MultiView1.ActiveViewIndex = 0;
}

La colonna di destra: mostriamo gli interventi

Ecco qui, per concludere il controllo MultiView incaricato di mostrare gli interventi. Il codice mi sembra abbastanza semplice da non richiedere ulteriore analisi, per ogni dubbio lasciate un commento!

<asp:MultiView id="MultiView1" runat="server" activeviewindex="0">
    <asp:View ID="ListaInterventi" runat="server">
        <h1>Ultimi Interventi</h1>
        <asp:Repeater ID="Interventi" runat="server" DataSourceID="Interventi_Source">
            <ItemTemplate>
                <div>
                    <h2><%# (string)Eval("Titolo") %></h2>
                    <div style="font-weight: bold;">
                          <%# ((DateTime)Eval("Data")).ToString("dd/MM/yyyy hh:mm") %>,
                          <%# (string)Eval("NomeCategoria") %>
                    </div>
                    <div>
                        <%# (string)Eval("Testo") %>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

        <asp:SqlDataSource ID="Interventi_Source" runat="server" ProviderName="System.Data.SQLite"
            ConnectionString="<%$ ConnectionStrings:ExampleBlogConnString %>"
            SelectCommand="SELECT * FROM Interventi INNER JOIN Categorie ON Interventi.Categoria = Categorie.IDCategoria ORDER BY Data DESC LIMIT 10">
        </asp:SqlDataSource>
    </asp:View>

    <asp:View ID="InterventiPerCategoria" runat="server">
        <h1>
            Categoria:
            <asp:Literal ID="NomeCategoria" runat="server" />
        </h1>
        <asp:Repeater ID="InterventiCat" runat="server" DataSourceID="InterventiCat_Source">
            <ItemTemplate>
                <div>
                    <h2><%# (string)Eval("Titolo") %></h2>
                    <div style="font-weight: bold;">
                        <%# ((DateTime)Eval("Data")).ToString() %>
                        ,
                        <%# (string)Eval("NomeCategoria") %>
                    </div>
                    <div>
                        <%# (string)Eval("Testo") %></div>
                    </div>
            </ItemTemplate>
        </asp:Repeater>

        <asp:SqlDataSource ID="InterventiCat_Source" runat="server" ProviderName="System.Data.SQLite"
            ConnectionString="<%$ ConnectionStrings:ExampleBlogConnString %>"
            SelectCommand="SELECT * FROM Interventi INNER JOIN Categorie ON Interventi.Categoria = Categorie.IDCategoria WHERE NomeCategoria = @NomeCategoria">
            <SelectParameters>
                <asp:QueryStringParameter Name="@NomeCategoria" Type="string"
                        QueryStringField="categoria" />
            </SelectParameters>
        </asp:SqlDataSource>
    </asp:View>
</asp:MultiView>

Si conclude così questo piccolo tutorial realizzato principalmente per mostrare le potenzialità di SQLite e del provider per ADO.Net System.Data.Sqlite.

Scarica il progetto completo!