Filtrowanie wzorca/szczegółów na dwóch stronach za pomocą kontrolki GridView (C#)
W tym samouczku zaimplementujemy ten wzorzec przy użyciu kontrolki GridView, aby wyświetlić listę dostawców w bazie danych. Każdy wiersz dostawcy w elemecie GridView będzie zawierać link Wyświetl produkty, który po kliknięciu spowoduje przejście użytkownika do oddzielnej strony zawierającej listę tych produktów dla wybranego dostawcy.
Wprowadzenie
W poprzednich dwóch samouczkach pokazano, jak wyświetlać raporty wzorca/szczegółów na jednej stronie internetowej przy użyciu listy DropDownLists do wyświetlania rekordów "master" i kontrolki GridView lub DetailsView w celu wyświetlenia "szczegółów". Innym typowym wzorcem używanym do raportów master/details jest posiadanie rekordów wzorcowych na jednej stronie internetowej i szczegółów wyświetlanych na innej stronie. Witryna internetowa forum, taka jak fora ASP.NET, jest doskonałym przykładem tego wzorca w praktyce. Fora ASP.NET składają się z różnych forów Wprowadzenie, Web Forms, kontrolki prezentacji danych itd. Każde forum składa się z wielu wątków, a każdy wątek składa się z wielu wpisów. Na stronie głównej forów ASP.NET znajdują się fora. Kliknięcie forum powoduje wyświetlenie strony zawierającej ShowForum.aspx wątki dla tego forum. Podobnie kliknięcie wątku powoduje przejście do ShowPost.aspxelementu , co spowoduje wyświetlenie wpisów dla klikniętego wątku.
W tym samouczku zaimplementujemy ten wzorzec przy użyciu kontrolki GridView, aby wyświetlić listę dostawców w bazie danych. Każdy wiersz dostawcy w elemecie GridView będzie zawierać link Wyświetl produkty, który po kliknięciu spowoduje przejście użytkownika do oddzielnej strony zawierającej listę tych produktów dla wybranego dostawcy.
Krok 1. DodawanieSupplierListMaster.aspxiProductsForSupplierDetails.aspxstrony doFilteringfolderu
Podczas definiowania układu strony w trzecim samouczku dodaliśmy kilka stron "starter" w BasicReportingfolderach , Filteringi CustomFormatting . Jednak w tym czasie nie dodaliśmy strony początkowej dla tego samouczka, więc poświęć chwilę, aby dodać dwie nowe strony do Filtering folderu: SupplierListMaster.aspx i ProductsForSupplierDetails.aspx. SupplierListMaster.aspx wyświetli listę "głównych" rekordów (dostawców), podczas gdy ProductsForSupplierDetails.aspx będą wyświetlane produkty dla wybranego dostawcy.
Podczas tworzenia tych dwóch nowych stron pewne jest skojarzenie ich ze stroną wzorcową Site.master .
Rysunek 1. Dodawanie SupplierListMaster.aspx stron i ProductsForSupplierDetails.aspx do Filtering folderu
Ponadto podczas dodawania nowych stron do projektu należy odpowiednio zaktualizować plik mapy witryny. Web.sitemap Na potrzeby tego samouczka po prostu dodaj SupplierListMaster.aspx stronę do mapy witryny przy użyciu następującej zawartości XML jako elementu podrzędnego elementu Filtering Reports <siteMapNode> :
<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another."
/>
Uwaga
Możesz pomóc zautomatyzować proces aktualizowania pliku mapy witryny podczas dodawania nowych stron ASP.NET przy użyciu bezpłatnego makra mapy witryny programu Visual Studio K. Scotta Allena.
Krok 2. Wyświetlanie listy dostawców w programieSupplierListMaster.aspx
Po utworzeniu SupplierListMaster.aspx stron i ProductsForSupplierDetails.aspx następnym krokiem jest utworzenie elementu GridView dostawców w programie SupplierListMaster.aspx. Dodaj element GridView do strony i powiąż go z nowym obiektem ObjectDataSource. To objectDataSource powinno użyć SuppliersBLL metody klasy GetSuppliers() , aby zwrócić wszystkich dostawców.
Rysunek 2. Wybierz klasę SuppliersBLL (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 3. Konfigurowanie obiektu ObjectDataSource do użycia GetSuppliers() metody (kliknij, aby wyświetlić obraz pełnowymiarowy)
Musimy dołączyć link zatytułowany Wyświetl produkty w każdym wierszu GridView, który po kliknięciu spowoduje przekazanie przez użytkownika ProductsForSupplierDetails.aspx wartości wybranego wiersza SupplierID za pomocą ciągu zapytania. Jeśli na przykład użytkownik kliknie link Wyświetl produkty dla dostawcy firmy Tokio Traders (który ma SupplierID wartość 4), powinien zostać wysłany do ProductsForSupplierDetails.aspx?SupplierID=4usługi .
Aby to osiągnąć, dodaj obiekt HyperLinkField do kontrolki GridView, który dodaje hiperlink do każdego wiersza elementu GridView. Zacznij od kliknięcia linku Edytuj kolumny z tagu inteligentnego GridView. Następnie wybierz pozycję HyperLinkField z listy w lewym górnym rogu, a następnie kliknij przycisk Dodaj, aby uwzględnić pole HyperLinkField na liście pól GridView.
Rysunek 4. Dodawanie pola HyperLinkField do kontrolki GridView (kliknij, aby wyświetlić obraz pełnowymiarowy)
Obiekt HyperLinkField można skonfigurować tak, aby używał tego samego tekstu lub wartości adresu URL w każdym wierszu elementu GridView lub może opierać te wartości na wartościach danych powiązanych z poszczególnymi wierszami. Aby określić wartość statyczną we wszystkich wierszach, użyj właściwości lub NavigateUrl właściwości funkcji HyperLinkFieldText. Ponieważ chcemy, aby tekst łącza był taki sam dla wszystkich wierszy, ustaw właściwość HyperLinkField Text na Wyświetl produkty.
Rysunek 5. Ustaw właściwość HyperLinkField Text na wyświetl produkty (kliknij, aby wyświetlić obraz pełnowymiarowy)
Aby ustawić wartości tekstu lub adresu URL, które mają być oparte na danych bazowych powiązanych z wierszem GridView, określ pola danych, z których powinny zostać pobrane wartości tekstu lub adresu URL we właściwościach DataTextField lub DataNavigateUrlFields . DataTextField można ustawić tylko na jedno pole danych; DataNavigateUrlFieldsmożna jednak ustawić na rozdzielaną przecinkami listę pól danych. Często musimy opierać tekst lub adres URL na kombinacji wartości pola danych bieżącego wiersza i niektórych znaczników statycznych. Na przykład w tym samouczku chcemy, aby adres URL łączy funkcji HyperLinkField był ProductsForSupplierDetails.aspx?SupplierID=supplierIDwartością , gdzie supplierID jest wartością SupplierID wiersza elementu GridView. Zwróć uwagę, że w tym miejscu potrzebne są zarówno wartości statyczne, jak i oparte na danych: ProductsForSupplierDetails.aspx?SupplierID= część adresu URL łącza jest statyczna, natomiast supplierID część jest oparta na danych, ponieważ jej wartość jest własną SupplierID wartością każdego wiersza.
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 zgodnie z potrzebami, a następnie użyj znacznika {0} , w którym ma zostać wyświetlona wartość pola określonego w DataTextField właściwościach lub DataNavigateUrlFields . DataNavigateUrlFields Jeśli właściwość ma wiele pól określonych, użyj {0} miejsca, w którym ma zostać wstawiona pierwsza wartość pola, {1} dla drugiej wartości pola itd.
Zastosowanie tej funkcji do naszego samouczka wymaga ustawienia DataNavigateUrlFields właściwości na SupplierID, ponieważ jest to pole danych, którego wartość musimy dostosować dla poszczególnych wierszy, a DataNavigateUrlFormatString właściwość na ProductsForSupplierDetails.aspx?SupplierID={0}.
Rysunek 6. Konfigurowanie pola HiperLinkField w celu uwzględnienia odpowiedniego adresu URL łącza na podstawie elementu SupplierID (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po dodaniu pola HyperLinkField możesz dostosować i zmienić kolejność pól GridView. Poniższy znacznik pokazuje element GridView po wprowadzeniu pewnych dostosowań na poziomie pola pomocniczego.
<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ę, aby wyświetlić SupplierListMaster.aspx stronę za pośrednictwem przeglądarki. Jak pokazano na rysunku 7, strona zawiera obecnie listę wszystkich dostawców, w tym link Wyświetl produkty. Kliknięcie linku Wyświetl produkty spowoduje przejście do ProductsForSupplierDetails.aspxelementu , przechodząc wzdłuż dostawcy SupplierID w ciągu zapytania.
Rysunek 7. Każdy wiersz dostawcy zawiera link Wyświetl produkty (kliknij, aby wyświetlić obraz pełnowymiarowy)
Krok 3. Wyświetlanie listy produktów dostawcy wProductsForSupplierDetails.aspx
Na tym etapie SupplierListMaster.aspx strona wysyła użytkowników do ProductsForSupplierDetails.aspxusługi , przekazując wybranego dostawcę SupplierID w ciągu zapytania. Ostatnim krokiem samouczka jest wyświetlenie produktów w elemecie GridView, którego ProductsForSupplierDetails.aspxSupplierID element jest równy SupplierID przekazywanemu przez ciąg zapytania. Aby to osiągnąć, dodaj element GridView do ProductsForSupplierDetails.aspx strony, używając nowej kontrolki ObjectDataSource o nazwie ProductsBySupplierDataSource , która wywołuje GetProductsBySupplierID(supplierID) metodę z ProductsBLL klasy.
Rysunek 8. Dodawanie nowego obiektuDataSource nazwane ProductsBySupplierDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Rysunek 9. Wybierz klasę ProductsBLL (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 10. Wywołaj metodę GetProductsBySupplierID(supplierID) ObjectDataSource (Kliknij, aby wyświetlić obraz pełnowymiarowy)
Ostatni krok Kreatora konfigurowania źródła danych prosi nas o podanie źródła parametru GetProductsBySupplierID(supplierID) metody supplierID . Aby użyć wartości ciągu zapytania, ustaw wartość Źródło parametru na QueryString i wprowadź nazwę wartości querystring do użycia w polu tekstowym QueryStringField (SupplierID).
Rysunek 11. Wypełnij wartość parametru supplierIDSupplierID z wartości ciągu zapytania (kliknij, aby wyświetlić obraz pełnowymiarowy)
To wszystko! Rysunek 12 przedstawia ProductsForSupplierDetails.aspx stronę po odwiedzeniu, klikając link Tokio Traders z witryny SupplierListMaster.aspx.
Rysunek 12. Wyświetlane są produkty dostarczone przez firmę Tokyo Traders (kliknij, aby wyświetlić obraz pełnowymiarowy)
Wyświetlanie informacji o dostawcy w programieProductsForSupplierDetails.aspx
Jak pokazano na ProductsForSupplierDetails.aspx rysunku 12, strona po prostu wyświetla listę produktów dostarczanych przez SupplierID określone w ciągu zapytania. Ktoś wysłany bezpośrednio na tę stronę nie wiedziałby jednak, że rysunek 12 pokazuje produkty firmy Tokio Traders. Aby rozwiązać ten problem, możemy również wyświetlić informacje o dostawcy na tej stronie.
Zacznij od dodania elementu FormView powyżej produktów GridView. Utwórz nową kontrolkę ObjectDataSource o nazwie SuppliersDataSource , która wywołuje metodę SuppliersBLL klasy GetSupplierBySupplierID(supplierID) .
Rysunek 13. Wybierz klasę SuppliersBLL (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 14. Wywołaj metodę GetSupplierBySupplierID(supplierID) ObjectDataSource (Kliknij, aby wyświetlić obraz pełnowymiarowy)
Podobnie jak w przypadku elementu ProductsBySupplierDataSource, parametr ma supplierID przypisaną wartość SupplierID wartości ciągu zapytania.
Rysunek 15. Wypełnij wartość parametru supplierIDSupplierID z wartości ciągu zapytania (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po powiązaniu elementu FormView z obiektem ObjectDataSource w widoku projektu program Visual Studio automatycznie utworzy kontrolki Kontrolki ItemTemplateInsertItemTemplateEditItemTemplate , FormView i z kontrolkami sieci Web Label i TextBox dla każdego z pól danych zwracanych przez obiekt ObjectDataSource. Ponieważ chcemy po prostu wyświetlić informacje o dostawcy, możesz usunąć element InsertItemTemplate i EditItemTemplate. Następnie zmodyfikuj element ItemTemplate, aby wyświetlić nazwę firmy dostawcy w elemencie <h3> i adres, miasto, kraj/region i numer telefonu pod nazwą firmy. Alternatywnie możesz ręcznie ustawić kontrolki FormView DataSourceID i utworzyć ItemTemplate znaczniki, tak jak w samouczku "Wyświetlanie danych za pomocą obiektu ObjectDataSource".
Po wprowadzeniu tych zmian znaczniki deklaratywne w widoku 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 ProductsForSupplierDetails.aspx ekranu strony po dołączeniu powyższych informacji o dostawcy.
Rysunek 16. Lista produktów zawiera podsumowanie o dostawcy (kliknij, aby wyświetlić obraz pełnowymiarowy)
Stosowanie ostatecznego dotknięcia interfejsuProductsForSupplierDetails.aspxużytkownika
Aby ulepszyć środowisko użytkownika dla tego raportu, należy wprowadzić kilka dodatków do ProductsForSupplierDetails.aspx strony. Obecnie jedynym sposobem, w jaki użytkownik może przejść ze ProductsForSupplierDetails.aspx strony z powrotem do listy dostawców, jest kliknięcie przycisku Wstecz przeglądarki. Dodajmy kontrolkę HyperLink do strony, która łączy się z powrotem do ProductsForSupplierDetails.aspxSupplierListMaster.aspxelementu , zapewniając inny sposób, aby użytkownik wrócił do listy głównej.
Rysunek 17. Dodawanie kontrolki HyperLink w celu powrotu użytkownika do SupplierListMaster.aspx (kliknij, aby wyświetlić obraz pełnowymiarowy)
Jeśli użytkownik kliknie link Wyświetl produkty dla dostawcy, który nie ma żadnych produktów, ProductsBySupplierDataSource obiekt ObjectDataSource w elemecie ProductsForSupplierDetails.aspx nie zwróci żadnych wyników. Element GridView powiązany z obiektem ObjectDataSource nie renderuje żadnych znaczników, co spowoduje, że na stronie w przeglądarce użytkownika zostanie wyświetlony pusty region. Aby wyraźniej komunikować się z użytkownikiem, że nie ma żadnych produktów skojarzonych z wybranym dostawcą, możemy ustawić właściwość GridView EmptyDataText na komunikat, który chcemy wyświetlić, gdy wystąpi taka sytuacja. Dla tej właściwości ustawiono wartość "Brak 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 zmodyfikowałem tabelę Products tak, aby dostawca Escargots Nouveaux nie był już skojarzony z żadnymi produktami. Rysunek 18 przedstawia stronę szczegółów escargots Nouveaux po wprowadzeniu tej zmiany.
Rysunek 18. Użytkownicy są poinformowani, że dostawca nie dostarcza żadnych produktów (kliknij, aby wyświetlić obraz pełnowymiarowy)
Podsumowanie
Chociaż raporty wzorcowe/szczegółowe mogą wyświetlać zarówno rekordy wzorca, jak i szczegółowe na jednej stronie, w wielu witrynach internetowych są oddzielone między dwiema stronami internetowymi. W tym samouczku przyjrzeliśmy się, jak zaimplementować taki raport główny/szczegółowy, wprowadzając dostawców wymienionych w elemecie GridView na stronie internetowej "master" i skojarzonych produktów wymienionych na stronie "szczegóły". Każdy wiersz dostawcy na stronie głównej sieci Web zawiera link do strony szczegółów, która została przekazana SupplierID wzdłuż wartości wiersza. Takie linki specyficzne dla wiersza można łatwo dodać przy użyciu funkcji HyperLinkField elementu GridView.
Na stronie szczegółów pobierania tych produktów dla określonego dostawcy wykonano przez wywołanie ProductsBLL metody klasy GetProductsBySupplierID(supplierID) . Wartość parametru została określona supplierID deklaratywnie przy użyciu ciągu zapytania jako źródła parametrów. Przyjrzeliśmy się również, jak wyświetlić szczegóły dostawcy na stronie szczegółów przy użyciu kontrolki FormView.
Nasz następny samouczek jest ostatnim w raportach master/detail. Przyjrzymy się, jak wyświetlić listę produktów w elemecie 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 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.
Specjalne podziękowania
Ta seria samouczków została sprawdzona przez wielu pomocnych recenzentów. Główny recenzent tego samouczka to Hilton Giesenow. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi wiersz pod adresem mitchell@4GuysFromRolla.com.