Filtrowanie rekordu głównego/szczegółów na dwóch stronach (C#)

przez Scott Mitchell

Pobierz przykładową aplikację lub Pobierz plik PDF

W tym samouczku zaimplementujemy ten wzorzec przy użyciu widoku GridView, aby wyświetlić listę dostawców w bazie danych. Każdy wiersz dostawcy w widoku GridView będzie zawierać łącze Wyświetl produkty, które po kliknięciu spowoduje przejście użytkownika do osobnej strony, która wyświetla listę tych produktów dla wybranego dostawcy.

Wprowadzenie

W poprzednich dwóch samouczkach pokazano, jak wyświetlić raporty wzorzec/szczegóły na pojedynczej stronie sieci Web przy użyciu kontrolek DropDownList , aby wyświetlić "główne" rekordy i formant GridView lub DetailsView , aby wyświetlić "Szczegóły". Innym typowym wzorcem używanym w raportach Master/Details jest posiadanie rekordów głównych na jednej stronie sieci Web i szczegółowych informacji wyświetlanych na innym. Witryna internetowa Forum, podobnie jak fora ASP.NET, to doskonały przykład tego wzorca. Fora ASP.NET składają się z różnych Wprowadzenie forów, formularzy sieci Web, kontrolek prezentacji danych i tak dalej. Każde Forum składa się z wielu wątków, a każdy wątek składa się z szeregu wpisów. Na stronie głównej forów ASP.NET są wyświetlane fora. Kliknięcie forum powoduje zawhiskię do ShowForum.aspx strony, która zawiera listę wątków dla tego forum. Analogicznie, kliknięcie wątku powoduje przejście do programu ShowPost.aspx , w którym są wyświetlane wpisy dla klikniętego wątku.

W tym samouczku zaimplementujemy ten wzorzec przy użyciu widoku GridView, aby wyświetlić listę dostawców w bazie danych. Każdy wiersz dostawcy w widoku GridView będzie zawierać łącze Wyświetl produkty, które po kliknięciu spowoduje przejście użytkownika do osobnej strony, która wyświetla listę tych produktów dla wybranego dostawcy.

Krok 1. Dodawanie SupplierListMaster.aspx ProductsForSupplierDetails.aspx stron i do Filtering folderu

Podczas definiowania układu strony w trzecim samouczku dodaliśmy kilka stron "Starter" w BasicReporting Filtering folderach,, i CustomFormatting . Jednak w tej chwili nie dodano strony Starter dla tego samouczka, więc Dodaj dwie nowe strony do Filtering folderu: SupplierListMaster.aspx i ProductsForSupplierDetails.aspx . SupplierListMaster.aspx zostanie wyświetlona lista "Master" (dostawcy), podczas gdy ProductsForSupplierDetails.aspx zostaną wyświetlone produkty wybranego dostawcy.

Podczas tworzenia tych dwóch nowych stron należy mieć pewność, że zostaną one skojarzone ze Site.master stroną wzorcową.

Dodawanie stron SupplierListMaster. aspx i ProductsForSupplierDetails. aspx do folderu filtrowania

Rysunek 1. Dodawanie SupplierListMaster.aspx stron i ProductsForSupplierDetails.aspx do Filtering folderu

Ponadto podczas dodawania nowych stron do projektu należy koniecznie zaktualizować plik mapy witryny, Web.sitemap odpowiednio. W tym samouczku wystarczy dodać SupplierListMaster.aspx stronę do mapy witryny przy użyciu następującej zawartości XML jako elementu podrzędnego elementu raporty filtrowania <siteMapNode> :

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another."
/>

Note

Możesz pomóc zautomatyzować proces aktualizowania pliku mapy witryny podczas dodawania nowych stron ASP.NET przy użyciu języka KB.bezpłatne makro mapy witrynyprogramu Visual Studio.

Krok 2. Wyświetlanie listy dostawców wSupplierListMaster.aspx

Przy SupplierListMaster.aspx ProductsForSupplierDetails.aspx tworzeniu stron i następnym krokiem jest utworzenie widoku GridView dostawców w programie SupplierListMaster.aspx . Dodaj widok GridView do strony i powiąż go z nowym elementem ObjectDataSource. Ten element ObjectDataSource powinien używać SuppliersBLL metody klasy GetSuppliers() do zwracania wszystkich dostawców.

Wybierz klasę SuppliersBLL

Rysunek 2. Wybieranie SuppliersBLL klasy (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Konfigurowanie elementu ObjectDataSource do korzystania z metody getdostawcs ()

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

Musimy dołączyć link zatytułowany Wyświetl produkty w każdym wierszu GridView, który po kliknięciu umożliwia użytkownikowi ProductsForSupplierDetails.aspx przekazanie wartości z wybranego wiersza SupplierID za pomocą ciągu QueryString. Na przykład, jeśli użytkownik kliknie łącze Wyświetl produkty dla dostawcy Warszawy (ma SupplierID wartość 4), powinny być wysyłane do ProductsForSupplierDetails.aspx?SupplierID=4 .

Aby to osiągnąć, Dodaj element HyperLinkField do widoku GridView, który dodaje hiperłącze do każdego wiersza GridView. Zacznij od kliknięcia linku Edytuj kolumny w tagu inteligentnym GridView. Następnie wybierz HyperLinkField z listy w lewym górnym rogu, a następnie kliknij przycisk Dodaj, aby dołączyć HyperLinkField na liście pól GridView.

Dodaj HyperLinkField do widoku GridView

Ilustracja 4. Dodawanie HyperLinkField do widoku GridView (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

HyperLinkField można skonfigurować tak, aby używała tego samego tekstu lub wartości adresu URL łącza w każdym wierszu GridView lub można oprzeć te wartości na wartościach danych powiązanych z każdym określonym wierszem. Aby określić wartość statyczną we wszystkich wierszach, użyj HyperLinkField Text lub NavigateUrl właściwości. Ponieważ chcemy, aby tekst łącza był taki sam dla wszystkich wierszy, ustaw właściwość HyperLinkField, Text Aby wyświetlić produkty.

Ustaw właściwość Text elementu HyperLinkField, aby wyświetlić produkty

Rysunek 5. Ustaw właściwość HyperLinkField, Text Aby wyświetlić produkty (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Aby ustawić tekst lub wartość adresu URL na podstawie danych źródłowych powiązanych z wierszem GridView, Określ pola danych, z których wartości tekstowe lub adresy URL mają być ściągane we DataTextField DataNavigateUrlFields właściwościach lub. DataTextField można ustawić tylko dla pojedynczego pola danych. DataNavigateUrlFieldsmożna jednak ustawić rozdzieloną przecinkami listę pól danych. Często musimy oprzeć tekst lub adres URL na kombinacji wartości pola danych bieżącego wiersza i niektórych znaczników statycznych. W tym samouczku chcemy na przykład uzyskać adres URL linków HyperLinkField ProductsForSupplierDetails.aspx?SupplierID=supplierID , gdzie supplierID jest to wartość Row's każdego GridView SupplierID . Należy zauważyć, że w tym miejscu wymagane są zarówno wartości statyczne, jak i oparte na danych: ProductsForSupplierDetails.aspx?SupplierID= część adresu URL linku jest statyczna, natomiast supplierID część jest oparta na danych, ponieważ jej wartość jest wartością każdego wiersza SupplierID .

Aby wskazać kombinację wartości statycznych i opartych na danych, użyj DataTextFormatString właściwości i DataNavigateUrlFormatString . W tych właściwościach Wprowadź znacznik statyczny w razie potrzeby, a następnie użyj znacznika, {0} gdzie ma być wyświetlana wartość pola DataTextField lub DataNavigateUrlFields właściwości. Jeśli DataNavigateUrlFields Właściwość ma określone wiele pól, użyj {0} miejsca, w którym ma zostać wstawiona wartość pierwszego pola, {1} dla drugiej wartości pola itd.

Zastosowanie tego do naszego samouczka wymaga ustawienia DataNavigateUrlFields właściwości na SupplierID , ponieważ jest to pole danych, którego wartość musi zostać dostosowana dla poszczególnych wierszy, i DataNavigateUrlFormatString Właściwość do ProductsForSupplierDetails.aspx?SupplierID={0} .

Konfigurowanie HyperLinkField w celu uwzględnienia odpowiedniego adresu URL linku na podstawie IDDostawcy

Ilustracja 6. Konfigurowanie HyperLinkField w celu uwzględnienia odpowiedniego adresu URL linku na podstawie SupplierID (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Po dodaniu HyperLinkField możesz dostosowywać pola GridView i zmieniać ich kolejność. Poniższe znaczniki pokazują widok GridView po wprowadzeniu drobnych dostosowań na poziomie pola.

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="SupplierID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Columns>
        <asp:HyperLinkField DataNavigateUrlFields="SupplierID"
            DataNavigateUrlFormatString=
            "ProductsForSupplierDetails.aspx?SupplierID={0}"
            Text="View Products" />
        <asp:BoundField DataField="CompanyName"
          HeaderText="Company" SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City"
          SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country"
          SortExpression="Country" />
    </Columns>
</asp:GridView>

Poświęć chwilę na wyświetlenie SupplierListMaster.aspx strony za pomocą przeglądarki. Jak pokazano na rysunku 7, na stronie są obecnie wyświetlane wszystkie dostawcy, w tym link Pokaż produkty. Kliknięcie linku Wyświetl produkty spowoduje przejście do ProductsForSupplierDetails.aspx , przekazanie danych przez dostawcę do SupplierID ciągu QueryString.

Każdy wiersz dostawcy zawiera link Wyświetl produkty

Rysunek 7: każdy wiersz dostawcy zawiera link Wyświetl produkty (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 3. Wyświetlanie listy produktów dostawcyProductsForSupplierDetails.aspx

W tym momencie SupplierListMaster.aspx Strona wysyła użytkowników do ProductsForSupplierDetails.aspx , przekazując wybrany dostawca SupplierID w QueryString. Ostatnim krokiem tego samouczka jest wyświetlenie produktów w widoku GridView, ProductsForSupplierDetails.aspx którego SupplierID wartość jest równa SupplierID przekazaniu za pomocą ciągu QueryString. Aby to zrobić, Dodaj widok GridView do ProductsForSupplierDetails.aspx strony przy użyciu nowej kontrolki ObjectDataSource o nazwie ProductsBySupplierDataSource , która wywołuje GetProductsBySupplierID(supplierID) metodę z ProductsBLL klasy.

Dodaj nowy element ObjectDataSource o nazwie ProductsBySupplierDataSource

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

Wybierz klasę ProductsBLL

Ilustracja 9. Wybieranie ProductsBLL klasy (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Element ObjectDataSource wywołuje metodę GetProductsBySupplierID (IDDostawcy)

Ilustracja 10. aby element ObjectDataSource wywoływał GetProductsBySupplierID(supplierID) metodę (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Ostatni krok Kreatora konfigurowania źródła danych prosi nas o podanie źródła GetProductsBySupplierID(supplierID) supplierID parametru metody. Aby użyć wartości QueryString, ustaw Źródło parametru na QueryString i wprowadź nazwę wartości QueryString do użycia w polu tekstowym QueryStringField ( SupplierID ).

Wypełnij wartość parametru IDDostawcy z wartości QueryString ciągu IDDostawcy

Ilustracja 11. wypełnienie supplierID wartości parametru z SupplierID wartości QueryString (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

To wszystko! Na rysunku 12 przedstawiono ProductsForSupplierDetails.aspx stronę odwiedzoną przez kliknięcie linku z Warszawy Traders SupplierListMaster.aspx .

Pokazywane są produkty dostarczone przez handlowców z Warszawy

Ilustracja 12. pokazywane są produkty dostarczone przez handlowców z Warszawy (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Wyświetlanie informacji o dostawcy wProductsForSupplierDetails.aspx

Jak pokazano na rysunku 12, ProductsForSupplierDetails.aspx strona po prostu wyświetla listę produktów, które są dostarczane przez SupplierID określony w QueryString. Jednak ktoś wysyłany bezpośrednio do tej strony nie wie, że rysunek 12 pokazuje produkty handlowców. W celu rozwiązania tego problemu można także wyświetlić informacje o dostawcach na tej stronie.

Zacznij od dodania widoku FormView powyżej elementu GridView. Utwórz nową kontrolkę ObjectDataSource o nazwie SuppliersDataSource , która wywołuje SuppliersBLL GetSupplierBySupplierID(supplierID) metodę klasy.

Wybierz klasę SuppliersBLL

Ilustracja 13. Wybieranie SuppliersBLL klasy (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Element ObjectDataSource wywołuje metodę GetSupplierBySupplierID (IDDostawcy)

Ilustracja 14. czy element ObjectDataSource wywołuje GetSupplierBySupplierID(supplierID) metodę (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Podobnie jak w przypadku ProductsBySupplierDataSource , należy mieć supplierID parametr przypisany wartości SupplierID QueryString.

Wypełnij wartość parametru IDDostawcy z wartości QueryString ciągu IDDostawcy

Ilustracja 15. wypełnienie supplierID wartości parametru z SupplierID wartości QueryString (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Podczas wiązania widoku FormView z elementem ObjectDataSource w widok Projekt, program Visual Studio automatycznie utworzy ItemTemplate , InsertItemTemplate , i EditItemTemplate kontrolki sieci Web etykieta i TextBox dla każdego z pól danych zwracanych przez element ObjectDataSource. Ponieważ chcemy wyświetlić informacje o dostawcach bezpłatnie, aby usunąć InsertItemTemplate i EditItemTemplate . Następnie Edytuj ItemTemplate w taki sposób, aby wyświetlał nazwę firmy dostawcy w <h3> elemencie oraz adres, miasto, kraj i numer telefonu pod nazwą firmy. Alternatywnie można ręcznie ustawić DataSourceID i utworzyć ItemTemplate znaczniki, jak zostało to zrobione w samouczku "Wyświetlanie danych za pomocą elementu ObjectDataSource".

Po edycji znaczniki deklaratywne FormView powinny wyglądać podobnie do następujących:

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
    DataSourceID="suppliersDataSource" EnableViewState="False">
    <ItemTemplate>
        <h3><%# Eval("CompanyName") %></h3>
        <p>
            <asp:Label ID="AddressLabel" runat="server"
                Text='<%# Bind("Address") %>'></asp:Label><br />
            <asp:Label ID="CityLabel" runat="server"
                Text='<%# Bind("City") %>'></asp:Label>,
            <asp:Label ID="CountryLabel" runat="server"
                Text='<%# Bind("Country") %>'></asp:Label><br />
            Phone:
            <asp:Label ID="PhoneLabel" runat="server"
                Text='<%# Bind("Phone") %>'></asp:Label>
        </p>
    </ItemTemplate>
</asp:FormView>

Rysunek 16 przedstawia zrzut ekranu ProductsForSupplierDetails.aspx strony po uwzględnieniu informacji o dostawcy przedstawionych powyżej.

Lista produktów zawiera podsumowanie dotyczące dostawcy

Ilustracja 16. Lista produktów zawiera podsumowanie dotyczące dostawcy (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Zastosowanie końcowego dotknięcia dla ProductsForSupplierDetails.aspx interfejsu użytkownika

Aby ulepszyć środowisko użytkownika dla tego raportu, istnieje kilka dodatków, które należy wprowadzić na ProductsForSupplierDetails.aspx stronie. Obecnie jedynym sposobem, w jaki użytkownik może przejść ze ProductsForSupplierDetails.aspx strony z powrotem do listy dostawców, ma kliknąć przycisk Wstecz w przeglądarce. Dodajmy kontrolkę HyperLink do strony, ProductsForSupplierDetails.aspx która łączy się z powrotem do, co pozwala SupplierListMaster.aspx użytkownikowi na powrót do listy głównej.

Dodaj kontrolkę HyperLink, aby ponownie przełączyć użytkownika do SupplierListMaster. aspx

Ilustracja 17. Dodawanie kontrolki hiperłącze, aby przełączyć użytkownika do trybu SupplierListMaster.aspx (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Jeśli użytkownik kliknie link Wyświetl produkty dla dostawcy, który nie ma żadnych produktów, element ProductsBySupplierDataSource ObjectDataSource w ProductsForSupplierDetails.aspx nie zwróci żadnych wyników. Widok GridView powiązany z elementem ObjectDataSource nie będzie renderować żadnego znacznika, który prowadzi do pustego regionu na stronie w przeglądarce użytkownika. Aby dokładniej informować użytkownika o tym, że nie istnieją żadne produkty skojarzone z wybranym dostawcą, można ustawić właściwość GridView EmptyDataText na komunikat, który ma być wyświetlany w przypadku wystąpienia takiej sytuacji. Ustawiłem tę właściwość na "nie ma żadnych produktów dostarczonych przez tego dostawcę" "

Domyślnie wszyscy dostawcy w bazie danych Northwinds zapewniają co najmniej jeden produkt. Jednak w tym samouczku ręcznie zmodyfikowano Products tabelę, tak aby dostawca escargots Nouveaux nie był już skojarzony z żadnymi produktami. Ilustracja 18 przedstawia stronę szczegółów escargots Nouveaux po wprowadzeniu tej zmiany.

Użytkownicy są informowani, że dostawca nie udostępnia żadnych produktów

Ilustracja 18. Użytkownicy są informowani, że dostawca nie udostępnia żadnych produktów (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Podsumowanie

Raporty master/detail mogą wyświetlać zarówno rekordy główne, jak i szczegółowe na jednej stronie, w wielu witrynach sieci Web, które są rozdzielane na dwie strony internetowe. W tym samouczku zawarto informacje na temat sposobu implementacji takiego raportu wzorzec/szczegóły przez posiadanie dostawców wymienionych w widoku GridView na stronie sieci Web "Master" i skojarzonych produktów wymienionych na stronie "Szczegóły". Każdy wiersz dostawcy na głównej stronie sieci Web zawiera link do strony szczegółów, która została przeniesiona wzdłuż wartości wiersza SupplierID . Takie linki specyficzne dla wiersza można łatwo dodać przy użyciu HyperLinkField GridView.

Na stronie szczegółów pobieranie tych produktów dla określonego dostawcy zostało osiągnięte przez wywołanie ProductsBLL GetProductsBySupplierID(supplierID) metody klasy. supplierID Wartość parametru została określona deklaratywnie przy użyciu ciągu QueryString jako źródła parametru. Przeglądamy również sposób wyświetlania szczegółów dostawcy na stronie szczegółów przy użyciu widoku FormView.

Nasz następny samouczek jest ostatnim z nich w raportach master/detail. Zobaczmy, jak wyświetlić listę produktów w widoku GridView, gdzie każdy wiersz ma przycisk Wybierz. Kliknięcie przycisku Wybierz spowoduje wyświetlenie szczegółów tego produktu w kontrolce DetailsView na tej samej stronie.

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 się z nią skontaktować mitchell@4GuysFromRolla.com . lub za pośrednictwem swojego blogu, który można znaleźć pod adresem http://ScottOnWriting.NET .

Specjalne podziękowania

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