Filtrowanie wzorca/szczegółów za pomocą kontrolki DropDownList i kontrolki GridView (C#)

Autor: Scott Mitchell

Pobierz plik PDF

W tym samouczku zobaczymy, jak wyświetlić rekordy główne w kontrolce DropDownList i szczegóły wybranego elementu listy w kontrolce GridView.

Wprowadzenie

Typowym typem raportu jest raport główny/szczegółowy, w którym raport rozpoczyna się od wyświetlenia zestawu rekordów "master". Użytkownik może następnie przejść do szczegółów jednego z rekordów głównych, wyświetlając w ten sposób "szczegóły" tego rekordu głównego. Raporty wzorca/szczegółów są idealnym wyborem do wizualizacji relacji jeden do wielu, takich jak raport przedstawiający wszystkie kategorie, a następnie umożliwienie użytkownikowi wybrania określonej kategorii i wyświetlenia skojarzonych produktów. Ponadto raporty główne/szczegółowe są przydatne do wyświetlania szczegółowych informacji z szczególnie "szerokich" tabel (zawierających wiele kolumn). Na przykład poziom "master" raportu głównego/szczegółów może zawierać tylko nazwę produktu i cenę jednostkową produktów w bazie danych, a przechodzenie do szczegółów określonego produktu spowoduje wyświetlenie dodatkowych pól produktu (kategoria, dostawca, ilość na jednostkę itd.).

Istnieje wiele sposobów implementacji raportu głównego/szczegółowego. W tym i kolejnych trzech samouczkach przyjrzymy się różnym raportom głównym/szczegółowym. W tym samouczku zobaczymy, jak wyświetlić rekordy główne w kontrolce DropDownList i szczegóły wybranego elementu listy w kontrolce GridView. W szczególności raport główny/szczegółowy tego samouczka będzie zawierać listę kategorii i informacji o produkcie.

Krok 1. Wyświetlanie kategorii na liście rozwijanej

Nasz raport główny/szczegółowy będzie zawierać listę kategorii w tabeli DropDownList z produktami wybranego elementu listy wyświetlanymi dalej na stronie w elementy GridView. Przed nami pierwsze zadanie polega na wyświetlaniu kategorii w liście rozwijanej. FilterByDropDownList.aspx Otwórz stronę w folderzeFiltering, przeciągnij element DropDownList z przybornika do projektanta strony i ustaw jej ID właściwość na Categories. Następnie kliknij link Wybierz źródło danych z tagu inteligentnego Listy rozwijanej. Spowoduje to wyświetlenie Kreatora konfiguracji źródła danych.

Rysunek 1. Określanie źródła danych listy rozwijanej (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Wybierz, aby dodać nowy obiekt ObjectDataSource o nazwie CategoriesDataSource , który wywołuje CategoriesBLL metodę GetCategories() klasy.

Rysunek 2. Dodawanie nowego obiektuDataSource o nazwie CategoriesDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 3. Wybieranie opcji Użycia CategoriesBLL klasy (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rysunek 4. Konfigurowanie obiektu ObjectDataSource do użycia GetCategories() metody (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Po skonfigurowaniu obiektu ObjectDataSource nadal musimy określić, jakie pole źródła danych powinno być wyświetlane w elemencie DropDownList i które należy skojarzyć jako wartość elementu listy. Pole ma CategoryName jako wyświetlane i CategoryID jako wartość dla każdego elementu listy.

Rysunek 5. Wyświetl pole Listy rozwijanej CategoryName i Użyj CategoryID jako wartości (kliknij, aby wyświetlić obraz pełnowymiarowy)

W tym momencie mamy kontrolkę DropDownList wypełniona rekordami z Categories tabeli (wszystkie wykonane w ciągu około sześciu sekund). Rysunek 6 przedstawia postęp do tej pory po wyświetleniu za pośrednictwem przeglądarki.

Rysunek 6. Lista rozwijana wyświetla bieżące kategorie (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 2. Dodawanie kontrolki GridView produktów

Ostatnim krokiem w naszym raporcie głównym/szczegółowym jest wyświetlenie listy produktów skojarzonych z wybraną kategorią. Aby to zrobić, dodaj element GridView do strony i utwórz nowy obiekt ObjectDataSource o nazwie productsDataSource. Kontrolka productsDataSource przytula dane z ProductsBLL metody klasy GetProductsByCategoryID(categoryID) .

Rysunek 7. Wybieranie GetProductsByCategoryID(categoryID) metody (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po wybraniu tej metody kreator ObjectDataSource wyświetli monit o podanie wartości parametru categoryID metody. Aby użyć wartości wybranego categories elementu DropDownList ustaw wartość Źródło parametru na Control i ControlID na Categorieswartość .

Rysunek 8. Ustaw categoryID parametr na wartość listy rozwijanej Categories (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Pośmiń chwilę, aby sprawdzić postęp w przeglądarce. Podczas pierwszej wizyty na stronie te produkty należą do wybranej kategorii (napoje) są wyświetlane (jak pokazano na rysunku 9), ale zmiana listy Rozwijanej Nie aktualizuje danych. Jest to spowodowane tym, że w celu zaktualizowania obiektu GridView musi wystąpić powrót. Aby to osiągnąć, mamy dwie opcje (żadna z nich nie wymaga pisania kodu):

• Ustaw właściwośćAutoPostBack listy rozwijanejna true. (Można to zrobić, zaznaczając opcję Włącz autopostback w tagu inteligentnym Listy rozwijanej). Spowoduje to wyzwolenie ogłaszania zwrotnego za każdym razem, gdy wybrany element Listy rozwijanej zostanie zmieniony przez użytkownika. W związku z tym, gdy użytkownik wybierze nową kategorię z listy DropDownList, zostanie wyświetlony komunikat zwrotny, a element GridView zostanie zaktualizowany o produkty dla nowo wybranej kategorii. (Jest to podejście, które zostało użyte w tym samouczku).
• Dodaj kontrolkę Sieć Web przycisku obok listy Rozwijanej. Ustaw jej Text właściwość na Odśwież lub coś podobnego. W przypadku tego podejścia użytkownik musi wybrać nową kategorię, a następnie kliknąć przycisk. Kliknięcie przycisku spowoduje powrót i zaktualizowanie kontrolki GridView w celu wyświetlenia listy tych produktów z wybranej kategorii.

Ilustracje 9 i 10 ilustrują raport główny/szczegółowy w akcji.

Rysunek 9. Podczas pierwszej wizyty na stronie wyświetlane są produkty napojów (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rysunek 10. Wybranie nowego produktu (produkcji) powoduje automatyczne wywołanie postbacku, zaktualizowanie widoku GridView (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Dodawanie elementu listy "-- Wybierz kategorię --"

Podczas pierwszej wizyty na FilterByDropDownList.aspx stronie jest domyślnie wybierany pierwszy element listy kategorii DropDownList (Napoje), pokazując produkty napojów w siatce. Zamiast pokazywać produkty pierwszej kategorii, możemy zamiast tego wybrać element DropDownList, który mówi coś takiego: "-- Wybierz kategorię --".

Aby dodać nowy element listy do listy DropDownList, przejdź do okno Właściwości i kliknij wielokropek we Items właściwości . Dodaj nowy element listy z elementem Text "-- Wybierz kategorię --" i Value-1.

Rysunek 11. Dodawanie elementu - Wybierz kategorię - Element listy (kliknij, aby wyświetlić obraz pełnowymiarowy)

Alternatywnie możesz dodać element listy, dodając następujący znacznik do listy DropDownList:

<asp:DropDownList ID="categories" runat="server"
    AutoPostBack="True" DataSourceID="categoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"
    EnableViewState="False">
    <asp:ListItem Value="-1">
       -- Choose a Category --
    </asp:ListItem>
</asp:DropDownList>

Ponadto musimy ustawić dla kontrolki AppendDataBoundItems DropDownList wartość True, ponieważ gdy kategorie są powiązane z listą DropDownList z obiektu ObjectDataSource, zastąpią wszystkie ręcznie dodane elementy listy, jeśli AppendDataBoundItems nie ma wartości True.

Rysunek 12. Ustawienie AppendDataBoundItems właściwości na true

Po tych zmianach podczas pierwszej wizyty na stronie jest zaznaczona opcja "-- Wybierz kategorię --" i nie są wyświetlane żadne produkty.

Rysunek 13. Podczas początkowego ładowania strony nie są wyświetlane żadne produkty (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Powodem, dla którego nie są wyświetlane żadne produkty, gdy wybrano element listy "-- Wybierz kategorię --", jest to, że jego wartość jest -1 i nie ma produktów w bazie danych z wartością CategoryID-1. Jeśli jest to zachowanie, które chcesz zrobić, to w tym momencie wszystko jest gotowe! Jeśli jednak chcesz wyświetlić wszystkie kategorie po wybraniu elementu listy "-- Wybierz kategorię --", wróć do ProductsBLL klasy i dostosuj GetProductsByCategoryID(categoryID) metodę, aby wywołać GetProducts() metodę, jeśli przekazany categoryID parametr jest mniejszy niż zero:

public Northwind.ProductsDataTable GetProductsByCategoryID(int categoryID)
{
    if (categoryID < 0)
        return GetProducts();
    else
        return Adapter.GetProductsByCategoryID(categoryID);
}

Technika użyta w tym miejscu jest podobna do podejścia użytego do wyświetlenia wszystkich dostawców z powrotem w samouczku Parametrów deklaratywnych, chociaż w tym przykładzie użyto wartości -1 , aby wskazać, że wszystkie rekordy powinny być pobierane w przeciwieństwie do null. Jest to spowodowane tym, że categoryID parametr GetProductsByCategoryID(categoryID) metody oczekuje jako wartości całkowitej przekazanej, podczas gdy w samouczku Parametry deklaratywne przekazujemy parametr wejściowy ciągu.

Rysunek 14 przedstawia zrzut FilterByDropDownList.aspx ekranu przedstawiający wybranie opcji "-- Wybierz kategorię --". W tym miejscu wszystkie produkty są wyświetlane domyślnie, a użytkownik może zawęzić ekran, wybierając określoną kategorię.

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

Podsumowanie

Podczas wyświetlania danych związanych z hierarchią często ułatwia prezentowanie danych przy użyciu raportów wzorca/szczegółów, z których użytkownik może rozpocząć przeglądanie danych w górnej części hierarchii i przechodzenie do szczegółów. W tym samouczku przeanalizowaliśmy utworzenie prostego raportu głównego/szczegółowego przedstawiającego produkty wybranej kategorii. Zostało to wykonane przy użyciu listy RozwijanejList dla listy kategorii i GridView dla produktów należących do wybranej kategorii.

W następnym samouczku wykonamy interfejs DropDownList o krok dalej, używając dwóch list Rozwijanych.

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 24 godzinach. Można go uzyskać pod adresem mitchell@4GuysFromRolla.com.

Dalej