Korzystanie z szablonów kontrolki FormView (C#)

Autor : Scott Mitchell

Pobierz plik PDF

W przeciwieństwie do kontrolki DetailsView, kontrolka FormView nie składa się z pól. Zamiast tego widok FormView jest renderowany przy użyciu szablonów. W tym samouczku zbadamy użycie kontrolki FormView, aby przedstawić mniej sztywne przedstawienie danych.

Wprowadzenie

W dwóch ostatnich samouczkach pokazano, jak dostosować dane wyjściowe kontrolki GridView i DetailsView przy użyciu pól szablonów. Pola szablonów umożliwiają dostosowanie zawartości określonego pola, ale na końcu zarówno GridView, jak i DetailsView mają raczej pudełkowaty, przypominający siatkę wygląd. W wielu scenariuszach taki układ przypominający siatkę jest idealny, ale czasami bardziej płynny, mniej sztywny wyświetlacz jest potrzebny. Podczas wyświetlania pojedynczego rekordu taki płynny układ jest możliwy przy użyciu kontrolki FormView.

W przeciwieństwie do kontrolki DetailsView, kontrolka FormView nie składa się z pól. Nie można dodać pola BoundField lub TemplateField do obiektu FormView. Zamiast tego widok FormView jest renderowany przy użyciu szablonów. Obiekt FormView można traktować jako kontrolkę DetailsView zawierającą pojedynczy element TemplateField. Element FormView obsługuje następujące szablony:

• ItemTemplate służy do renderowania określonego rekordu wyświetlanego w widoku FormView
• HeaderTemplate służy do określania opcjonalnego wiersza nagłówka
• FooterTemplate służy do określania opcjonalnego wiersza stopki
• EmptyDataTemplate gdy element FormView DataSource nie ma żadnych rekordów, EmptyDataTemplate element jest używany zamiast ItemTemplate elementu do renderowania znaczników kontrolki
• PagerTemplate można użyć do dostosowania interfejsu stronicowania dla widoków FormView, które mają włączone stronicowanie
• EditItemTemplate / InsertItemTemplate służy do dostosowywania interfejsu edycji lub interfejsu wstawiania dla elementów FormView, które obsługują takie funkcje

W tym samouczku przeanalizujemy użycie kontrolki FormView, aby zaprezentować mniej sztywną prezentację produktów. Zamiast zawierać pola dla nazwy, kategorii, dostawcy itd., kontrolka ItemTemplate FormView pokaże te wartości przy użyciu kombinacji elementu nagłówka i elementu <table> (zobacz Rysunek 1).

Rysunek 1: Widok Formularza wychodzi poza układ Grid-Like widoczny w Szczegółach (Kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 1. Powiązanie danych z kontrolką FormView

Otwórz stronę FormView.aspx i przeciągnij FormView z Toolboxu do projektanta. Podczas pierwszego dodawania elementu FormView jest on wyświetlany jako szare pole, instruując nas, że wymagane jest dodanie ItemTemplate.

Rysunek 2. Widok formularza nie może być renderowany w projektancie do momentu podania elementu ItemTemplate (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Element ItemTemplate można utworzyć ręcznie (za pomocą składni deklaratywnej) lub można go automatycznie utworzyć przez powiązanie elementu FormView z kontrolką źródła danych za pomocą projektanta. Ten element automatycznie utworzony ItemTemplate zawiera kod HTML, który zawiera listę nazw każdego pola oraz kontrolkę Etykieta, której właściwość Text jest powiązana z wartością pola. Takie podejście powoduje również automatyczne utworzenie obiektu InsertItemTemplate i EditItemTemplate, z których oba są wypełniane kontrolkami wejściowymi dla każdego pola danych zwracanego przez kontrolę źródła danych.

Jeśli chcesz automatycznie utworzyć szablon, z inteligentnego tagu FormView dodaj nową kontrolkę ObjectDataSource, która wywołuje metodę klasy ProductsBLLGetProducts(). Spowoduje to utworzenie obiektu FormView z elementem ItemTemplate, InsertItemTemplatei EditItemTemplate. W widoku Źródło usuń InsertItemTemplate i EditItemTemplate, ponieważ nie planujemy jeszcze tworzenia FormView, które obsługuje edytowanie lub wstawianie. Następnie wyczyść znaczniki w ItemTemplate tak, abyśmy mieli czystą tablicę do dalszej pracy.

Jeśli wolisz utworzyć ItemTemplate ręcznie, możesz dodać i skonfigurować obiekt ObjectDataSource, przeciągając go z przybornika do projektanta. Nie należy jednak ustawiać źródła danych elementu FormView za pomocą projektanta. Zamiast tego przejdź do widoku Źródła i ręcznie ustaw właściwość DataSourceID FormView na wartość ID obiektu ObjectDataSource. Następnie ręcznie dodaj element ItemTemplate.

Niezależnie od tego, jakie podejście wybrałeś, w tym momencie deklaratywny znacznik FormView powinien wyglądać następująco:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

Poświęć chwilę, aby zaznaczyć pole wyboru Włącz stronicowanie w inteligentnym tagu kontrolki FormView; spowoduje to dodanie atrybutu AllowPaging="True" do składni deklaratywnej elementu FormView. Ustaw wartość właściwości EnableViewState na False.

Krok 2: Zdefiniowanie znacznika dla ItemTemplate

Za pomocą kontrolki FormView powiązanej z kontrolką ObjectDataSource i skonfigurowanej do obsługi stronicowania możemy określić zawartość elementu ItemTemplate. Na potrzeby tego samouczka umieścimy nazwę produktu w nagłówku <h3>. Następnie użyjemy kodu HTML <table> , aby wyświetlić pozostałe właściwości produktu w tabeli z czterema kolumnami, w której pierwsze i trzecie kolumny zawierają nazwy właściwości, a druga i czwarta lista ich wartości.

Ten znacznik można wprowadzić za pomocą interfejsu edycji szablonu FormView w narzędziu projektanta lub ręcznie poprzez składnię deklaratywną. Podczas pracy z szablonami zwykle łatwiej jest pracować bezpośrednio ze składnią deklaracyjną, ale możesz użyć dowolnej techniki, z którą najlepiej się czujesz.

Poniższy znacznik pokazuje deklaratywny znacznik FormView po zakończeniu struktury ItemTemplate.

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <hr />
        <h3><%# Eval("ProductName") %></h3>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("CategoryName") %></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("SupplierName")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Price:</td>
                <td class="ProductPropertyValue"><%# Eval("UnitPrice",
                  "{0:C}") %></td>
                <td class="ProductPropertyLabel">Units In Stock:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsInStock")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Units On Order:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsOnOrder") %></td>
                <td class="ProductPropertyLabel">Reorder Level:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("ReorderLevel")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit</td>
                <td class="ProductPropertyValue">
                  <%# Eval("QuantityPerUnit") %></td>
                <td class="ProductPropertyLabel">Discontinued:</td>
                <td class="ProductPropertyValue">
                    <asp:CheckBox runat="server" Enabled="false"
                      Checked='<%# Eval("Discontinued") %>' />
                </td>
            </tr>
        </table>
        <hr />
    </ItemTemplate>
</asp:FormView>

Zwróć uwagę, że składnia powiązania danych, np. <%# Eval("ProductName") %>, może zostać wstrzyknięta bezpośrednio do wyników szablonu. Oznacza to, że nie ma potrzeby przypisywania jej do właściwości kontrolki Etykieta Text. Na przykład mamy wartość wyświetlaną ProductName w elemecie <h3> przy użyciu elementu <h3><%# Eval("ProductName") %></h3>, który dla produktu Chai będzie renderowany jako <h3>Chai</h3>.

Klasy ProductPropertyLabel i ProductPropertyValue CSS służą do określania stylu nazw i wartości właściwości produktu w obiekcie <table>. Te klasy CSS są zdefiniowane w Styles.css, powodują, że nazwy właściwości są pogrubione i wyrównane do prawej, oraz dodają prawy odstęp do wartości właściwości.

Ponieważ w widoku FormView nie ma dostępnych pól wyboru, aby wyświetlić wartość Discontinued jako pole wyboru, musimy dodać własną kontrolkę typu CheckBox. Właściwość Enabled jest ustawiona na wartość False, co spowoduje, że jest tylko do odczytu, a właściwość CheckBox Checked jest powiązana z wartością Discontinued pola danych.

Po ukończeniu ItemTemplate informacje o produkcie są wyświetlane w znacznie bardziej płynny sposób. Porównaj dane wyjściowe kontrolki DetailsView z ostatniego samouczka (Rysunek 3) z danymi wyjściowymi wygenerowanymi przez element FormView w tym samouczku (Rysunek 4).

Rysunek 3. Dane wyjściowe sztywnego widoku szczegółów (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rysunek 4. Dane wyjściowe funkcji Fluid FormView (kliknij, aby wyświetlić obraz pełnowymiarowy)

Podsumowanie

Kontrolki GridView i DetailsView mogą mieć swój wynik dostosowany przy użyciu pól TemplateFields, ale oba te elementy nadal prezentują swoje dane w formacie przypominającym siatkę, prostokątny. W takich przypadkach, gdy pojedynczy rekord musi być wyświetlany przy użyciu mniej sztywnego układu, widok FormView jest idealnym wyborem. Podobnie jak kontrolka DetailsView, kontrolka FormView renderuje pojedynczy rekord z elementu DataSource, ale w przeciwieństwie do kontrolki DetailsView składa się tylko z szablonów i nie obsługuje pól.

Jak zobaczyliśmy w tym samouczku, FormView pozwala na bardziej elastyczne dostosowanie układu podczas wyświetlania pojedynczego rekordu. W przyszłych samouczkach przeanalizujemy kontrolki DataList i Repeater, które zapewniają taki sam poziom elastyczności jak Kontrolka FormsView, ale są w stanie wyświetlić wiele rekordów (takich jak GridView).

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 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 był E.R. Gilmore. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, napisz do mnie na adres mitchell@4GuysFromRolla.com.

PoprzedniNastępny