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 zaczyna 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 pozwalając użytkownikowi wybrać określoną kategorię i wyświetlić skojarzone produkty. 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 "główny" raportu głównego/szczegółowego 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, na które można zaimplementować raport główny/szczegółowy. W tym i w 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 zawiera listę kategorii i informacji o produkcie.

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

Nasz raport główny/szczegółowy zawiera listę kategorii w liście rozwijanej z produktami wybranego elementu listy wyświetlanymi dalej na stronie w elemencie GridView. Pierwsze zadanie przed nami polega na wyświetlaniu kategorii w liście rozwijanej. FilterByDropDownList.aspx Otwórz stronę w Filtering folderze, przeciągnij na listę rozwijaną 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śl źródło danych listy rozwijanej (kliknij, aby wyświetlić obraz pełnowymiarowy)

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

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

Rysunek 3. Wybierz opcję Użyj CategoriesBLL klasy (kliknij, aby wyświetlić obraz pełnowymiarowy)

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

Po skonfigurowaniu obiektu ObjectDataSource nadal musimy określić, jakie pole źródła danych powinno być wyświetlane na liście rozwijanej i które pole powinno być skojarzone jako wartość elementu listy. CategoryName Podaj pole 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 podczas przeglądania przeglądarki.

Rysunek 6. Drop-Down Listy bieżące kategorie (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 2. Dodawanie elementu GridView produktów

Ostatnim krokiem w naszym raporcie głównym/szczegółowym jest wyświetlenie listy produktów skojarzonych z wybraną kategorią. Aby to osiągnąć, 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. Wybierz metodę GetProductsByCategoryID(categoryID) (kliknij, aby wyświetlić obraz pełnowymiarowy)

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

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

Poświęć 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 elementu GridView musi wystąpić powrót. Aby to osiągnąć, mamy dwie opcje (z których żadna nie wymaga pisania kodu):

• Ustaw właściwość AutoPostBack listy rozwijanej listy rozwijanejna true. (Możesz to zrobić, sprawdzając opcję Włącz autopostback w tagu inteligentnym Listy rozwijanej). Spowoduje to wyzwolenie pozwu 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 rozwijanej, nastąpi powrót, a element GridView zostanie zaktualizowany o produkty dla nowo wybranej kategorii. (Jest to podejście używane w tym samouczku).
• Dodaj kontrolkę Sieć Web przycisku obok listy rozwijanej. Ustaw jej Text właściwość na Odśwież lub podobne. Dzięki temu podejściu użytkownik będzie musiał wybrać nową kategorię, a następnie kliknąć przycisk. Kliknięcie przycisku spowoduje powrót i zaktualizowanie elementu GridView, aby wyświetlić listę 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) automatycznie powoduje powrót, aktualizowanie 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 elemencie GridView. 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 Rozwijanej, 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 Rozwijanej:

<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ą Rozwijaną z obiektu ObjectDataSource, zastąpią wszystkie ręcznie dodane elementy listy, jeśli AppendDataBoundItems nie ma wartości True.

Rysunek 12. Ustaw AppendDataBoundItems właściwość na true

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

Rysunek 13. Na stronie początkowej nie są wyświetlane żadne produkty (kliknij, aby wyświetlić obraz pełnowymiarowy)

Powodem, dla którego nie są wyświetlane żadne produkty, ponieważ wybrano element listy "-- Wybierz kategorię --", jest to, że jego wartość jest -1 i nie ma żadnych produktów w bazie danych z wartością CategoryID-1. Jeśli jest to zachowanie, które chcesz zrobić, w tym momencie wszystko będzie gotowe! Jeśli jednak chcesz wyświetlić wszystkie kategorie po wybraniu elementu listy "-- Wybierz kategorię --", wróć do ProductsBLL klasy i dostosuj GetProductsByCategoryID(categoryID) metodę tak, aby wywołał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żywanego do wyświetlania wszystkich dostawców z powrotem w samouczku Parametry deklaratywne , chociaż w tym przykładzie używamy 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 wartości całkowitej przekazanej, podczas gdy w samouczku Parametry deklaratywne przekazujemy parametr wejściowy ciągu.

Rysunek 14 przedstawia zrzut ekranu przedstawiający FilterByDropDownList.aspx wybranie opcji "-- Wybierz kategorię --". W tym miejscu wszystkie produkty są domyślnie wyświetlane, 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 pomaga prezentować dane przy użyciu raportów master/detail, z których użytkownik może zacząć przeglądać dane w górnej części hierarchii i przechodzić do szczegółów. W tym samouczku przeanalizowaliśmy tworzenie prostego raportu głównego/szczegółowego przedstawiającego produkty wybranej kategorii. Zostało to osiągnięte przy użyciu listy rozwijanej dla listy kategorii i elementu GridView dla produktów należących do wybranej kategorii.

W następnym samouczku użyjemy interfejsu DropDownList o jeden 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 ciągu 24 godzin. Można do niego dotrzeć pod adresem mitchell@4GuysFromRolla.com. Lub za pośrednictwem swojego bloga, który można znaleźć na stronie http://ScottOnWriting.NET.

Dalej