Filtrowanie wzorca/szczegółów na dwóch stronach za pomocą kontrolki GridView (VB)
Autor : Scott Mitchell
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 elementy 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 przedstawiono sposób wyświetlania raportów wzorca/szczegółów na jednej stronie internetowej przy użyciu funkcji DropDownLists w celu wyświetlenia rekordów "master" i kontrolki GridView lub DetailsView w celu wyświetlenia "szczegółów". Innym typowym wzorcem używanym w raportach wzorca/szczegółów jest posiadanie rekordów głównych na jednej stronie internetowej i szczegółów wyświetlanych na innej stronie. Witryna forum, podobnie 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, kontrolek 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 są wyświetlane fora. Kliknięcie forum powoduje ShowForum.aspx wyświetlenie strony zawierającej 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 elementy 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.aspxstron iProductsForSupplierDetails.aspxdoFilteringfolderu
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ę na dodanie dwóch nowych stron do Filtering folderu: SupplierListMaster.aspx i ProductsForSupplierDetails.aspx. SupplierListMaster.aspx wyświetli listę rekordów "master" (dostawców), a produkty ProductsForSupplierDetails.aspx dla wybranego dostawcy będą wyświetlane.
Podczas tworzenia tych dwóch nowych stron należy mieć pewność, że zostaną one skojarzone 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 W tym samouczku SupplierListMaster.aspx wystarczy dodać stronę do mapy witryny przy użyciu następującej zawartości XML jako elementu podrzędnego elementu Filtrowanie raportów <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 obiektu GridView dostawców w usłudze SupplierListMaster.aspx. Dodaj element GridView do strony i powiąż go z nowym obiektem ObjectDataSource. Ta klasa ObjectDataSource powinna użyć SuppliersBLL metody , GetSuppliers() aby zwrócić wszystkich dostawców.
Rysunek 2. Wybieranie SuppliersBLL klasy (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 3. Konfigurowanie obiektu ObjectDataSource do użycia GetSuppliers() metody (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Musimy dołączyć link zatytułowany Wyświetl produkty w każdym wierszu Kontrolka GridView, który po kliknięciu przenosi użytkownika do ProductsForSupplierDetails.aspx przekazania wartości wybranego wiersza SupplierID za pośrednictwem 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=4
Aby to zrobić, dodaj obiekt HyperLinkField do kontrolki GridView, która dodaje hiperlink do każdego wiersza kontrolki GridView. Zacznij od kliknięcia linku Edytuj kolumny z tagu inteligentnego GridView. Następnie wybierz pole 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 obiektu HyperLinkField do kontrolki GridView (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Obiekt HyperLinkField można skonfigurować tak, aby używał tego samego tekstu lub wartości adresu URL linku w każdym wierszu kontrolki 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 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świetlanie produktów (kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Aby ustawić tekst lub wartości adresu URL, które mają być oparte na danych bazowych powiązanych z wierszem GridView, określ pola danych, z których mają być pobierane wartości tekstu lub adresu URL, w 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 oprzeć 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 ProductsForSupplierDetails.aspx?SupplierID=supplierIDadres URL łączy funkcji HyperLinkField był adresem , gdzie supplierID jest wartością wiersza kontrolki SupplierID GridView. Zwróć uwagę, że w tym miejscu potrzebujemy wartości statycznych i opartych na danych: ProductsForSupplierDetails.aspx?SupplierID= część adresu URL łącza jest statyczna, natomiast część jest oparta na danych, ponieważ supplierID 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ź znaczniki statyczne zgodnie z potrzebami, a następnie użyj znacznika {0} , w którym ma być wyświetlana wartość pola określonego we właściwościach DataTextField 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.
Stosując tę wartość do naszego samouczka, musimy ustawić DataNavigateUrlFields właściwość 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}wartość .
Rysunek 6. Konfigurowanie pola HyperLinkField w celu uwzględnienia odpowiedniego adresu URL łącza na SupplierID podstawie elementu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Po dodaniu pola HyperLinkField możesz dostosować i zmienić kolejność pól kontrolki GridView. Poniższy znacznik przedstawia kontrolkę 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ę, 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 w pełnym rozmiarze)
Krok 3. Wyświetlanie listy produktów dostawcy w programieProductsForSupplierDetails.aspx
Na tym etapie SupplierListMaster.aspx strona wysyła użytkowników do ProductsForSupplierDetails.aspxelementu , przekazując wybranego dostawcę SupplierID w ciągu zapytania. Ostatnim krokiem samouczka jest wyświetlenie produktów w siatce GridView, w ProductsForSupplierDetails.aspx której SupplierID element jest taki sam SupplierID jak przekazany przez element querystring. 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 o nazwie ProductsBySupplierDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Rysunek 9. Wybieranie ProductsBLL klasy (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 10. Wywołaj metodę GetProductsBySupplierID(supplierID) ObjectDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
W ostatnim kroku kreatora Konfigurowania źródła danych zostanie wyświetlony monit o podanie źródła parametru GetProductsBySupplierID(supplierID)supplierID 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).
Rysunek 11. Wypełnianie wartości parametru supplierID wartością SupplierID ciągu zapytania (kliknij, aby wyświetlić obraz pełnowymiarowy)
To wszystko! Rysunek 12 przedstawia ProductsForSupplierDetails.aspx stronę po odwiedzeniu przez kliknięcie linku firmy Tokio Traders z witryny SupplierListMaster.aspx.
Rysunek 12. Wyświetlane są produkty dostarczone przez firmę Tokio 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 dostarczonych przez SupplierID element określony w ciągu zapytania. Ktoś wysłany bezpośrednio na tę stronę nie wiedziałby jednak, że rysunek 12 przedstawia produkty firmy Tokio Traders. Aby rozwiązać ten problem, możemy również wyświetlić informacje o dostawcy na tej stronie.
Zacznij od dodania kontrolki FormView powyżej produktów GridView. Utwórz nową kontrolkę ObjectDataSource o nazwie SuppliersDataSource , która wywołuje SuppliersBLL metodę GetSupplierBySupplierID(supplierID) klasy.
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 o pełnym rozmiarze)
Podobnie jak w przypadku parametru ProductsBySupplierDataSource, parametr ma supplierID przypisaną wartość SupplierID ciągu zapytania.
Rysunek 15. Wypełnianie wartości parametru supplierID wartością SupplierID ciągu zapytania (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po powiązaniu kontrolki FormView z obiektem ObjectDataSource w widoku projektu program Visual Studio automatycznie utworzy kontrolki ItemTemplateInsertItemTemplate, , i EditItemTemplate z kontrolkami Label i TextBox Web dla każdego pola danych zwróconego przez obiekt ObjectDataSource. Ponieważ chcemy po prostu wyświetlić informacje o dostawcy, możesz usunąć jednostki 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.