Formularz typu rekord główny/szczegóły korzystający z kontrolki GridView umożliwiającej wybór rekordu głównego z kontrolką DetailView szczegółów (C#)

Autor: Scott Mitchell

Pobierz plik PDF

Ten samouczek zawiera element 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 pełnych szczegółów w kontrolce DetailsView na tej samej stronie.

Wprowadzenie

W poprzednim samouczku pokazano, jak utworzyć raport główny/szczegółowy przy użyciu dwóch stron internetowych: strony internetowej "wzorcowej", z której wyświetliliśmy listę dostawców; i "szczegóły" strony internetowej, która wymieniła te produkty dostarczone przez wybranego dostawcę. Ten dwustronicowy format raportu można skondensować na jedną stronę. Ten samouczek zawiera element 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 pełnych szczegółów w kontrolce DetailsView na tej samej stronie.

Rysunek 1. Kliknięcie przycisku Wybierz powoduje wyświetlenie szczegółów produktu (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 1. Tworzenie selektora GridView

Pamiętaj, że w raporcie wzorca/szczegółów strony każdy rekord główny zawierał hiperlink, który po kliknięciu wysłał użytkownika do strony szczegółów przekazującej wartość klikniętego wiersza SupplierID w ciągu zapytania. Takie hiperłącze zostało dodane do każdego wiersza GridView przy użyciu funkcji HyperLinkField. W przypadku raportu wzorca/szczegółów pojedynczej strony będziemy potrzebować przycisku dla każdego wiersza Kontrolka GridView, który po kliknięciu będzie zawierać szczegóły. Kontrolkę GridView można skonfigurować tak, aby zawierała przycisk Wybierz dla każdego wiersza, który powoduje powrót i oznacza ten wiersz jako Element SelectedRow elementu 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 obiekt ObjectDataSource o nazwie AllProductsDataSource , który wywołuje metodę ProductsBLL klasy GetProducts() .

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

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

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

Edytuj pola kontrolki GridView, usuwając wszystkie pola z polami ProductName i UnitPrice BoundFields. Ponadto możesz dostosować te pola granic zgodnie z potrzebami, takie jak formatowanie UnitPrice pola BoundField jako waluty i zmienianie HeaderText właściwości Pola Granic. 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 ale i ProductNameUnitPrice BoundFields (Kliknij, aby wyświetlić obraz pełnowymiarowy)

Ostateczny znacznik 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ąć, zaznacz pole wyboru Włącz zaznaczenie w tagu inteligentnym GridView.

Rysunek 6. Wybierz wiersze kontrolki GridView (kliknij, aby wyświetlić obraz pełnowymiarowy)

Sprawdzanie opcji Włączanie zaznaczenia powoduje dodanie pola polecenia do kontrolki ProductsGrid GridView z jej ShowSelectButton właściwością ustawioną na true. Spowoduje to wyświetlenie przycisku Wybierz dla każdego wiersza elementu GridView, jak pokazano na rysunku 6. Domyślnie przyciski Select są renderowane jako LinkButtons, ale można użyć przycisków lub imageButtons zamiast tego 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 (Wybieranie) wiersza kontrolki GridView następuje powrót, a właściwość GridView SelectedRow jest aktualizowana. Oprócz właściwości kontrolka SelectedRow GridView udostępnia właściwości SelectedIndex, SelectedValue i SelectedDataKey. Właściwość SelectedIndex zwraca indeks wybranego wiersza, natomiast SelectedValue właściwości i SelectedDataKey zwracają wartości na podstawie właściwości DataKeyNames elementu GridView.

Właściwość DataKeyNames służy do kojarzenia co najmniej jednej wartości pola danych z każdym wierszem i jest często używana do atrybutu unikatowego identyfikowania informacji z danych bazowych 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 unikatowo identyfikujące pola danych podczas powiązania źródła danych z elementem GridView, DetailsView lub FormView za pośrednictwem Projektant. Chociaż ta właściwość została ustawiona automatycznie w poprzednich samouczkach, przykłady działałyby bez DataKeyNames określonej właściwości. Jednak w przypadku wybranego elementu GridView w tym samouczku, a także dla przyszłych samouczków, w których będziemy badać wstawianie, aktualizowanie i usuwanie, DataKeyNames właściwość musi zostać prawidłowo ustawiona. Poświęć chwilę, aby upewnić się, że właściwość GridView jest ustawiona DataKeyNames na ProductID.

Przyjrzyjmy się postępowi do tej pory za pośrednictwem przeglądarki. Zwróć uwagę, że element GridView zawiera nazwę i cenę wszystkich produktów wraz z elementem Select LinkButton. Kliknięcie przycisku Wybierz powoduje powrót. 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 przycisk Select LinkButton (Kliknij, aby wyświetlić obraz pełnowymiarowy)

Wyróżnianie zaznaczonego wiersza

Obiekt ProductsGrid GridView ma SelectedRowStyle właściwość, która może służyć do dyktowania stylu wizualizacji dla wybranego wiersza. Prawidłowo używane może to poprawić środowisko użytkownika, wyraźniej pokazując, który wiersz kontrolki GridView jest aktualnie zaznaczony. W tym samouczku wyróżniono wybrany wiersz żół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 samouczków, zmodyfikuj GridView.skin skórę 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 wybrany 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 elementu ProductsGrid GridView wystarczy dodać element DetailsView, który wyświetla informacje o wybranym produkcie. Dodaj kontrolkę DetailsView nad kontrolką GridView i utwórz nową wartość ObjectDataSource o nazwie ProductDetailsDataSource. Ponieważ chcemy, aby ten element DetailsView wyświetlał określone informacje o wybranym produkcie, skonfiguruj ProductDetailsDataSource metodę ProductsBLL , aby korzystała GetProductByProductID(productID) z metody klasy.

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

Wartość parametru productID uzyskana 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 ProductIDwartość , aby wartość wybranego wiersza ProductID była zwracana przez wartość SelectedValue.

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

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

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

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

Podsumowanie

W tym i poprzednich trzech samouczkach widzieliśmy wiele technik wyświetlania raportów wzorca/szczegółów. W tym samouczku przeanalizowaliśmy użycie selektora GridView do stosowania rekordów głównych i elementu DetailsView w celu wyświetlenia szczegółów dotyczących wybranego rekordu głównego na tej samej stronie. We wcześniejszych samouczkach przyjrzeliśmy się sposobom wyświetlania raportów wzorca/szczegółów przy użyciu list Rozwijanych i wyświetlania rekordów wzorcowych na jednej stronie internetowej i szczegółowych rekordów na innej.

Ten samouczek kończy 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 usługi 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 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 przejrzyona przez wielu przydatnych recenzentów. Głównym recenzentem tego samouczka był Hilton Giesenow. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi wiersz pod adresemmitchell@4GuysFromRolla.com .

WsteczDalej