Sortieren, Paging und Filtern von Daten mit Modellbindung und Webformularen

von Tom FitzMacken

In dieser Tutorialreihe werden grundlegende Aspekte der Verwendung der Modellbindung mit einem ASP.NET Web Forms-Projekt veranschaulicht. Die Modellbindung macht die Dateninteraktion einfacher als den Umgang mit Datenquellenobjekten (z. B. ObjectDataSource oder SqlDataSource). Diese Reihe beginnt mit Einführungsmaterial und geht in späteren Tutorials zu komplexeren Konzepten über.

In diesem Tutorial wird gezeigt, wie Sie die Sortierung, das Paging und das Filtern der Daten über die Modellbindung hinzufügen.

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. Sie verwendet die Visual Studio 2012-Vorlage, die sich geringfügig von der in diesem Tutorial gezeigten Visual Studio 2013 Vorlage unterscheidet.

Funktion des erstellten Programms

In diesem Tutorial gehen Sie wie folgt vor:

1. Aktivieren der Sortierung und Paging der Daten
2. Aktivieren der Filterung der Daten basierend auf einer Auswahl durch den Benutzer

Hinzufügen von Sortierung

Das Aktivieren der Sortierung in gridView ist sehr einfach. Legen Sie in der Datei Student.aspx einfach AllowSorting in der GridView auf true fest. Sie müssen keinen SortExpression-Wert für jede Spalte festlegen, da DataField automatisch verwendet wird. Die GridView ändert die Abfrage so, dass sie die Reihenfolge der Daten nach dem ausgewählten Wert einschließt. Der unten hervorgehobene Code zeigt die Ergänzung, die Sie vornehmen müssen, um die Sortierung zu aktivieren.

<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 die Sortierung der Schülerdatensätze nach den Werten in verschiedenen Spalten.

Hinzufügen von Paging

Das Aktivieren des Pagings ist ebenfalls sehr einfach. Legen Sie in 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 jetzt auf mehrere Seiten aufgeteilt sind, wobei nicht mehr als 4 Datensätze auf einer einzelnen Seite angezeigt werden.

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

Filtern von Datensätzen nach Benutzerauswahl

Die Modellbindung fügt mehrere Attribute hinzu, mit denen Sie festlegen können, wie der Wert für einen Parameter in einer Modellbindungsmethode festgelegt werden soll. Diese Attribute befinden sich im System.Web.ModelBinding-Namespace . Dazu gehören:

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

In diesem Tutorial verwenden Sie den Wert eines Steuerelements, um zu filtern, welche Datensätze in GridView angezeigt werden. Sie fügen der zuvor erstellten Abfragemethode das Control-Attribut hinzu. In einem späteren Tutorial wenden Sie das QueryString-Attribut auf einen Parameter an, um anzugeben, dass der Parameterwert aus einem Abfragezeichenfolgenwert stammt.

Fügen Sie zunächst oberhalb der Validierungsummary eine Dropdownliste hinzu, um zu filtern, welche Kursteilnehmer 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 CodeBehind-Datei die select-Methode, um einen Wert aus dem Steuerelement zu empfangen, und legen Sie den Namen des Parameters auf den Namen des Steuerelements fest, das den Wert bereitstellt.

Sie müssen eine using-Anweisung für den System.Web.ModelBinding-Namespace hinzufügen, um das Control-Attribut aufzulösen.

using System.Web.ModelBinding;

Der folgende Code zeigt, wie die Select-Methode erneut verwendet wurde, um die zurückgegebenen Daten basierend auf dem Wert der Dropdownliste zu filtern. Das Hinzufügen eines Steuerelementattributes vor einem Parameter gibt an, dass der Wert für diesen Parameter von einem Steuerelement mit demselben 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 verschiedene Werte aus der Dropdownliste aus, um die Liste der Kursteilnehmer zu filtern.

Zusammenfassung

In diesem Tutorial haben Sie das Sortieren und Paging der Daten aktiviert. Außerdem haben Sie das Filtern der Daten nach dem Wert eines Steuerelements aktiviert.

Im nächsten Tutorial erweitern Sie die Benutzeroberfläche, indem Sie ein JQuery-UI-Widget in die dynamische Datenvorlage integrieren.

ZurückWeiter