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 przedstawiono sposób wyświetlania raportów wzorzec/szczegóły na pojedynczej stronie sieci Web przy użyciu kontrolek DropDownList do wyświetlania "Master" rekordów i DataList, aby wyświetlić "Szczegóły".

Wprowadzenie

Raport główny/szczegółowy, który został najpierw utworzony przy użyciu widoku GridView w wcześniejszym filtrowaniu wzorzec/szczegóły za pomocą samouczka DropDownList, 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 dla wizualizacji relacji jeden-do-wielu i wyświetlania szczegółowych informacji z szczególnie "szerokich" tabel (z których każda zawiera wiele kolumn). Poznasz sposób implementacji raportów master/detail przy użyciu kontrolek GridView i DetailsView w poprzednich samouczkach. W tym samouczku i następnych dwóch, będziemy ponownie poznać te koncepcje, ale zamiast tego skup się na nich przy użyciu kontrolek DataList i wzmacniak.

W tym samouczku Przyjrzyjmy się użyciu DropDownList, aby zawierała rekordy "Master" z rekordami "Details" wyświetlanymi w elemencie DataList.

Krok 1. Dodawanie stron sieci Web samouczka głównego/szczegółów

Przed rozpoczęciem pracy z tym samouczkiem Poświęćmy chwilę na dodanie folderu i ASP.NET stron, które będziemy potrzebować dla tego samouczka, a następnie dwie instrukcje dotyczące raportów wzorzec/szczegóły przy użyciu kontrolek DataList i wzmacniak. Zacznij od utworzenia nowego folderu w projekcie o nazwie DataListRepeaterFiltering. Następnie Dodaj następujące pięć stron ASP.NET do tego folderu, z których wszystkie są skonfigurowane do korzystania z strony wzorcowej Site.master:

  • Default.aspx
  • FilterByDropDownList.aspx
  • CategoryListMaster.aspx
  • ProductsForCategoryDetails.aspx
  • CategoriesAndProducts.aspx

Utwórz folder DataListRepeaterFiltering i Dodaj samouczek ASP.NET stron

Rysunek 1. tworzenie folderu DataListRepeaterFiltering i dodawanie stron samouczka ASP.NET

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

dodać kontrolkę użytkownika SectionLevelTutorialListing. ascx do default. aspx

Rysunek 2. Dodawanie kontrolki użytkownika SectionLevelTutorialListing.ascx do Default.aspx (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Aby na liście punktowanej były wyświetlane samouczki wzorca/szczegółów, które będą tworzone, należy dodać je do mapy witryny. Otwórz plik Web.sitemap i Dodaj następujący znacznik po "Wyświetlanie danych z elementem DataList i wzmacniak" znacznikiem węzła mapy witryny:

<siteMapNode
    title="Master/Detail Reports with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterFiltering/Default.aspx">
 
    <siteMapNode
        title="Filter by Drop-Down List"
        description="Filter results using a drop-down list."
        url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
 
    <siteMapNode
        title="Master/Detail Across Two Pages"
        description="Master records on one page, detail records on another."
        url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
 
    <siteMapNode
        title="Maser/Detail on One Page"
        description="Master records in the left column, details on the right,
                      both on the same page."
        url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
 
</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 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 na stronie elementu DataList. Pierwsze zadanie przed nami, a następnie, ma mieć kategorie wyświetlane w DropDownList. Aby rozpocząć, Otwórz stronę FilterByDropDownList.aspx w folderze DataListRepeaterFiltering i przeciągnij DropDownList z przybornika na projektanta strony. Następnie ustaw właściwość ID DropDownList na Categories. Kliknij link wybierz źródło danych z tagu inteligentnego DropDownList i Utwórz nowy element ObjectDataSource o nazwie CategoriesDataSource.

dodać nowego elementu ObjectDataSource o nazwie CategoriesDataSource

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

Skonfiguruj nowy element ObjectDataSource, który wywołuje metodę GetCategories() klasy CategoriesBLL. 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 każdego 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 elementu DataList 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 DataList do strony i Utwórz nowy element ObjectDataSource o nazwie ProductsByCategoryDataSource. Czy formant ProductsByCategoryDataSource pobiera swoje dane z metody GetProductsByCategoryID(categoryID) klasy ProductsBLL. Ponieważ ten Raport główny/szczegółowy jest tylko do odczytu, wybierz opcję (brak) na kartach Wstawianie, aktualizowanie i usuwanie.

wybrać metodę GetProductsByCategoryID (IDKategorii)

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

Po kliknięciu przycisku Dalej Kreator ObjectDataSource poprosi nas o źródło wartości parametru categoryID GetProductsByCategoryID(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 zakończeniu działania Kreatora konfiguracji źródła danych program Visual Studio automatycznie wygeneruje ItemTemplate dla elementu DataList, który wyświetla nazwę i wartość każdego pola danych. Aby zamiast tego użyć ItemTemplate, w którym jest wyświetlana tylko nazwa produktu, Kategoria, dostawca, ilość na jednostkę i cena oraz SeparatorTemplate, które wprowadzają element <hr> między każdym elementem, przystąpi do. Używam ItemTemplate z przykładu w wyświetlanych danych za pomocą samouczka z kontrolkami DataList i wzmacniak , ale możesz korzystać z dowolnego znacznika szablonu, który znajdziesz najbardziej atrakcyjny wizualnie.

Po wprowadzeniu tych zmian element DataList i jego znaczniki elementu ObjectDataSource powinny wyglądać podobnie do następujących:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ProductsByCategoryDataSource" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label ID="ProductNameLabel" runat="server"
                Text='<%# Eval("ProductName") %>' />
        </h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
</asp:DataList>
 
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:ControlParameter ControlID="Categories" Name="categoryID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

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 elementu DataList musi wystąpić ogłoszenie zwrotne. Aby to osiągnąć, można ustawić właściwość AutoPostBack DropDownList na true lub dodać formant sieci Web przycisku do strony. Na potrzeby tego samouczka ustawiłem Właściwość AutoPostBack DropDownList na true.

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 elementu DataList

Ilustracja 10: wybranie nowego produktu (produkt) powoduje automatyczne wypróbowanie ogłaszania zwrotnego, aktualizowanie elementu DataList (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 elemencie DataList. W przypadku filtrowania wzorzec/szczegóły przy użyciu samouczka DropDownList dodaliśmy opcję "--Wybierz kategorię--" do DropDownList, która została wybrana domyślnie i, po wybraniu, wyświetla wszystkie produkty w bazie danych. Takie podejście było zarządzane podczas tworzenia listy produktów w widoku GridView, ponieważ każdy wiersz produktu zajęł niewielką ilość ekranu. Z elementem DataList, jednak informacje każdego produktu zużywają znacznie większy fragment ekranu. Nadal dodamy opcję "--Wybierz kategorię--" i wybrano ją domyślnie, ale zamiast wyświetlać wszystkie produkty po zaznaczeniu, skonfiguruj ją tak, aby nie pokazywała żadnych produktów.

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 0.

Dodaj

Ilustracja 11. Dodawanie elementu "--Wybierz kategorię--"

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="0">-- Choose a Category --</asp:ListItem>
 
</asp:DropDownList>

Ponadto musimy ustawić AppendDataBoundItems kontrolki DropDownList na true, ponieważ jest ona ustawiona na false (wartość domyślna), gdy kategorie są powiązane z DropDownList z elementu ObjectDataSource, zastąpią wszystkie ręcznie dodane elementy listy.

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

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

Z powodu wybrania wartości 0 dla elementu "--Wybierz kategorię--" występuje, ponieważ w systemie nie ma kategorii z wartością 0, dlatego nie zostanie zwrócony żaden rekord produktu, gdy zostanie wybrany element listy "--Wybierz kategorię--". Aby to potwierdzić, poświęć chwilę na odwiedzenie strony za pomocą przeglądarki. Jak pokazano na rysunku 13, podczas pierwszego wyświetlania strony jest zaznaczone pole wyboru "--Wybierz kategorię--" i nie są wyświetlane żadne produkty.

, gdy

Rysunek 13. po wybraniu elementu listy "--Wybierz kategorię--" nie są wyświetlane żadne produkty (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Jeśli nie chcesz wyświetlać wszystkich produktów, gdy wybrana jest opcja "--Wybierz kategorię--", Użyj zamiast niej wartości -1. Czytnik uważni będzie odwoływać ten element z powrotem w przypadku filtrowania wzorzec/szczegóły za pomocą DropDownListego samouczka zaktualizowaliśmy metodę GetProductsByCategoryID(categoryID) klasy ProductsBLL tak, aby w przypadku przekazanie categoryID wartości -1 wszystkie rekordy produktów zostały zwrócone.

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 elementu DataList dla produktów należących do wybranej kategorii.

W następnym samouczku powiesz się, jak oddzielić wzorzec i szczegółowe informacje na dwóch stronach. Na pierwszej stronie zostanie wyświetlona lista "Master" z linkiem umożliwiającym wyświetlenie szczegółów. Kliknięcie linku spowoduje wyróżnienie użytkownika na drugą stronę, co spowoduje wyświetlenie szczegółowych informacji o wybranym rekordzie głównym.

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.

Specjalne podziękowania dla...

Ta seria samouczków została sprawdzona przez wielu przydatnych recenzentów. Recenzent potencjalnych klientów dla tego samouczka został Randy Schmidt. Chcesz przeglądać moje nadchodzące artykuły MSDN? Jeśli tak, upuść mi linię w mitchell@4GuysFromRolla.com.