Utilizzo di Flexigrid in ASP.NET MVC
Flexigrid è un plugin di jQuery che permette di aggiungere notevoli funzionalità ed un look & feel avanzato alle nostre tabelle HTML.
Indipendentemente dalle funzionalità lato client la bellezza del plugin sta (secondo me) nella semplicità nel popolare la griglia tramite chiamate JSON asincrone.
Supponiamo di voler creare una semplice rubrica, la prima cosa da fare è definire il nostro modello di dati.
Ecco la definizione della classe ContactModel
1: namespace FlexiGridTutorial.Models
2: { 3: public class ContactModel
4: { 5: public string Name { get; set; } 6: public string Address { get; set; } 7: public string Phone { get; set; } 8:
9: public ContactModel()
10: { 11: }
12:
13: public ContactModel(string name, string address)
14: { 15: Name = name;
16: Address = address;
17: }
18:
19: public ContactModel(string name, string address, string phone)
20: { 21: Name = name;
22: Address = address;
23: Phone = phone;
24: }
25: }
26: }
Aggiungiamo quindi la definizione del modello della nostra rubrica: ContactsListModel
1: using System.Collections.Generic;
2:
3: namespace FlexiGridTutorial.Models
4: { 5: public class ContactsListModel
6: { 7: public IEnumerable<ContactModel> Contacts { get; private set; } 8: public string ID { get; private set; } 9: public ContactsListModel(string listID, IEnumerable<ContactModel> contacts)
10: { 11: ID = listID;
12: Contacts = contacts;
13: }
14: }
15: }
Per semplificare il progetto creiamo una classe helper che fornirà i dati necessari al popolamento della rubrica.
1: using System.Collections.Generic;
2: using FlexiGridTutorial.Models;
3:
4: namespace FlexiGridTutorial.Helpers
5: { 6: public static class SampleData
7: { 8: public static IList<ContactModel> Contacts
9: { 10: get
11: { 12: var result = new List<ContactModel>();
13:
14: result.Add(new ContactModel("Mario Rossi", "Via Garibaldi, 9 - Milano", "555-0000")); 15: result.Add(new ContactModel("Giovanni Verdi", "Via Fantasia, 10 - Roma", "555-1111")); 16: result.Add(new ContactModel("Roberto Bianchi", "Piazza dei Partigiani, 20 - Roma", "555-2222")); 17: return result;
18: }
19: }
20: }
21: }
Aggiungiamo ora il primo step del tutorial modificando la classe HomeController inserendo la action per il primo step
1: public ActionResult Tutorial1()
2: { 3: return View(SampleData.Contacts);
4: }
Passiamo alla creazione della relativa view tramite la scorciatoia introdotta in Beta 1, posizionare il caret nello scope di Tutorial1 e premere Ctrl+M, Ctrl+V (Marry View)
In questo modo la view creata è tipizzata per gestire l'enumerazione di ContactModel.
Per semplicità creiamo una partial view che renderizza l'elenco dei contatti in una tabella html.
Aggiungiamo un nuovo usercontrol ContactsList.ascx nella cartella Views\Home
Sorgente di ContactsList.ascx
1: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ContactsList.ascx.cs" Inherits="FlexiGridTutorial.Views.Home.ContactsList" %>
2: <table id="<%=ViewData.Model.ID%>">
3: <thead>
4: <tr>
5: <th class="name">
6: Name
7: </th>
8: <th class="address">
9: Address
10: </th>
11: <th class="phone">
12: Phone
13: </th>
14: </tr>
15: </thead>
16: <tbody>
17:
18: <%foreach (var contact in ViewData.Model.Contacts)
19: {%> 20: <tr>
21: <td class="name">
22: <%=contact.Name %>
23: </td>
24: <td class="address">
25: <%=contact.Address%>
26: </td>
27: <td class="phone">
28: <%=contact.Phone%>
29: </td>
30: </tr>
31: <%} %>
32: </tbody>
33: </table>
Sorgente di ContactsList.ascx.cs
1: namespace FlexiGridTutorial.Views.Home
2: { 3: public partial class ContactsList : System.Web.Mvc.ViewUserControl<FlexiGridTutorial.Models.ContactsListModel>
4: { 5: }
6: }
In questo caso il nostro controllo è tipizzato per la classe ContactsListModel in modo da poter associare un id alla lista di contatti.
Aggiungiamo gli stili necessari nel site.css per definire la larghezza delle colonne (necessario per una corretta visualizzazione della griglia).
1: th.name
2: { 3: width:200px;
4: }
5:
6: th.address
7: { 8: width:300px;
9: }
10:
11: th.phone
12: { 13: width:100px;
14: }
15:
16: td.name
17: { 18: width:200px;
19: }
20:
21: td.address
22: { 23: width:300px;
24: }
25:
26: td.phone
27: { 28: width:100px;
29: }
Modifichiamo ora la Tutorial1.aspx per renderizzare la rubrica
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true"
2: CodeBehind="Tutorial1.aspx.cs" Inherits="FlexiGridTutorial.Views.Home.Tutorial1" %>
3: <%@ Import Namespace="FlexiGridTutorial.Models"%>
4:
5: <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
6: <%Html.RenderPartial("ContactsList", new ContactsListModel("table1", ViewData.Model));%> 7: </asp:Content>
Il risultato è il seguente:
Modifichiamo la MasterPage per aggiungere il supporto jQuery e Flexigrid. Contestualmente aggiungiamo un nuovo ContentPlaceHolder nel blocco head per poter inserire del javascript dalle pagine.
1: <head runat="server">
2: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
3: <title><%= Html.Encode(ViewData["Title"]) %></title>
4: <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
5: <script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
6: <script src="../../Scripts/flexigrid.js" type="text/javascript"></script>
7: <link href="../../Content/flexigrid/flexigrid.css" rel="stylesheet" type="text/css" />
8: <asp:ContentPlaceHolder ID="headerPlaceHolder" runat="server" />
9: </head>
Aggiungiamo ora una seconda action a HomeController per generare una pagina con la trasformazione flexigrid
1: public ActionResult Tutorial2()
2: { 3: return View(SampleData.Contacts);
4: }
Creiamo la view anche per questa action e nel codice renderizziamo due volte la rubrica con due id differenti. La seconda griglia verrà trasformata in flexigrid.
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Tutorial2.aspx.cs" Inherits="FlexiGridTutorial.Views.Home.Tutorial2" %>
2: <%@ Import Namespace="FlexiGridTutorial.Models"%>
3: <asp:Content ID="Content2" ContentPlaceHolderID="headerPlaceHolder" runat="server">
4: <script language="javascript">
5: $(function() { 6: $("#table2").flexigrid(); 7: });
8:
9: </script>
10: </asp:Content>
11:
12: <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
13: <%Html.RenderPartial("ContactsList", new ContactsListModel("table1", ViewData.Model));%> 14: <br />
15: <%Html.RenderPartial("ContactsList", new ContactsListModel("table2", ViewData.Model));%> 16: </asp:Content>
Il risultato è il seguente raggiunto praticamente con una sola riga di codice $("#table2").flexigrid();
Ora è possibile nascondere, spostare e ridimensionare le colonne interattivamente.
Nel prossimo post vedremo la creazione dinamica della griglia in c# con interfaccia fluente e nell'ultimo il popolamento asincrono dei dati.
Download: FlexiGridTutorial.zip (222kb)