Dall'archivio script > ASP.NET 4.0

Collegare la ListView di jQuery Mobile ad una fonte dati con ASP.NET

di Marco De SanctisMarco De Sanctis, in ASP.NET 4.0, ASP.NET MVC,

Come abbiamo avuto modo di vedere nell'articolo Introduzione a jQuery Mobile, il controllo ListView recita, in questo framework, il ruolo di assoluto protagonista, grazie alla versatilità con cui può essere utilizzato per rappresentare elenchi di dati e di generare template anche complessi.

Dato che, in fin dei conti, si tratta di una normalissima lista HTML, è piuttosto semplice utilizzarlo in un'applicazione ASP.NET (sia essa Web Forms o MVC), così che possiamo anche agganciarlo ad una fonte dati.

Utilizzo in ASP.NET Web Forms

Prima di capire come sfruttare jQuery Mobile con ASP.NET Web Forms, è necessaria una considerazione sull'approccio da adottare nella realizzazione dell'applicazione. Il principio di funzionamento di jQuery Mobile si basa pesantemente sulla manipolazione del DOM e sul caricamento tramite AJAX di porzioni di altre pagine. Pertanto, non si adatta bene al modello Web Forms e ciò si traduce, in pratica, nella pressoché totale impossibilità di utilizzare concetti quali ViewState o PostBack.

Fatta questa doverosa premessa, il controllo BullettedList è immediatamente utilizzabile per produrre una unordered list idonea ad essere processata da jQuery Mobile e trasformata in un oggetto ListView. L'unico requisito è infatti quello di aggiungere l'attributo data-role al controllo. Questo attributo, infatti, viene ignorato da ASP.NET e portato in output così com'è:

<asp:EntityDataSource ID="NorthwindDataSource" runat="server" 
    ConnectionString="name=NorthwindEntities" 
    DefaultContainerName="NorthwindEntities" EnableFlattening="False" 
    EntitySetName="Customers">
</asp:EntityDataSource>
<asp:BulletedList runat="server" ID="theList" data-role="listview" 
    DataSourceID="NorthwindDataSource" DataTextField="CompanyName" 
    DataValueField="CustomerID">
</asp:BulletedList>

Un limite di BullettedList, però, è che permette di renderizzare solo elementi semplici, il cui contenuto è associato al valore di una singola proprietà dell'oggetto in binding. Se invece abbiamo bisogno di realizzare template più complessi, possiamo avvalerci di un controllo con un maggiore grado di personalizzabilità, come può essere un Repeater o un ListView, come nel codice in basso:

<asp:ListView runat="server" ID="list" DataSourceID="NorthwindDataSource" ItemPlaceholderID="item">
    <LayoutTemplate>
        <ul data-role="listview">
            <asp:PlaceHolder id="item" runat="server" />
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li>
            <h2><%# Eval("CompanyName") %></h2>
            <p><%# Eval("Country") %></p>
        </li>
    </ItemTemplate>
</asp:ListView>

In questo caso, ad esempio, il LayoutTemplate è una unordered-list con l'ormai noto attributo data-role="listview", mentre l'ItemTemplate sfrutta il motore di binding per visualizzare sia il nome dell'azienda che la nazione.

Utilizzo in ASP.NET MVC

L'utilizzo di jQuery Mobile in ASP.NET MVC è invece molto più naturale visto che, con il motore Razor, scriviamo del markup che somiglia molto all'effettivo risultato in output e ha un modello di sviluppo molto meno astratto e più aderente al funzionamento del protocollo HTTP.

Supponendo, infatti, di aver recuperato i dati tramite il controller e di averli utilizzati per popolare il model della pagina, è sufficiente un ciclo basato su foreach per poter restituire questo contenuto al chiamante:

<ul data-role="listview">
    @foreach (var customer in this.Model.Customers)
    {
        <li>
            <h2>@customer.CompanyName</h2>
            <p>@customer.Country</p>
        </li>  
    }
</ul>

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi