Sortowanie, stronicowanie i filtrowanie danych za pomocą powiązań modelu i formularzy internetowych

Artykuł
07/13/2023

W tej serii samouczków przedstawiono podstawowe aspekty używania powiązania modelu z projektem ASP.NET Web Forms. Powiązanie modelu sprawia, że interakcja danych jest bardziej prosta niż obsługa obiektów źródła danych (takich jak ObjectDataSource lub SqlDataSource). Ta seria rozpoczyna się od materiałów wprowadzających i przechodzi do bardziej zaawansowanych pojęć w kolejnych samouczkach.

W tym samouczku pokazano, jak dodać sortowanie, stronicowanie i filtrowanie danych za pomocą powiązania modelu.

Ten samouczek jest oparty na projekcie utworzonym w pierwszej części serii.

Kompletny projekt można pobrać w języku C# lub VB. Kod do pobrania współdziała z programem Visual Studio 2012 lub Visual Studio 2013. Używa szablonu programu Visual Studio 2012, który jest nieco inny niż szablon Visual Studio 2013 przedstawiony w tym samouczku.

Co będziesz kompilować

W tym samouczku wykonasz następujące elementy:

Włączanie sortowania i stronicowania danych
Włącz filtrowanie danych na podstawie wyboru przez użytkownika

Dodawanie sortowania

Włączanie sortowania w siatceView jest bardzo proste. W pliku Student.aspx po prostu ustaw wartość AllowSorting na true w siatce GridView. Nie trzeba ustawiać wartości SortExpression dla każdej kolumny, ponieważ pole danych jest używane automatycznie. Kontrolka GridView modyfikuje zapytanie w celu uwzględnienia kolejności danych według wybranej wartości. Wyróżniony kod poniżej pokazuje dodanie potrzebne do włączenia sortowania.

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

Uruchom aplikację internetową i przetestuj sortowanie rekordów uczniów według wartości w różnych kolumnach.

sortuj uczniów

Dodawanie stronicowania

Włączenie stronicowania jest również bardzo proste. W elementy GridView ustaw właściwość AllowPaging na wartość true i ustaw właściwość PageSize na liczbę rekordów, które mają być wyświetlane na każdej stronie. W tym samouczku można ustawić wartość 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">

Uruchom aplikację internetową i zwróć uwagę, że rekordy są teraz podzielone na wiele stron z nie więcej niż 4 rekordami wyświetlanymi na jednej stronie.

dodawanie stronicowania

Odroczone wykonywanie zapytań zwiększa wydajność aplikacji. Zamiast pobierać cały zestaw danych, kontrolka GridView modyfikuje zapytanie, aby pobrać tylko rekordy dla bieżącej strony.

Filtrowanie rekordów według wyboru użytkownika

Powiązanie modelu dodaje kilka atrybutów, które umożliwiają wyznaczenie sposobu ustawiania wartości parametru w metodzie powiązania modelu. Te atrybuty znajdują się w przestrzeni nazw System.Web.ModelBinding . Obejmują one:

Kontrola
Cookie
Formularz
Profil
QueryString
Routedata
Sesja
UserProfile
Viewstate

W tym samouczku użyjesz wartości kontrolki do filtrowania rekordów wyświetlanych w kontrolce GridView. Do utworzonej wcześniej metody zapytania zostanie dodany atrybut Control . W późniejszym samouczku zastosujesz atrybut QueryString do parametru, aby określić, że wartość parametru pochodzi z wartości ciągu zapytania.

Najpierw powyżej listy validationSummary dodaj listę rozwijaną służącą do filtrowania wyświetlanych uczniów.

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

W pliku za kodem zmodyfikuj metodę select, aby otrzymać wartość z kontrolki, i ustaw nazwę parametru na nazwę kontrolki, która dostarcza wartość.

Aby rozpoznać atrybut Control, należy dodać instrukcję using dla przestrzeni nazw System.Web.ModelBinding .

using System.Web.ModelBinding;

Poniższy kod przedstawia metodę select, która została ponownie przepracowana, aby filtrować zwracane dane na podstawie wartości listy rozwijanej. Dodanie atrybutu kontrolki przed parametrem określa, że wartość tego parametru pochodzi z kontrolki o tej samej nazwie.

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

Uruchom aplikację internetową i wybierz inne wartości z listy rozwijanej, aby filtrować listę uczniów.

filtruj uczniów

Podsumowanie

W tym samouczku włączono sortowanie i stronicowanie danych. Włączono również filtrowanie danych według wartości kontrolki.

W następnym samouczku ulepszysz interfejs użytkownika, integrując widżet interfejsu użytkownika JQuery z dynamicznym szablonem danych.

Wstecz Dalej