I controlli Repeater di Asp.NET ci permettono di creare un elenco, di qualsiasi tipo, prendendo i dati da una sorgente (tipicamente un database).
Oggi vediamo come usarli in VB.NET.
Cominciamo con il controllo; ogni controllo ha a disposizione diverse "parti" che non siamo obbligati ad usare:
Quando usiamo JSON, possiamo avere degli array dentro un oggetto.
Quindi, quando cicliamo sul oggetto più grande, ci può capitare di dover eseguire anche un ciclo su un "sotto-array".
E questo mi è capitato in una app scritta in Ionic.
In pratica, l'oggetto principale riguardava gli attributi di un cliente; al quale sono legate più indiirizzi sui quali ciclare.
Abbiamo già parlato di AngularJS, nello specifico su come prendere i dati in formato JSON.
Partendo da quell'articolo vediamo come impostare una barra di ricerca per filtrare i risultati.
La parte di Javascript non cambia, in quanto il tutto è fatto da HTML, usando l'attributo ng-model e impostando il filter nell'attributo ng-repeat.
Bhe devo dire che ormai Javascript mi sta piacendo sempre di più come linguaggio, visto anche la quantità di framework e librerie in giro.
Oggi introduciamo AngularJS, ottimo framework per Javscript sponsorizzato direttamente da Google!
AngularJS si ispira al pattern MVC (Model-View-Controller) come altri concorrenti; quello che fa di questo framework quello vincente, almeno per me, è la semplcitià e il poco codice da usare.
Qui vedremo come reperire i dati in formato JSON e metterli sulla pagina HTML, senza fare uso di linguaggi lato server (si presuppone che abbiate già una fonte JSON).
Questa la pagina web di base:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mattepuffo's Books</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body ng-app="listBooksApp">
<div ng-controller="BooksCtrl">
<ul>
<li ng-repeat="book in books">
{{book.title}}
</li>
</ul>
</div>
</body>
</html>
Come vedete per usare AngularJS dobbiamo includere solo la sua libreria; non abbiamo bisogno di jQuery o di altro.
In una pagina aspx ho un LinkButton con il quale attivo un evento.
La cosa più "problematica" è che devo passare il valore del LinkButton ad un altro componente.
In questo caso non bastano le solite proprietà Value o Text.
Andiamo con ordine; questo il componente nella pagina:
<asp:LinkButton ID="btn_art_singolo" runat="server" OnCommand="go_Click" CommandName='<%# DataBinder.Eval(Container.DataItem, "ARTICOLO") %>'>
<%# DataBinder.Eval(Container.DataItem, "ARTICOLO") %>
</asp:LinkButton>
Il LinkButton sta dentro a un Repeater e prende il valore in maniera dinamica da database.
Tanto per cominciare no avremo un evento OnClick ma u nevento OnCommand.
I Web Form di Asp.NET hanno parrecchi controlli server utili, tipo le GridView per rappresentare i dati in forma tabellarre.
Io personalmene trovo questo controllo un pò obsoleto.
Ad esempio già per il fatto che quando fai il sorting la pagina viene ricaricata.....
Io ho optato per il plugin DataTable di jQuery, che già uso con soddisfazione in PHP.
Lo trovo molto più comodo e moderno.
Vediamo come usarlo in pagine Asp.NET.
Prima di tutto abbiamo una classica funzione che ci restituisce un DataSet o simili:
public DataSet getCodiciClienti()
{
connection().Open();
OdbcCommand cmd = new OdbcCommand();
OdbcDataAdapter adapter = new OdbcDataAdapter();
DataSet ds = new DataSet();
cmd.CommandText = "SELECT * FROM clienti";
cmd.Connection = conn;
adapter.SelectCommand = cmd;
adapter.Fill(ds);
ds.Dispose();
conn.Close();
return ds;
}
Nulla di nuovo.
Poi prepariamo a scarichiamo il tutto.
Abbiamo bisogno di jQuery, del plugin che troviamo qua, di una tabella per raccogliere i dati, di un file JS e di un controllo Repeater.
Quindi nell'head della pagina:
<link rel="stylesheet" type="text/css" href="Styles/demo_table_jui.css" />
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.23.custom.css" />
<script type="text/javascript" src="Scripts/jquery182.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
I primi due CSS servono per lo stile della tabella; notate che sto facendo uso di un CSS di jQuery UI.
Questa la funzione JS:
$(document).ready(function () {
$('.dtable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
Con il primo parametro indico di usare lo stile di jQuery UI.