Sortieren, Paging und Filtern von Daten mit Modell Bindung und Web Forms

von Tom fitzmacken

In dieser tutorialreihe werden grundlegende Aspekte der Verwendung der Modell Bindung mit einem ASP.net Web Forms-Projekt veranschaulicht. Die Modell Bindung sorgt für eine genauere Daten Interaktion als bei der Verarbeitung von Datenquellen Objekten (z. b. ObjectDataSource oder SqlDataSource). Diese Serie beginnt mit Einführungs Material und wechselt in spätere Tutorials zu erweiterten Konzepten.

In diesem Tutorial wird gezeigt, wie Sie die Daten mithilfe der Modell Bindung sortieren, Paging und Filtern können.

Dieses Tutorial baut auf dem Projekt auf, das im ersten Teil der Reihe erstellt wurde.

Sie können das gesamte Projekt in C# oder VB herunterladen . Der herunterladbare Code funktioniert entweder mit Visual Studio 2012 oder Visual Studio 2013. Dabei wird die Vorlage Visual Studio 2012 verwendet, die sich geringfügig von der in diesem Tutorial gezeigten Visual Studio 2013 Vorlage unterscheidet.

Was Sie erstellen

In diesem Tutorial gehen Sie wie folgt vor:

  1. Sortieren und Paging der Daten aktivieren
  2. Ermöglicht das Filtern der Daten basierend auf einer Auswahl durch den Benutzer.

Hinzufügen von Sortierung

Das Aktivieren der Sortierung in der GridView ist sehr einfach. Legen Sie in der Datei "Student. aspx" in der GridView einfach " allowsortier " auf " true " fest. Es ist nicht erforderlich, für jede Spalte einen SortExpression -Wert festzulegen, da die Daten aus automatisch verwendet werden. Die GridView ändert die Abfrage so, dass Sie die Reihenfolge der Daten nach dem ausgewählten Wert einschließt. Der hervorgehobene Code unten zeigt, was Sie zum Aktivieren der Sortierung vornehmen müssen.

<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>

Führen Sie die Webanwendung aus, und testen Sie das Sortieren von Student-Datensätzen anhand der Werte in verschiedenen Spalten

Studenten sortieren

Hinzufügen von Paging

Das Aktivieren von Paging ist ebenfalls sehr einfach. Legen Sie in der GridView die AllowPaging -Eigenschaft auf true fest, und legen Sie die PageSize -Eigenschaft auf die Anzahl der Datensätze fest, die auf jeder Seite angezeigt werden sollen. In diesem Tutorial können Sie es auf 4 festlegen.

<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">

Führen Sie die-Webanwendung aus, und beachten Sie, dass die Datensätze nun auf mehrere Seiten aufgeteilt sind und höchstens vier Datensätze auf einer einzelnen Seite angezeigt werden.

Paging hinzufügen

Durch die verzögerte Abfrage Ausführung wird die Effizienz der Anwendung verbessert. Anstatt das gesamte Dataset abzurufen, ändert die GridView die Abfrage so, dass nur die Datensätze für die aktuelle Seite abgerufen werden.

Datensätze nach Benutzer Auswahl Filtern

Die Modell Bindung fügt mehrere Attribute hinzu, mit denen Sie festlegen können, wie der Wert für einen Parameter in einer Modell Bindungsmethode festgelegt wird. Diese Attribute befinden sich im System. Web. modelbinding -Namespace. Dazu zählen:

  • Control
  • Cookie
  • Formular
  • Profil
  • QueryString
  • RouteData
  • Sitzung
  • UserProfile
  • ViewState

In diesem Tutorial verwenden Sie den Wert eines Steuer Elements, um zu filtern, welche Datensätze in der GridView angezeigt werden. Sie fügen das Control -Attribut der Abfrage Methode hinzu, die Sie zuvor erstellt haben. In einem späteren Tutorial wenden Sie das Attribut QueryString auf einen Parameter an, um anzugeben, dass der Parameterwert aus dem Wert einer Abfrage Zeichenfolge stammt.

Fügen Sie zunächst oberhalb von ValidationSummary eine Dropdown Liste hinzu, um zu filtern, welche Studenten angezeigt werden.

<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"/>

Ändern Sie in der Code Behind-Datei die Select-Methode so, dass Sie einen Wert aus dem-Steuerelement empfängt, und legen Sie den Namen des-Parameters auf den Namen des Steuer Elements fest, das den Wert bereitstellt.

Um das Steuerelement Attribut aufzulösen, müssen Sie eine using -Anweisung für den System. Web. modelbinding -Namespace hinzufügen.

using System.Web.ModelBinding;

Der folgende Code zeigt die ausgewählte Methode zum Filtern der zurückgegebenen Daten basierend auf dem Wert der Dropdown Liste. Durch das Hinzufügen eines Steuerelement Attributs vor einem Parameter wird angegeben, dass der Wert für diesen Parameter von einem Steuerelement mit dem gleichen Namen stammt.

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;    
}

Führen Sie die Webanwendung aus, und wählen Sie in der Dropdown Liste verschiedene Werte aus, um die Liste der Studenten zu filtern.

Schüler/Studenten Filtern

Zusammenfassung

In diesem Tutorial haben Sie das Sortieren und Paging der Daten aktiviert. Sie haben auch das Filtern der Daten nach dem Wert eines Steuer Elements aktiviert.

Im nächsten Tutorial verbessern Sie die Benutzeroberfläche, indem Sie ein jQuery UI-Widget in die Vorlage für dynamische Daten integrieren.