Sortowanie, stronicowanie i filtrowanie danych za pomocą powiązania modelu i formularzy sieci Web

Autor FitzMacken

Ta seria samouczków pokazuje podstawowe aspekty używania powiązania modelu z projektem formularzy sieci Web ASP.NET. Powiązanie modelu sprawia, że interakcje danych są bardziej proste, niż w przypadku obiektów źródła danych (np. ObjectDataSource lub kontrolki SqlDataSource). Ta seria rozpoczyna się od materiału wstępnego i przenosi do bardziej zaawansowanych koncepcji 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.

Możesz pobrać kompletny projekt w C# języku 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 przedstawiono następujące instrukcje:

  1. Włącz sortowanie i stronicowanie danych
  2. Włącz filtrowanie danych na podstawie wyboru przez użytkownika

Dodaj sortowanie

Włączenie sortowania w widoku GridView jest bardzo proste. W pliku student. aspx po prostu ustaw AllowSorting na true w widoku GridView. Nie trzeba ustawiać wartości 'sortexpression dla każdej kolumny, ponieważ pole DataField jest automatycznie używane. Widok GridView modyfikuje zapytanie, aby uwzględnić porządkowanie danych według wybranej wartości. Wyróżniony kod poniżej pokazuje dodanie, które należy wykonać, aby włączyć sortowanie.

<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ę sieci Web i przetestuj sortowanie rekordów uczniów według wartości w różnych kolumnach.

Sortuj uczniów

Dodaj stronicowanie

Włączenie stronicowania jest również bardzo proste. W widoku GridView ustaw właściwość 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ę sieci Web i zwróć uwagę, że teraz rekordy są podzielone na wiele stron, które nie mają więcej niż 4 rekordów wyświetlanych na jednej stronie.

Dodaj stronicowanie

Opóźnione wykonywanie zapytań poprawia wydajność aplikacji. Zamiast pobierać cały zestaw danych, GridView modyfikuje zapytanie w celu pobrania tylko rekordów dla bieżącej strony.

Filtruj rekordy według wyboru użytkownika

Powiązanie modelu dodaje kilka atrybutów, które umożliwiają określenie sposobu ustawiania wartości parametru w metodzie powiązania modelu. Te atrybuty znajdują się w przestrzeni nazw System. Web. ModelBinding . Dostępne są następujące ustawienia:

  • Kontrolka
  • Plik cookie
  • Formularz
  • Profil
  • Ciąg zapytania
  • RouteData
  • Sesja
  • UserProfile
  • Stan widoku

W tym samouczku zostanie użyta wartość kontrolki do filtrowania, które rekordy są wyświetlane w widoku GridView. Dodasz atrybut Control do utworzonej wcześniej metody zapytania. W kolejnym samouczku zastosujesz atrybut QueryString do parametru, aby określić, że wartość parametru pochodzi z wartości ciągu zapytania.

Najpierw, powyżej podsumowania walidacji, dodać listę rozwijaną umożliwiającą filtrowanie, które studenci są pokazywane.

<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 związanym z kodem zmodyfikuj metodę select, aby otrzymać wartość z kontrolki, i Ustaw nazwę parametru na nazwę kontrolki, która zawiera wartość.

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

using System.Web.ModelBinding;

Poniższy kod pokazuje, że metoda SELECT została przeprowadzona ponownie w celu filtrowania zwracanych danych 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ę sieci Web i wybierz różne wartości z listy rozwijanej, aby przefiltrować listę studentów.

Filtruj uczniów

Podsumowanie

W tym samouczku włączono sortowanie i stronicowanie danych. Można również włączyć filtrowanie danych przez wartość kontrolki.

W następnym samouczku zostanie wzbogacenie interfejsu użytkownika przez integrację WIDŻETU interfejsu użytkownika jQuery z szablonem danych dynamicznych.