Udostępnij za pośrednictwem


Stronicowanie i sortowanie danych raportu (C#)

Autor : Scott Mitchell

Pobierz plik PDF

Stronicowanie i sortowanie to dwie bardzo typowe funkcje podczas wyświetlania danych w aplikacji online. W tym samouczku zajmiemy się dodawaniem sortowania i stronicowania do naszych raportów, na czym będziemy dalej rozwijać w przyszłych samouczkach.

Wprowadzenie

Stronicowanie i sortowanie to dwie bardzo typowe funkcje podczas wyświetlania danych w aplikacji online. Na przykład podczas wyszukiwania ASP.NET książek w księgarni online mogą istnieć setki takich książek, ale raport zawierający listę wyników wyszukiwania zawiera tylko dziesięć dopasowań na stronę. Ponadto wyniki można sortować według tytułu, ceny, liczby stron, nazwy autora itd. Podczas gdy w ostatnich 23 samouczkach badaliśmy, jak tworzyć różne raporty, w tym interfejsy umożliwiające dodawanie, edytowanie i usuwanie danych, nie przyjrzeliśmy się, jak sortować dane, a jedyne przykłady stronicowania, które obserwowaliśmy, były z użyciem kontrolek DetailsView i FormView.

W tym poradniku dowiemy się, jak dodać sortowanie i stronicowanie do raportów, co można wykonać po prostu, zaznaczając kilka pól wyboru. Niestety, ta uproszczona implementacja ma swoje wady. Interfejs sortowania pozostawia nieco do życzenia, a procedury stronicowania nie są zaprojektowane do wydajnego przeglądania dużych zestawów wyników. Przyszłe samouczki będą badać, jak przezwyciężyć ograniczenia gotowych rozwiązań stronicowania i sortowania.

Krok 1. Dodawanie stron sieci Web samouczka stronicowania i sortowania

Przed rozpoczęciem tego samouczka najpierw pośmińmy chwilę na dodanie stron ASP.NET potrzebnych do tego samouczka i kolejnych trzech. Zacznij od utworzenia nowego folderu w projekcie o nazwie PagingAndSorting. Następnie dodaj do tego folderu następujące pięć ASP.NET stron, które zostały skonfigurowane do korzystania ze strony Site.masterwzorcowej:

  • Default.aspx
  • SimplePagingSorting.aspx
  • EfficientPaging.aspx
  • SortParameter.aspx
  • CustomSortingUI.aspx

Utwórz folder StronicowanieISortowanie i dodaj strony samouczka ASP.NET

Rysunek 1. Tworzenie folderu PagingAndSorting i dodawanie stron ASP.NET samouczka

Następnie otwórz Default.aspx stronę i przeciągnij kontrolkę SectionLevelTutorialListing.ascx użytkownika z UserControls folderu na powierzchnię Projekt. Ta kontrolka użytkownika utworzona w samouczku Strony wzorcowe i nawigacja w witrynie wylicza mapę witryny i wyświetla te samouczki w bieżącej sekcji na liście punktowanej.

Dodaj kontrolkę użytkownika SectionLevelTutorialListing.ascx do Default.aspx

Rysunek 2. Dodaj kontrolkę User Control SectionLevelTutorialListing.ascx do Default.aspx

Aby lista punktowana wyświetlała samouczki dotyczące stronicowania i sortowania, które utworzymy, musimy dodać je do mapy witryny. Otwórz plik Web.sitemap i dodaj następujący znacznik, umieszczając go po znaczniku modyfikacji węzła mapy witryny: Edytowanie, Wstawianie, Usuwanie.

<siteMapNode title="Paging and Sorting" url="~/PagingAndSorting/Default.aspx"
    description="Samples of Reports that Provide Paging and Sorting Capabilities">
    <siteMapNode url="~/PagingAndSorting/SimplePagingSorting.aspx"
        title="Simple Paging & Sorting Examples"
        description="Examines how to add simple paging and sorting support." />
    <siteMapNode url="~/PagingAndSorting/EfficientPaging.aspx"
        title="Efficiently Paging Through Large Result Sets"
        description="Learn how to efficiently page through large result sets." />
    <siteMapNode url="~/PagingAndSorting/SortParameter.aspx"
        title="Sorting Data at the BLL or DAL"
        description="Illustrates how to perform sorting logic in the Business Logic
        Layer or Data Access Layer." />
    <siteMapNode url="~/PagingAndSorting/CustomSortingUI.aspx"
        title="Customizing the Sorting User Interface"
        description="Learn how to customize and improve the sorting user interface." />
</siteMapNode>

Aktualizowanie mapy witryny w celu uwzględnienia nowych stron ASP.NET

Rysunek 3. Aktualizowanie mapy witryny w celu uwzględnienia nowych stron ASP.NET

Krok 2: Wyświetlanie informacji o produkcie w GridView

Zanim faktycznie zaimplementujemy możliwości stronicowania i sortowania, najpierw utwórzmy standardowy, niestronicowalny element GridView, który zawiera listę informacji o produkcie. Jest to zadanie, które wykonaliśmy wiele razy wcześniej w tej serii samouczków, więc te kroki powinny być znane. Zacznij od otwarcia SimplePagingSorting.aspx strony i przeciągnięcia kontrolki GridView z przybornika do projektanta, ustawiając jej ID właściwość na Products. Następnie utwórz nową klasę ObjectDataSource, która używa metody ProductsBLL klasy s GetProducts() , aby zwrócić wszystkie informacje o produkcie.

Pobieranie informacji o wszystkich produktach przy użyciu metody GetProducts()

Rysunek 4. Pobieranie informacji o wszystkich produktach przy użyciu metody GetProducts()

Ponieważ ten raport jest raportem tylko do odczytu, nie ma potrzeby mapowania metod ObjectDataSource s Insert(), Update()lub Delete() na odpowiednie ProductsBLL metody. Dlatego wybierz pozycję (Brak) z listy rozwijanej kart UPDATE, INSERT i DELETE.

Wybierz opcję (Brak) na liście Drop-Down na kartach UPDATE, INSERT i DELETE

Rysunek 5. Wybieranie opcji (Brak) na liście Drop-Down na kartach UPDATE, INSERT i DELETE

Następnie dostosujmy pola GridView, tak aby wyświetlane były tylko nazwy produktów, dostawców, kategorii, ceny i statusy wycofania. Ponadto, śmiało dokonaj wszelkich zmian w formatowaniu na poziomie pola, takich jak dostosowanie właściwości HeaderText lub formatowanie ceny w postaci waluty. Po dokonaniu tych zmian, deklaratywny markup kontrolki GridView powinien wyglądać podobnie do następującego:

<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

Rysunek 6 przedstawia postęp do tej pory po wyświetleniu za pośrednictwem przeglądarki. Strona zawiera listę wszystkich produktów na jednym ekranie, pokazując nazwę, kategorię, dostawcę, cenę i stan wycofania każdego produktu.

Każdy z produktów znajduje się na liście

Rysunek 6. Wszystkie produkty są wyświetlane (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 3: Dodaj obsługę stronicowania

Wyświetlenie listy wszystkich produktów na jednym ekranie może prowadzić do przeciążenia informacji dla użytkownika przeglądającego dane. Aby ułatwić zarządzanie wynikami, możemy podzielić dane na mniejsze strony danych i umożliwić użytkownikowi przechodzenie przez dane po jednej stronie naraz. ** Aby to zrobić, wystarczy zaznaczyć pole wyboru Włącz stronicowanie w inteligentnym tagu GridView (powoduje to ustawienie właściwości GridView AllowPaging na true).

Zaznacz pole wyboru Włącz stronicowanie, aby dodać obsługę stronicowania

Rysunek 7. Zaznacz pole wyboru Włącz stronicowanie, aby dodać obsługę stronicowania (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Włączenie stronicowania ogranicza liczbę rekordów wyświetlanych na stronie i dodaje interfejs stronicowania do kontrolki GridView. Domyślny interfejs stronicowania, pokazany na rysunku 7, to seria numerów stron, umożliwiając użytkownikowi szybkie przechodzenie z jednej strony danych do innej. Ten interfejs stronicowania powinien wyglądać znajomo, jak widzieliśmy podczas dodawania obsługi stronicowania do kontrolek DetailsView i FormView w poprzednich samouczkach.

Kontrolki DetailsView i FormView pokazują tylko jeden rekord na stronę. Obiekt GridView sprawdza jednak jego PageSize właściwość , aby określić liczbę rekordów do wyświetlenia na stronę (ta właściwość jest domyślnie ustawiona na wartość 10).

Ten interfejs stronicowania GridView, DetailsView i FormView można dostosować przy użyciu następujących właściwości:

  • PagerStyle wskazuje informacje o stylu dla interfejsu stronicowania; może określać ustawienia, takie jak BackColor, ForeColor, CssClass, HorizontalAligni tak dalej.

  • PagerSettings zawiera szereg właściwości, które mogą dostosować funkcjonalność interfejsu stronicowania; PageButtonCount wskazuje maksymalną liczbę numerów stron wyświetlanych w interfejsie stronicowania (wartość domyślna to 10); właściwość Mode wskazuje sposób działania interfejsu stronicowania i można ustawić na:

    • NextPrevious wyświetla przyciski Dalej i Poprzednie, dzięki czemu użytkownik może przejść do przodu lub do tyłu jedną stronę naraz
    • NextPreviousFirstLast Oprócz przycisków Dalej i Poprzedni, dostępne są również przyciski Pierwsze i Ostatnie, dzięki czemu użytkownik może szybko przejść do pierwszej lub ostatniej strony danych
    • Numeric wyświetla serię numerów stron, co umożliwia użytkownikowi natychmiastowe przejście do dowolnej strony
    • NumericFirstLast oprócz numerów stron zawiera przyciski Pierwsze i Ostatnie, dzięki czemu użytkownik może szybko przejść do pierwszej lub ostatniej strony danych; Przyciski Pierwsze/Ostatnie są wyświetlane tylko wtedy, gdy nie można dopasować wszystkich liczbowych numerów stron

Ponadto kontrolki GridView, DetailsView i FormView oferują PageIndex oraz PageCount jako właściwości, które wskazują wyświetloną bieżącą stronę oraz łączną liczbę stron danych. Właściwość PageIndex jest indeksowana od 0, co oznacza, że podczas wyświetlania pierwszej strony danych PageIndex będzie równa 0. PageCount z drugiej strony, zaczyna liczyć od 1, co oznacza, że PageIndex jest ograniczone do wartości z zakresu od 0 do PageCount - 1.

Zróbmy sobie chwilę, aby poprawić domyślny wygląd interfejsu stronicowania GridView. Pl-PL: W szczególności interfejs stronicowania powinien być wyjustowany do prawej, na jasnoszarym tle. Zamiast ustawiać te właściwości bezpośrednio za pośrednictwem właściwości GridView PagerStyle , utwórzmy klasę CSS o Styles.css nazwie PagerRowStyle , a następnie przypiszmy PagerStyle właściwość s CssClass za pomocą naszego motywu. Zacznij od otwarcia Styles.css i dodania następującej definicji klasy CSS:

.PagerRowStyle
{
    background-color: #ddd;
    text-align: right;
}

Następnie otwórz plik GridView.skin w folderze DataWebControls w folderze App_Themes. Jak omówiono w samouczku Strony wzorcowe i Nawigacja po witrynie, skórki mogą służyć do określania domyślnych wartości właściwości dla kontrolki webowej. W związku z tym rozszerz istniejące ustawienia, aby uwzględnić ustawienie PagerStyle właściwości s CssClass na PagerRowStyle. Skonfigurujmy również interfejs stronicowania, aby wyświetlał maksymalnie pięć numerycznych przycisków stron, korzystając z interfejsu NumericFirstLast stronicowania.

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
   <PagerStyle CssClass="PagerRowStyle" />
   <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

Doświadczenie użytkownika stronicowania

Rysunek 8 przedstawia stronę internetową przy odwiedzeniu w przeglądarce po zaznaczeniu pola wyboru Włącz stronicowanie kontrolki GridView, a PagerStyle i PagerSettings konfiguracje zostały wykonane za pośrednictwem pliku GridView.skin. Zwróć uwagę, że pokazano tylko dziesięć rekordów, a interfejs stronicowania wskazuje, że wyświetlamy pierwszą stronę danych.

Po włączeniu stronicowania wyświetlana jest tylko część rekordów

Rysunek 8: Po włączeniu stronicowania wyświetlany jest tylko podzbiór rekordów na raz (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Gdy użytkownik kliknie jeden z numerów stron w interfejsie stronicowania, następuje postback i ponowne załadowanie strony, które wyświetla żądane rekordy. Rysunek 9 przedstawia wyniki po wybraniu opcji wyświetlenia ostatniej strony danych. Zwróć uwagę, że ostatnia strona ma tylko jeden rekord; Jest to spowodowane tym, że w sumie istnieje 81 rekordów, co daje osiem stron 10 rekordów na stronę oraz jedną stronę z samotnym rekordem.

Kliknięcie numeru strony powoduje odświeżenie i wyświetlenie odpowiedniego podzestawu rekordów

Rysunek 9: Kliknięcie numeru strony powoduje odświeżenie strony i pokazanie odpowiedniego podzbioru rekordów (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Przepływ pracy Server-Side stronicowania

Gdy użytkownik końcowy kliknie przycisk w interfejsie stronicowania, zostanie wyświetlony komunikat zwrotny i rozpoczyna się następujący przepływ pracy po stronie serwera:

  1. Zdarzenie GridView (lub DetailsView lub FormView) PageIndexChanging jest uruchamiane
  2. Obiekt ObjectDataSource ponownie żąda wszystkich danych z poziomu BLL; Wartości właściwości PageIndex i PageSize są używane do określenia, które rekordy zwrócone z BLL muszą być wyświetlane w GridView.
  3. Zdarzenie GridView zostaje PageIndexChanged wywołane

W kroku 2 obiekt ObjectDataSource ponownie żąda wszystkich danych ze źródła danych. Ten styl stronicowania jest często określany jako domyślne stronicowanie, ponieważ jest to zachowanie stronicowania używane domyślnie podczas ustawiania AllowPaging właściwości na true. Za pomocą domyślnego stronicowania kontrolka internetowa danych nieefektywnie pobiera wszystkie rekordy dla każdej strony danych, mimo że tylko podzbiór rekordów jest faktycznie renderowany w kodzie HTML wysyłanym do przeglądarki. O ile dane bazy danych nie są buforowane przez usługę BLL lub ObjectDataSource, domyślne stronicowanie jest niedostępne dla wystarczająco dużych zestawów wyników lub aplikacji internetowych z wieloma współbieżnymi użytkownikami.

W kolejnym samouczku sprawdzimy, jak zaimplementować niestandardowe stronicowanie. Za pomocą niestandardowego stronicowania można w szczególności poinstruować obiekt ObjectDataSource, aby pobrać tylko dokładny zestaw rekordów potrzebnych dla żądanej strony danych. Jak można sobie wyobrazić, niestandardowe stronicowanie znacznie poprawia wydajność przeglądania dużych zestawów wyników.

Uwaga / Notatka

Chociaż domyślne stronicowanie nie jest odpowiednie podczas stronicowania za pośrednictwem wystarczająco dużych zestawów wyników lub witryn z wieloma równoczesnymi użytkownikami, należy pamiętać, że stronicowanie niestandardowe wymaga większej liczby zmian i nakładu pracy w celu zaimplementowania i nie jest tak proste, jak sprawdzanie pola wyboru (jak domyślne stronicowanie). W związku z tym stronicowanie domyślne może być idealnym wyborem dla małych witryn internetowych o małym natężeniu ruchu lub w przypadku stronicowania stosunkowo małych zestawów wyników, ponieważ jest ono znacznie łatwiejsze i szybsze do zaimplementowania.

Jeśli na przykład wiemy, że nigdy nie będziemy mieć więcej niż 100 produktów w naszej bazie danych, minimalny wzrost wydajności wynikający z użycia niestandardowego stronicowania jest prawdopodobnie zrekompensowany przez wysiłek wymagany do jej zaimplementowania. Jeśli jednak pewnego dnia możemy mieć tysiące lub dziesiątki tysięcy produktów, nie implementowanie niestandardowego stronicowania znacznie utrudni skalowalność naszej aplikacji.

Krok 4. Dostosowywanie środowiska stronicowania

Kontrolki danych w sieci Web oferują szereg właściwości, które mogą być użyte do ulepszenia doświadczenia stronicowania użytkownika. Właściwość PageCount , na przykład, wskazuje liczbę stron całkowitych, podczas gdy PageIndex właściwość wskazuje bieżącą stronę odwiedzaną i można ustawić, aby szybko przenieść użytkownika do określonej strony. Aby zilustrować sposób używania tych właściwości do ulepszania środowiska stronicowania użytkownika, dodajmy do strony kontrolkę etykiety, która informuje użytkownika, jaka strona jest aktualnie odwiedzana, wraz z kontrolką rozwijanej listy, która pozwala im szybko przejść do dowolnej strony.

Najpierw dodaj kontrolkę Etykieta sieci Web do strony, ustaw jej ID właściwość na PagingInformation, i wyczyść jej Text właściwość. Następnie utwórz procedurę obsługi dla zdarzenia GridView DataBound i dodaj następujący kod:

protected void Products_DataBound(object sender, EventArgs e)
{
    PagingInformation.Text = string.Format("You are viewing page {0} of {1}...",
        Products.PageIndex + 1, Products.PageCount);
}

Ta procedura obsługi zdarzeń przypisuje PagingInformation właściwość Etykieta Text do komunikatu informującego użytkownika o aktualnie odwiedzanej Products.PageIndex + 1 stronie z liczby stron Products.PageCount całkowitych (dodamy 1 do Products.PageIndex właściwości, ponieważ PageIndex jest indeksowana od 0). Wybrałem przypisanie tej etykiecie właściwości Text w procedurze obsługi zdarzeń DataBound zamiast w procedurze obsługi zdarzeń PageIndexChanged, ponieważ zdarzenie DataBound jest wywoływane za każdym razem, gdy dane są powiązane z elementem GridView, podczas gdy zdarzenie PageIndexChanged jest wywoływane tylko wtedy, gdy zmienia się indeks strony. Gdy element GridView jest początkowo powiązany z danymi przy pierwszej wizycie na stronie, zdarzenie PageIndexChanging nie jest uruchamiane (podczas gdy zdarzenie DataBound jest).

Po dodaniu użytkownik jest teraz wyświetlany komunikat wskazujący, jaką stronę odwiedza, oraz liczbę wszystkich stron danych.

Wyświetlana jest bieżąca liczba stron i łączna liczba stron

Rysunek 10. Wyświetlana jest bieżąca liczba stron i łączna liczba stron (kliknij, aby wyświetlić obraz pełnowymiarowy)

Oprócz kontrolki Label dodajmy również kontrolkę DropDownList, która zawiera numery stron w kontrolce GridView, z wybraną obecnie oglądaną stroną. Chodzi o to, że użytkownik może szybko przejść z bieżącej strony do innej, po prostu wybierając nowy numer strony z listy rozwijanej. Zacznij od dodania listy rozwijanej do Projektanta, ustaw jej ID właściwość na PageList i sprawdź opcję Włącz autopostback w jego inteligentnym tagu.

Następnie wróć do procedury obsługi zdarzeń DataBound i dodaj następujący kod:

// Clear out all of the items in the DropDownList
PageList.Items.Clear();
// Add a ListItem for each page
for (int i = 0; i < Products.PageCount; i++)
{
    // Add the new ListItem
    ListItem pageListItem = new ListItem(string.Concat("Page ", i + 1), i.ToString());
    PageList.Items.Add(pageListItem);
    // select the current item, if needed
    if (i == Products.PageIndex)
        pageListItem.Selected = true;
}

Ten kod rozpoczyna się od wyczyszczenia elementów na liście rozwijanej PageList . Może to wydawać się zbędne, ponieważ nie spodziewa się zmiany liczby stron, ale inni użytkownicy mogą używać systemu jednocześnie, dodając lub usuwając rekordy z Products tabeli. Takie wstawiania lub usuwania mogą zmienić liczbę stron danych.

Następnie musimy ponownie utworzyć numery stron i mieć tę, która jest domyślnie mapowany na bieżący widok GridView PageIndex . Osiągamy to za pomocą pętli od 0 do PageCount - 1, dodając nowy ListItem w każdej iteracji i ustawiając jego właściwość Selected na true, jeśli bieżący indeks iteracji jest równy właściwości PageIndex elementu GridView.

Na koniec musimy utworzyć procedurę obsługi zdarzeń dla zdarzenia DropDownList SelectedIndexChanged , które jest uruchamiane za każdym razem, gdy użytkownik wybierze inny element z listy. Aby utworzyć tę procedurę obsługi zdarzeń, po prostu kliknij dwukrotnie listę DropDownList w projektancie, a następnie dodaj następujący kod:

protected void PageList_SelectedIndexChanged(object sender, EventArgs e)
{
    // Jump to the specified page
    Products.PageIndex = Convert.ToInt32(PageList.SelectedValue);
}

Jak pokazano na rysunku 11, zmiana właściwości kontrolki PageIndex GridView powoduje, że dane zostaną ponownie przypięte do kontrolki GridView. W procedurze obsługi zdarzeń DataBound GridView jest wybrana odpowiednia lista rozwijana ListItem.

Użytkownik jest automatycznie pobierany do szóstej strony podczas wybierania elementu listy Drop-Down Strony 6

Rysunek 11. Użytkownik jest automatycznie pobierany do szóstej strony podczas wybierania elementu listy Drop-Down strony 6 (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 5. Dodawanie obsługi sortowania Bi-Directional

Dodanie obsługi sortowania dwukierunkowego jest tak proste, jak dodanie obsługi stronicowania po prostu zaznacz opcję Włącz sortowanie z tagu inteligentnego GridView (który ustawia właściwość GridView na AllowSortingtrue). Spowoduje to renderowanie każdego nagłówka pól kontrolki GridView jako elementu LinkButtons, które po kliknięciu powodują powrót i zwracają dane posortowane według klikniętej kolumny w kolejności rosnącej. Kliknięcie tego samego nagłówka LinkButton ponownie sortuje dane w kolejności malejącej.

Uwaga / Notatka

Jeśli używasz niestandardowej warstwy dostępu do danych, a nie typu zestawu danych, być może nie masz opcji Włącz sortowanie w tagu inteligentnym GridView. Dostępne są tylko kontrolki GridView powiązane ze źródłami danych, które natywnie obsługują sortowanie. Zestaw typed DataSet zapewnia wbudowaną obsługę sortowania, ponieważ ADO.NET DataTable udostępnia metodę Sort , która po wywołaniu sortuje zestaw DataRows tabeli DataTable przy użyciu określonych kryteriów.

Jeśli DAL nie zwraca obiektów, które natywnie obsługują sortowanie, należy skonfigurować ObjectDataSource, aby przekazać informacje o sortowaniu do warstwy logiki biznesowej, która może sortować dane lub zlecić ich sortowanie do DAL. W przyszłym samouczku dowiesz się, jak sortować dane w warstwach logiki biznesowej i dostępu do danych.

Sortujące przyciski LinkButtons są renderowane jako hiperlinki HTML, których bieżące kolory (niebieski dla nieodwiedzonego linku i ciemnoczerwony dla odwiedzonego linku) gryzą się z kolorem tła wiersza nagłówka. Zamiast tego, niech wszystkie linki wiersza nagłówka będą wyświetlane w kolorze białym, niezależnie od tego, czy zostały odwiedzone, czy nie. Można to zrobić, dodając następujący kod do Styles.css klasy:

.HeaderStyle a, .HeaderStyle a:visited
{
    color: White;
}

Ta składnia wskazuje, że podczas wyświetlania tych hiperlinków w elemecie używającym klasy HeaderStyle jest używany biały tekst.

Po dodaniu tego pliku CSS podczas odwiedzania strony za pośrednictwem przeglądarki ekran powinien wyglądać podobnie do rysunku 12. W szczególności rysunek 12 przedstawia wyniki po kliknięciu linku nagłówka pola Cena.

Zrzut ekranu przedstawiający okno Proste stronicowanie i sortowanie zawierające wyniki posortowane według kolumny Cena w kolejności rosnącej.

Rysunek 12. Wyniki zostały posortowane według wartości UnitPrice w kolejności rosnącej (kliknij, aby wyświetlić obraz pełnowymiarowy)

Analiza procesu roboczego sortowania

Wszystkie pola GridView, takie jak BoundField, CheckBoxField, TemplateField itd., mają właściwość SortExpression, która wskazuje wyrażenie służące do sortowania danych po kliknięciu linku nagłówka sortowania tego pola. Obiekt GridView ma również właściwość SortExpression. Po kliknięciu nagłówka sortowania LinkButton element GridView przypisuje wartość tego SortExpression pola do jego SortExpression właściwości. Następnie dane są ponownie pobierane z obiektu ObjectDataSource i sortowane zgodnie z właściwością SortExpression GridView. Poniższa lista szczegółowo opisuje sekwencję kroków, które są wykonywane, gdy użytkownik końcowy sortuje dane w GridView:

  1. Zdarzenie sortowania kontrolki GridView jest uruchamiane
  2. Właściwość GridView SortExpression jest ustawiona na SortExpression pole, którego nagłówek sortowania LinkButton został kliknięty
  3. Obiekt ObjectDataSource ponownie pobiera wszystkie dane z biblioteki BLL, a następnie sortuje dane przy użyciu kontrolki GridView s SortExpression
  4. Właściwość GridView jest PageIndex resetowana do wartości 0, co oznacza, że podczas sortowania użytkownik zostaje przeniesiony na pierwszą stronę z danymi, zakładając, że obsługa stronicowania została zaimplementowana.
  5. Zdarzenie GridView jest Sorted uruchamiane

Podobnie jak w przypadku domyślnego stronicowania, domyślna opcja sortowania ponownie pobiera wszystkie rekordy z BLL. W przypadku korzystania z sortowania bez stronicowania lub sortowania z domyślnym stronicowaniem nie ma możliwości obejścia tego spadku wydajności, chyba że zastosuje się buforowanie danych z bazy danych. Jednak jak zobaczymy w przyszłym samouczku, można efektywnie sortować dane podczas korzystania z niestandardowego stronicowania.

Po powiązaniu obiektu ObjectDataSource z kontrolką GridView za pośrednictwem listy rozwijanej w tagu inteligentnym GridView każde pole GridView automatycznie ma przypisaną SortExpression właściwość do nazwy pola danych w ProductsRow klasie. Na przykład ProductName właściwość BoundField s SortExpression jest ustawiona na ProductNamewartość , jak pokazano w następującym znaczniku deklaratywnego:

<asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />

Pole można skonfigurować tak, aby nie można było sortować, usuwając jego SortExpression właściwość (przypisując je do pustego ciągu). Aby to zilustrować, wyobraź sobie, że nie chcemy, aby nasi klienci sortować nasze produkty według ceny. UnitPrice Właściwość BoundField SortExpression można usunąć z tagu deklaratywnego lub za pośrednictwem okna dialogowego Pola (dostępnego, klikając link Edytuj kolumny w tagu inteligentnym GridView).

Zrzut ekranu okna Pola z wyróżnionymi wartościami Price (Cena) i SortExpression.

Rysunek 13. Wyniki zostały posortowane według wartości UnitPrice w kolejności rosnącej

Po usunięciu właściwości SortExpression dla elementu UnitPrice BoundField, nagłówek jest renderowany jako tekst zamiast jako link, co uniemożliwia użytkownikom sortowanie danych według ceny.

Usuwając właściwość SortExpression, użytkownicy nie mogą już sortować produktów według ceny

Rysunek 14. Usunięcie właściwości SortExpression powoduje, że użytkownicy nie mogą już sortować produktów według ceny (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Programatyczne sortowanie elementu GridView

Zawartość kontrolki GridView można również sortować programowo przy użyciu metody GridViewSort. Po prostu przekaż wartość do sortowania SortExpression wraz z wartością SortDirection (Ascending lub Descending), a dane kontrolki GridView zostaną ponownie posortowane.

Wyobraź sobie, że powodem, dla którego wyłączyliśmy sortowanie UnitPrice, było to, że martwiliśmy się, iż nasi klienci będą kupować jedynie produkty o najniższej cenie. Chcemy jednak zachęcić ich do zakupu najdroższych produktów, więc chcielibyśmy, aby mogli sortować produkty według ceny, ale tylko od najdroższej ceny do najmniejszej.

Aby to osiągnąć, dodaj kontrolkę przycisku Web do strony, ustaw jej właściwość ID na SortPriceDescending, a jej właściwość Text na Sortuj według ceny. Następnie utwórz procedurę obsługi zdarzeń dla zdarzenia Przycisk Click , klikając dwukrotnie kontrolkę Przycisk w Projektancie. Dodaj następujący kod do tego programu obsługi zdarzeń:

protected void SortPriceDescending_Click(object sender, EventArgs e)
{
    // Sort by UnitPrice in descending order
    Products.Sort("UnitPrice", SortDirection.Descending);
}

Kliknięcie tego przycisku zwraca użytkownika do pierwszej strony z produktami posortowanych według ceny od najdroższej do najtańszej (zobacz Rysunek 15).

Kliknięcie przycisku Zamawia produkty z najdroższych do najmniejszych

Rysunek 15. Kliknięcie przycisku Orders the Products From the Most Expensive to the Least (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Podsumowanie

W tym samouczku pokazano, jak zaimplementować domyślne możliwości stronicowania i sortowania, które były tak proste jak zaznaczenie pola wyboru! Gdy użytkownik sortuje lub przegląda dane, podobny przepływ pracy rozwija się:

  1. Następuje zwrotne przesłanie danych
  2. Zdarzenie wstępnego poziomu kontroli danych sieci Web jest uruchamiane (PageIndexChanging lub Sorting)
  3. Wszystkie dane są ponownie pobierane przez obiekt ObjectDataSource
  4. Zdarzenie po poziomie kontroli danych sieci Web jest wyzwalane (PageIndexChanged lub Sorted)

Aby wdrożyć podstawowe stronicowanie i sortowanie nie wymaga dużego wysiłku, lecz aby skorzystać z bardziej wydajnego niestandardowego stronicowania lub jeszcze bardziej ulepszyć interfejs stronicowania czy sortowania, trzeba włożyć więcej pracy. W przyszłych samouczkach zostaną omówione te tematy.

Szczęśliwe programowanie!

Informacje o autorze

Scott Mitchell, autor siedmiu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 2.0 w ciągu 24 godzin. Można go uzyskać pod adresem mitchell@4GuysFromRolla.com.