Widok główny/szczegółowy z możliwością wyboru rekordu głównego w kontrolce GridView i szczegółowego w kontrolce DetailView (C#)

Autor: Scott Mitchell

Pobierz plik PDF

Ten samouczek będzie zawierać kontrolkę GridView, której wiersze zawierają nazwę i cenę każdego produktu wraz z przyciskiem Wybierz. Kliknięcie przycisku Wybierz dla określonego produktu spowoduje wyświetlenie jego pełnych szczegółów w kontrolce DetailsView na tej samej stronie.

Wprowadzenie

W poprzednim samouczku pokazano, jak utworzyć raport nadrzędny/szczegółowy przy użyciu dwóch stron internetowych: strony nadrzędnej, z której wyświetliliśmy listę dostawców, oraz strony szczegółów, która wymieniła te produkty dostarczone przez wybranego dostawcę. Ten format raportu na dwie strony można skondensować na jedną stronę. Ten samouczek będzie miał GridView, którego wiersze zawierają nazwę i cenę każdego produktu wraz z przyciskiem Wybierz. Kliknięcie przycisku Wybierz dla określonego produktu spowoduje wyświetlenie jego pełnych szczegółów w kontrolce DetailsView na tej samej stronie.

Rysunek 1. Kliknięcie przycisku Wybierz wyświetla szczegóły produktu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 1. Tworzenie wybieralnego GridView

Pamiętaj, że w dwustronicowym raporcie typu master/details każdy główny rekord zawierał hiperłącze, które po kliknięciu przenosiło użytkownika na stronę szczegółów, przekazując wartość klikniętego wiersza SupplierID w parametrach zapytania. Takie hiperłącze zostało dodane do każdego wiersza GridView przy użyciu pola HyperLinkField. W przypadku pojedynczego raportu typu "mistrz/szczegóły" będziemy potrzebowali przycisku dla każdego wiersza GridView, który po kliknięciu wyświetli szczegóły. Kontrolkę GridView można skonfigurować tak, aby zawierała przycisk Wybierz dla każdego wiersza, który wywołuje zwrot danych i oznacza ten wiersz jako SelectedRow kontrolki GridView.

Zacznij od dodania kontrolki GridView do DetailsBySelecting.aspx strony w Filtering folderze, ustawiając jej ID właściwość na ProductsGrid. Następnie dodaj nowy ObjectDataSource o nazwie AllProductsDataSource, który wywołuje metodę GetProducts() klasy ProductsBLL.

Rysunek 2. Tworzenie obiektuDataSource o nazwie AllProductsDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 3. Użycie ProductsBLL klasy (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rysunek 4. Konfigurowanie obiektu ObjectDataSource w celu wywołania GetProducts() metody (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Edytuj pola kontrolki GridView, usuwając wszystkie z wyjątkiem ProductName i UnitPrice BoundFields. Ponadto możesz dostosować te BoundFields według potrzeb, na przykład formatując UnitPrice jako walutę i zmieniając HeaderText właściwości tych pól. Te kroki można wykonać graficznie, klikając link Edytuj kolumny z tagu inteligentnego GridView lub ręcznie konfigurując składnię deklaratywną.

Rysunek 5: Usuń wszystkie pola oprócz pól ProductName i UnitPrice BoundFields (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Ostateczna definicja dla kontrolki GridView to:

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Następnie musimy oznaczyć element GridView jako możliwy do wybrania, co spowoduje dodanie przycisku Wybierz do każdego wiersza. Aby to osiągnąć, wystarczy zaznaczyć pole wyboru Włącz zaznaczenie w tagu inteligentnym GridView.

Rysunek 6: Umożliwienie wybierania wierszy w kontrolce GridView (Kliknij tutaj, aby wyświetlić obraz w pełnym rozmiarze)

Zaznaczenie opcji Włącz opcję zaznaczania powoduje dodanie pola polecenia do kontrolki ProductsGrid GridView, której właściwość ustawiono na True. Spowoduje to wyświetlenie przycisku Wybierz dla każdego wiersza w GridView, jak ilustruje to rysunek 6. Domyślnie przyciski Select są renderowane jako LinkButtons, ale zamiast tego można użyć przycisków lub imageButtons za pomocą właściwości CommandField ButtonType .

<asp:GridView ID="ProductsGrid" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
          HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Po kliknięciu przycisku Select w wierszu kontrolki GridView następuje postback, a właściwość SelectedRow jest aktualizowana. Oprócz SelectedRow właściwości kontrolka GridView udostępnia właściwości SelectedIndex, SelectedValue i SelectedDataKey . Właściwość SelectedIndex zwraca indeks wybranego wiersza, natomiast właściwości SelectedValue i SelectedDataKey zwracają wartości na podstawie właściwości DataKeyNames: GridView.

Właściwość DataKeyNames służy do kojarzenia co najmniej jednej wartości pola danych z każdym wierszem i często służy do unikatowego przypisania informacji z danych źródłowych z każdym wierszem GridView. Właściwość SelectedValue zwraca wartość pierwszego DataKeyNames pola danych dla wybranego wiersza, w którym SelectedDataKey właściwość zwraca obiekt wybranego wiersza DataKey , który zawiera wszystkie wartości dla określonych pól klucza danych dla tego wiersza.

Właściwość DataKeyNames jest automatycznie ustawiana na pola danych jednoznacznie identyfikujące podczas wiązania źródła danych z kontrolką GridView, DetailsView lub FormView za pomocą Projektanta. Chociaż ten atrybut został ustawiony automatycznie w poprzednich samouczkach, przykłady działałyby poprawnie nawet bez określenia tego atrybutu DataKeyNames. Jednak w przypadku wybieralnego obiektu GridView w tym samouczku, a także dla przyszłych samouczków, w których będziemy omawiać wstawianie, aktualizowanie i usuwanie, DataKeyNames właściwość musi zostać prawidłowo ustawiona. Poświęć chwilę, aby upewnić się, że właściwość DataKeyNames w GridView jest ustawiona na ProductID.

Przyjrzyjmy się postępowi do tej pory za pośrednictwem przeglądarki. Zwróć uwagę, że kontrolka GridView zawiera nazwę i cenę wszystkich produktów wraz z elementem Select LinkButton. Kliknięcie przycisku Wybierz powoduje odświeżenie strony. W kroku 2 zobaczymy, jak element DetailsView odpowiada na ten postback, wyświetlając szczegóły wybranego produktu.

Rysunek 7. Każdy wiersz produktu zawiera element Select LinkButton (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Wyróżnianie zaznaczonego wiersza

Kontrolka ProductsGrid GridView ma SelectedRowStyle właściwość, która może służyć do określania stylu wizualizacji dla wybranego wiersza. Poprawnie używany, może to poprawić doświadczenie użytkownika, wyraźniej pokazując, który wiersz GridView jest obecnie zaznaczony. W tym samouczku sprawmy, aby wybrany wiersz był wyróżniony żółtym tłem.

Podobnie jak w przypadku naszych wcześniejszych samouczków, starajmy się zachować ustawienia związane z estetyką zdefiniowane jako klasy CSS. W związku z tym utwórz nową klasę CSS o Styles.css nazwie SelectedRowStyle.

.SelectedRowStyle
{
    background-color: Yellow;
}

Aby zastosować tę klasę CSS do SelectedRowStyle właściwości wszystkich elementów GridView w naszej serii tutoriali, zmodyfikuj GridView.skin Skin w DataWebControls motywie, aby uwzględnić SelectedRowStyle ustawienia, jak pokazano poniżej:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

Po dodaniu zaznaczony wiersz GridView jest teraz wyróżniony żółtym kolorem tła.

Rysunek 8. Dostosowywanie wyglądu wybranego wiersza przy użyciu właściwości GridView SelectedRowStyle (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 2. Wyświetlanie szczegółów wybranego produktu w widoku DetailsView

Po zakończeniu kontrolki ProductsGrid GridView wystarczy dodać element DetailsView, który wyświetla informacje o wybranym produkcie. Dodaj kontrolkę DetailsView nad kontrolką GridView i utwórz nowy obiekt ObjectDataSource o nazwie ProductDetailsDataSource. Ponieważ chcemy, aby ten element DetailsView wyświetlał określone informacje o wybranym produkcie, skonfiguruj ProductDetailsDataSource do użycia metody GetProductByProductID(productID) klasy ProductsBLL.

Rysunek 9. Wywoływanie ProductsBLL metody klasy GetProductByProductID(productID) (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Mieć wartość parametru productID uzyskaną z właściwości kontrolki SelectedValue GridView. Jak wspomniano wcześniej, właściwość GridView SelectedValue zwraca pierwszą wartość klucza danych dla wybranego wiersza. Dlatego konieczne jest, aby właściwość GridView DataKeyNames została ustawiona na ProductID, aby wartość wybranego wiersza ProductID była zwracana przez SelectedValue.

Rysunek 10. Ustaw productID parametr na właściwość GridView SelectedValue (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Po poprawnym skonfigurowaniu productDetailsDataSource obiektu ObjectDataSource i powiązaniu z elementem DetailsView ten samouczek zostanie ukończony. Po pierwszym odwiedzeniu strony nie wybrano żadnego wiersza, więc właściwość GridView SelectedValue zwraca wartość null. Ponieważ nie ma żadnych produktów z wartością NULLProductID, żadne rekordy nie są zwracane przez metodę GetProductByProductID(productID), co oznacza, że widok DetailsView nie jest wyświetlany (zobacz Rysunek 11). Po kliknięciu przycisku Select wiersza GridView następuje odświeżenie strony i odświeżenie elementu DetailsView. Tym razem właściwość GridView SelectedValue zwraca ProductID wartość wybranego wiersza, GetProductByProductID(productID) metoda zwraca ProductsDataTable obiekt z informacjami o tym konkretnym produkcie, a element DetailsView wyświetla te szczegóły (zobacz Rysunek 12).

Rysunek 11. Po pierwszym odwiedzeniu wyświetlany jest tylko widok GridView (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 12. Po wybraniu wiersza wyświetlane są szczegóły produktu (kliknij, aby wyświetlić obraz pełnowymiarowy)

Podsumowanie

W tych i w poprzednich trzech samouczkach przedstawiliśmy wiele technik wyświetlania raportów głównych/szczegółowych. W tym samouczku przeanalizowaliśmy użycie selektywnego GridView do umieszczania rekordów głównych oraz DetailsView do wyświetlania szczegółów dotyczących wybranego rekordu głównego na tej samej stronie. W wcześniejszych samouczkach omówiliśmy sposób wyświetlania raportów wzorców/szczegółów przy użyciu list rozwijanych i wyświetlania rekordów wzorcowych na jednej stronie internetowej i rekordów szczegółowych na innej.

Ten samouczek zamyka nasze badanie raportów głównych/szczegółowych. Począwszy od następnego samouczka rozpoczniemy eksplorację niestandardowego formatowania przy użyciu kontrolki GridView, DetailsView i FormView. Zobaczymy, jak dostosować wygląd tych kontrolek na podstawie powiązanych danych, jak podsumować dane w stopce kontrolki GridView oraz jak za pomocą szablonów uzyskać większy stopień kontroli nad układem.

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 24 godzinach. Można go uzyskać pod adresem mitchell@4GuysFromRolla.com.

Specjalne podziękowania

Ta seria samouczków została omówiona przez wielu przydatnych recenzentów. Główny recenzent tego samouczka to Hilton Giesenow. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, napisz do mnie na adres mitchell@4GuysFromRolla.com.