Filtrowanie rekordu głównego/szczegółów przy użyciu kontrolki DropDownList (C#)

przez Scott Mitchell

Pobierz przykładową aplikację lub Pobierz plik PDF

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

Wprowadzenie

Typowym typem raportu jest raport wzorzec/szczegóły, w którym raport rozpoczyna się od wyświetlania pewnego zestawu rekordów "Master". Następnie użytkownik może przejść do szczegółów jednego z rekordów głównych, co spowoduje wyświetlenie "szczegółów" tego rekordu głównego. Raporty wzorzec/szczegóły są idealnym wyborem w przypadku wizualizacji relacji jeden-do-wielu, takich jak raport pokazujący wszystkie kategorie, a następnie umożliwiający użytkownikowi wybranie określonej kategorii i wyświetlenie skojarzonych z nimi produktów. Ponadto raporty wzorzec/szczegóły są przydatne do wyświetlania szczegółowych informacji z szczególnie "szerokich" tabel (z wieloma kolumnami). Na przykład poziom "Master" w raporcie głównym/szczegółowym może zawierać tylko nazwę produktu i cenę jednostkową produktów w bazie danych, a przechodzenie do określonego produktu będzie zawierać dodatkowe pola produktu (kategorii, dostawcy, ilości na jednostkę itd.).

Istnieje wiele sposobów implementacji raportu wzorzec/szczegóły. W ten sposób i następne trzy samouczki będą wyglądały na różnych raportach głównych/szczegółowych. W tym samouczku zobaczymy, jak wyświetlać rekordy główne w kontrolce DropDownList oraz szczegóły wybranego elementu listy w widoku GridView. W szczególności Raport główny/szczegółowy tego samouczka zawiera listę informacji o kategorii i o produkcie.

Krok 1. Wyświetlanie kategorii w DropDownList

Nasz Raport główny/szczegółowy wyświetli listę kategorii w DropDownList, z których produkty wybranego elementu listy są wyświetlane w dalszej części strony w widoku GridView. Pierwsze zadanie przed nami, a następnie, ma mieć kategorie wyświetlane w DropDownList. Otwórz stronę FilterByDropDownList.aspx w folderze Filtering, przeciągnij na DropDownList z przybornika do projektanta strony i ustaw jej Właściwość ID na Categories. Następnie kliknij link wybierz źródło danych z tagu inteligentnego DropDownList. Spowoduje to wyświetlenie Kreatora konfiguracji źródła danych.

określić źródła danych DropDownList

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

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

dodać nowego elementu ObjectDataSource o nazwie CategoriesDataSource

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

wybrać użycie klasy CategoriesBLL

Rysunek 3. wybór użycia klasy CategoriesBLL (kliknij,Aby wyświetlić obraz w pełnym rozmiarze)

skonfigurować element ObjectDataSource do korzystania z metody GetCategories ()

Ilustracja 4. Konfigurowanie elementu ObjectDataSource do używania metody GetCategories() (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

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

wyświetlać DropDownList pole CategoryName i używać IDkategorii jako wartości

Rysunek 5. DropDownList wyświetlić pola CategoryName i użyj CategoryID jako wartości (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

W tym momencie mamy kontrolkę DropDownList, która jest wypełniana rekordami z tabeli Categories (wszystkie wykonane przez około 6 sekund). Rysunek 6 przedstawia postęp z tego względu, gdy jest wyświetlany za pomocą przeglądarki.

listy rozwijanej z bieżącymi kategoriami

Ilustracja 6. Lista rozwijana z bieżącymi kategoriami (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Krok 2. Dodawanie produktu GridView

Ostatnim krokiem w naszym raporcie głównym/szczegółowym jest wyświetlenie listy produktów skojarzonych z wybraną kategorią. Aby to osiągnąć, Dodaj widok GridView do strony i Utwórz nowy element ObjectDataSource o nazwie productsDataSource. productsDataSource kontrolują dane wycofane z metody GetProductsByCategoryID(categoryID) klasy ProductsBLL.

wybrać metodę GetProductsByCategoryID (IDKategorii)

Rysunek 7. wybierz metodę GetProductsByCategoryID(categoryID) (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Po wybraniu tej metody Kreator ObjectDataSource poprosi nas o wartość parametru categoryID metody. Aby użyć wartości wybranego categories elementu DropDownList Ustaw Źródło parametru na Control i ControlID, aby Categories.

ustawić dla parametru IDKategorii wartości kategorii DropDownList

Ilustracja 8. ustaw parametr categoryID na wartość Categories DropDownList (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Poświęć chwilę, aby zaewidencjonować nasz postęp w przeglądarce. Podczas pierwszego odwiedzania strony są wyświetlane te produkty należące do wybranej kategorii (napoje) (jak pokazano na rysunku 9), ale zmiana DropDownList nie aktualizuje danych. Wynika to z faktu, że w celu zaktualizowania widoku GridView musi wystąpić ogłoszenie zwrotne. Aby to osiągnąć, mamy dwie opcje (żadna z tych elementów nie wymaga pisania kodu):

  • UstawWłaściwość autoogłaszaniaDropDownList kategoriina wartość true. (Możesz to zrobić, zaznaczając opcję Włącz autoogłaszanie w tagu inteligentnym DropDownList). Spowoduje to wyzwolenie ogłaszania zwrotnego za każdym razem, gdy wybrany element DropDownList zostanie zmieniony przez użytkownika. W związku z tym, gdy użytkownik wybierze nową kategorię z DropDownList, nastąpi odświeżenie zwrotne, a widok GridView zostanie zaktualizowany o produkty dla nowo wybranej kategorii. (To jest podejście, które zostało użyte w tym samouczku).
  • Dodaj kontrolkę sieci Web przycisku obok DropDownList. Ustaw jej Właściwość Text na wartość Refresh lub podobną. W tym podejściu użytkownik będzie musiał wybrać nową kategorię, a następnie kliknąć przycisk. Kliknięcie przycisku spowoduje odświeżenie i zaktualizowanie widoku GridView w celu wyświetlenia listy produktów wybranej kategorii.

Ilustracje 9 i 10 ilustrują Raport główny/szczegółowy w działaniu.

podczas pierwszego odwiedzania strony zostaną wyświetlone produkty napoje

Rysunek 9. podczas pierwszego odwiedzania strony są wyświetlane produkty napoje (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

wybranie nowego produktu (produkt) automatycznie spowoduje odświeżenie, zaktualizowanie widoku GridView

Ilustracja 10: wybranie nowego produktu (produkt) powoduje automatyczne wypróbowanie ogłaszania zwrotnego, aktualizowanie widoku GridView (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

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

Gdy po raz pierwszy zostanie odwiedzana strona FilterByDropDownList.aspx kategorii (napoje) pierwszego elementu listy DropDownList są domyślnie zaznaczone, pokazując produkty napoje w widoku GridView. Zamiast wyświetlać produkty z pierwszej kategorii, możemy chcieć zamiast tego wybrać element DropDownList, który ma postać podobną do "--Wybierz kategorię--".

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

dodać--wybierz kategorię--element listy

Ilustracja 11. Dodawanie elementu--wybierz kategorię--(kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Alternatywnie możesz dodać element listy, dodając następujący znacznik do 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ć AppendDataBoundItems formantu DropDownList na wartość true, ponieważ w przypadku, gdy kategorie są powiązane z DropDownList z elementu ObjectDataSource, zastąpią wszystkie ręcznie dodane elementy listy, jeśli AppendDataBoundItems nie ma wartości true.

Ustaw właściwość AppendDataBoundItems na wartość true

Ilustracja 12. ustaw właściwość AppendDataBoundItems na wartość true

Po wprowadzeniu tych zmian podczas pierwszego odwiedzania strony wybrana jest opcja "--Wybierz kategorię--" i nie są wyświetlane żadne produkty.

ładowania strony początkowej nie są wyświetlane żadne produkty

Ilustracja 13. na początkowym załadowaniu strony nie są wyświetlane żadne produkty (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Nie są wyświetlane żadne produkty, gdy jest wybrany element listy "--Wybierz kategorię--", ponieważ jego wartość jest -1 i w bazie danych nie ma żadnych produktów z CategoryID -1. Jeśli jest to zachowanie, które chcesz wykonać, należy to zrobić. Jeśli jednak chcesz wyświetlić wszystkie kategorie, gdy zostanie wybrany element listy "--Wybierz kategorię--", Wróć do klasy ProductsBLL i dostosuj metodę GetProductsByCategoryID(categoryID), tak aby wywołuje metodę GetProducts(), jeśli wartość parametru przekazanie w categoryID jest mniejsza od zera:

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

Użyta technika jest podobna do metody, która została użyta w celu wyświetlenia wszystkich dostawców z powrotem w samouczku parametrów deklaratywnych , ale w tym przykładzie używamy wartości -1, aby wskazać, że wszystkie rekordy mają być pobierane w przeciwieństwie do null. Wynika to z faktu, że parametr categoryID metody GetProductsByCategoryID(categoryID) oczekuje, że przekazano liczbę całkowitą, podczas gdy w samouczku parametrów deklaratywnych podano parametr wejściowy ciągu.

Rysunek 14 przedstawia zrzut ekranu FilterByDropDownList.aspx, gdy zaznaczona jest opcja "--Wybierz kategorię--". W tym miejscu wszystkie produkty są wyświetlane domyślnie, a użytkownik może zawęzić widok, wybierając określoną kategorię.

wszystkie produkty są teraz wyświetlane domyślnie

Ilustracja 14. wszystkie produkty są teraz wyświetlane domyślnie (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Podsumowanie

Podczas wyświetlania danych zależnych od hierarchii często pomocne jest prezentowanie danych przy użyciu raportów master/detail, z których użytkownik może rozpocząć Peru danych od góry hierarchii i przejść do szczegółów. W tym samouczku sprawdzono Tworzenie prostego raportu głównego/szczegółów pokazującego produkty wybranej kategorii. Zostało to osiągnięte przy użyciu DropDownList dla listy kategorii i widoku GridView dla produktów należących do wybranej kategorii.

W następnym samouczku interfejs DropDownList został jeszcze jeden krok, przy użyciu dwóch kontrolek DropDownList.

Szczęśliwe programowanie!

Informacje o autorze

Scott Mitchell, autor siedmiu grup ASP/ASP. NET Books i założyciel of 4GuysFromRolla.com, pracował z technologiami sieci Web firmy Microsoft od czasu 1998. Scott działa jako niezależny konsultant, trainer i składnik zapisywania. Jego Najnowsza książka to Sams ASP.NET 2,0 w ciągu 24 godzin. Można go osiągnąć w mitchell@4GuysFromRolla.com. lub za pośrednictwem swojego blogu, który można znaleźć w http://ScottOnWriting.NET.