Ordinamento, paging e filtro dei dati con associazione di modelli e web form

di Tom FitzMacken

Questa serie di esercitazioni illustra gli aspetti di base dell'uso dell'associazione di modelli con un progetto di Web Forms ASP.NET. L'associazione di modelli rende l'interazione dei dati più semplice rispetto alla gestione di oggetti origine dati, ad esempio ObjectDataSource o SqlDataSource. Questa serie inizia con materiale introduttivo e passa a concetti più avanzati nelle esercitazioni successive.

Questa esercitazione illustra come aggiungere l'ordinamento, il paging e il filtro dei dati tramite l'associazione di modelli.

Questa esercitazione si basa sul progetto creato nella prima parte della serie.

È possibile scaricare il progetto completo in C# o VB. Il codice scaricabile funziona con Visual Studio 2012 o Visual Studio 2013. Usa il modello di Visual Studio 2012, leggermente diverso dal modello di Visual Studio 2013 illustrato in questa esercitazione.

Obiettivo

In questa esercitazione si apprenderà come:

1. Abilitare l'ordinamento e il paging dei dati
2. Abilitare il filtro dei dati in base a una selezione da parte dell'utente

Aggiungere l'ordinamento

L'abilitazione dell'ordinamento in GridView è molto semplice. Nel file Student.aspx è sufficiente impostare AllowSorting su true in GridView. Non è necessario impostare un valore SortExpression per ogni colonna perché datafield viene usato automaticamente. GridView modifica la query in modo da includere l'ordinamento dei dati in base al valore selezionato. Il codice evidenziato di seguito mostra l'aggiunta che è necessario eseguire per abilitare l'ordinamento.

<asp:GridView runat="server" ID="studentsGrid"
    ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
    SelectMethod="studentsGrid_GetData"
    UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
    AllowSorting="true" 
    AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"  
    AutoGenerateColumns="false">
  <Columns>
    <asp:DynamicField DataField="StudentID" />
    <asp:DynamicField DataField="LastName" />
    <asp:DynamicField DataField="FirstName" />
    <asp:DynamicField DataField="Year" />
    <asp:TemplateField HeaderText="Total Credits">
      <ItemTemplate>
        <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>"
            runat="server" />
      </ItemTemplate>
    </asp:TemplateField>        
  </Columns>
</asp:GridView>

Eseguire l'applicazione Web e testare l'ordinamento dei record degli studenti in base ai valori in colonne diverse.

Aggiungere la suddivisione in pagine

L'abilitazione del paging è anche molto semplice. In GridView impostare la proprietà AllowPaging su true e impostare la proprietà PageSize sul numero di record da visualizzare in ogni pagina. In questa esercitazione è possibile impostarlo su 4.

<asp:GridView runat="server" ID="studentsGrid"
    ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
    SelectMethod="studentsGrid_GetData"
    UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
    AllowSorting="true" AllowPaging="true" PageSize="4"
    AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"  
    AutoGenerateColumns="false">

Eseguire l'applicazione Web e notare che ora i record sono divisi su più pagine con non più di 4 record visualizzati in una singola pagina.

L'esecuzione posticipata delle query migliora l'efficienza dell'applicazione. Anziché recuperare l'intero set di dati, GridView modifica la query per recuperare solo i record per la pagina corrente.

Filtrare i record in base alla selezione dell'utente

L'associazione di modelli aggiunge diversi attributi che consentono di designare come impostare il valore per un parametro in un metodo di associazione di modelli. Questi attributi si trovano nello spazio dei nomi System.Web.ModelBinding . e comprendono:

• Control
• Cookie
• Form
• Profilo
• QueryString
• Routedata
• sessione
• UserProfile
• ViewState

In questa esercitazione si userà il valore di un controllo per filtrare i record visualizzati in GridView. Si aggiungerà l'attributo Control al metodo di query creato in precedenza. In un'esercitazione successiva si applicherà l'attributo QueryString a un parametro per specificare che il valore del parametro proviene da un valore stringa di query.

Prima di tutto, sopra ValidationSummary, aggiungere un elenco a discesa per filtrare gli studenti visualizzati.

<asp:HyperLink runat="server" NavigateUrl="~/AddStudent" Text="Add New Student" />

<br /><br />
<asp:Label runat="server" Text="Show:" />
<asp:DropDownList runat="server" AutoPostBack="true" ID="DisplayYear">
    <asp:ListItem Text="All" Value="" />
    <asp:ListItem Text="Freshman" />
    <asp:ListItem Text="Sophomore" />
    <asp:ListItem Text="Junior" />
    <asp:ListItem Text="Senior" />
</asp:DropDownList>

<asp:ValidationSummary runat="server" ShowModelStateErrors="true"/>

Nel file code-behind modificare il metodo select per ricevere un valore dal controllo e impostare il nome del parametro sul nome del controllo che fornisce il valore.

Per risolvere l'attributo Control, è necessario aggiungere un'istruzione using per lo spazio dei nomi System.Web.ModelBinding .

using System.Web.ModelBinding;

Il codice seguente mostra il metodo select rielaborato per filtrare i dati restituiti in base al valore dell'elenco a discesa. L'aggiunta di un attributo di controllo prima di un parametro specifica che il valore per questo parametro proviene da un controllo con lo stesso nome.

public IQueryable<Student> studentsGrid_GetData([Control] AcademicYear? displayYear)
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));

    if (displayYear != null)
    {
        query = query.Where(s => s.Year == displayYear);   
    }

    return query;    
}

Eseguire l'applicazione Web e selezionare valori diversi dall'elenco a discesa per filtrare l'elenco degli studenti.

Conclusione

In questa esercitazione è stato abilitato l'ordinamento e il paging dei dati. È anche stato abilitato il filtro dei dati in base al valore di un controllo .

Nell'esercitazione successiva si migliorerà l'interfaccia utente integrando un widget dell'interfaccia utente JQuery nel modello di dati dinamici.

IndietroAvanti