Verwenden der FormView-Vorlagen (VB)

von Scott Mitchell

PDF herunterladen

Im Gegensatz zu DetailsView besteht die FormView nicht aus Feldern. Stattdessen wird die FormView mithilfe von Vorlagen gerendert. In diesem Tutorial untersuchen wir die Verwendung des FormView-Steuerelements, um eine weniger starre Anzeige von Daten darzustellen.

Einführung

In den letzten beiden Tutorials haben wir erfahren, wie Sie die Ausgaben der GridView- und DetailsView-Steuerelemente mithilfe von TemplateFields anpassen. TemplateFields ermöglicht es, dass der Inhalt für ein bestimmtes Feld stark angepasst wird, aber am Ende haben sowohl GridView als auch DetailsView eine recht schachtelige, rasterähnliche Darstellung. Für viele Szenarien ist ein solches rasterähnliches Layout ideal, aber manchmal ist eine flüssigere, weniger starre Anzeige erforderlich. Beim Anzeigen eines einzelnen Datensatzes ist ein solches flüssiges Layout mit dem FormView-Steuerelement möglich.

Im Gegensatz zu DetailsView besteht die FormView nicht aus Feldern. Sie können einer FormView kein BoundField oder TemplateField hinzufügen. Stattdessen wird die FormView mithilfe von Vorlagen gerendert. Stellen Sie sich formView als Ein DetailsView-Steuerelement vor, das ein einzelnes TemplateField enthält. FormView unterstützt die folgenden Vorlagen:

• ItemTemplate wird verwendet, um den bestimmten Datensatz zu rendern, der in der FormView angezeigt wird.
• HeaderTemplate wird verwendet, um eine optionale Headerzeile anzugeben.
• FooterTemplate wird verwendet, um eine optionale Fußzeile anzugeben.
• EmptyDataTemplate wenn in der FormView DataSource keine Datensätze vorhanden sind, wird anstelle EmptyDataTemplate von zum Rendern des ItemTemplate Markups des Steuerelements verwendet.
• PagerTemplate kann verwendet werden, um die Pagingschnittstelle für FormViews anzupassen, für die paging aktiviert ist
• EditItemTemplate / InsertItemTemplate wird verwendet, um die Bearbeitungsschnittstelle oder die Einfügeschnittstelle für FormViews anzupassen, die solche Funktionen unterstützen

In diesem Tutorial untersuchen wir die Verwendung des FormView-Steuerelements, um eine weniger starre Anzeige von Produkten darzustellen. Anstelle von Feldern für den Namen, die Kategorie, den Lieferanten usw. werden diese Werte in formView ItemTemplate mithilfe einer Kombination aus einem Headerelement und einem <table> angezeigt (siehe Abbildung 1).

Abbildung 1: Die FormView bricht das Grid-Like Layout aus, das in Der DetailAnsicht angezeigt wird (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 1: Binden der Daten an formView

Öffnen Sie die FormView.aspx Seite, und ziehen Sie eine FormView aus der Toolbox auf die Designer. Wenn Sie die FormView zum ersten Mal hinzufügen, wird sie als graues Feld angezeigt, in dem sie uns anweist, dass eine ItemTemplate benötigt wird.

Abbildung 2: Die FormView kann nicht im Designer gerendert werden, bis ein ItemTemplate bereitgestellt wird (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

kann ItemTemplate manuell (über die deklarative Syntax) erstellt werden oder automatisch erstellt werden, indem formView über das Designer an ein Datenquellensteuerelement gebunden wird. Dieser automatisch erstellte ItemTemplate Code enthält HTML, der den Namen jedes Felds auflistet, und ein Label-Steuerelement, dessen Text Eigenschaft an den Wert des Felds gebunden ist. Dieser Ansatz erstellt auch automatisch ein InsertItemTemplate und EditItemTemplate, die beide mit Eingabesteuerelementen für jedes vom Datenquellensteuerelement zurückgegebene Datenfelder aufgefüllt werden.

Wenn Sie die Vorlage automatisch erstellen möchten, fügen Sie über das Smarttag von FormView ein neues ObjectDataSource-Steuerelement hinzu, das die -Methode der ProductsBLL Klasse GetProducts() aufruft. Dadurch wird eine FormView mit , ItemTemplateInsertItemTemplateund EditItemTemplateerstellt. Entfernen Sie aus der Quellansicht das InsertItemTemplate und EditItemTemplate , da wir nicht daran interessiert sind, eine FormView zu erstellen, die das Bearbeiten oder Einfügen noch unterstützt. Löschen Sie als Nächstes das Markup innerhalb vonItemTemplate, damit eine sauber Slate verwendet werden kann.

Wenn Sie den ItemTemplate manuell erstellen möchten, können Sie objectDataSource hinzufügen und konfigurieren, indem Sie sie aus der Toolbox auf die Designer ziehen. Legen Sie jedoch nicht die Datenquelle von FormView aus dem Designer fest. Wechseln Sie stattdessen zur Quellansicht, und legen Sie die FormView-Eigenschaft DataSourceID manuell auf den ID Wert der ObjectDataSource fest. Fügen Sie als Nächstes manuell hinzu ItemTemplate.

Unabhängig davon, für welchen Ansatz Sie sich entschieden haben, sollte das deklarative Markup Von FormView an diesem Punkt wie folgt aussehen:

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

    </ItemTemplate>
</asp:FormView>

Nehmen Sie sich einen Moment Zeit, um das Kontrollkästchen Paging aktivieren im Smarttag von FormView zu aktivieren. Dadurch wird das AllowPaging="True" Attribut der deklarativen Syntax von FormView hinzugefügt. Legen Sie außerdem die EnableViewState -Eigenschaft auf False fest.

Schritt 2: Definieren desItemTemplate Markups

Da die FormView an das ObjectDataSource-Steuerelement gebunden und für die Unterstützung von Paging konfiguriert ist, können wir den Inhalt für angeben ItemTemplate. In diesem Tutorial wird der Name des Produkts in einer <h3> Überschrift angezeigt. Anschließend verwenden wir einen HTML-Code <table> , um die verbleibenden Produkteigenschaften in einer vierspaltigen Tabelle anzuzeigen, in der die erste und dritte Spalte die Eigenschaftennamen und die zweite und vierte Spalte ihre Werte auflisten.

Dieses Markup kann über die Bearbeitungsoberfläche für Vorlagen von FormView im Designer eingegeben oder manuell über die deklarative Syntax eingegeben werden. Wenn Ich mit Vorlagen arbeite, finde ich es in der Regel schneller, direkt mit der deklarativen Syntax zu arbeiten, aber ich fühle mich frei, jede Technik zu verwenden, mit der Sie am besten vertraut sind.

Das folgende Markup zeigt das deklarative FormView-Markup, nachdem die ItemTemplate-Struktur von abgeschlossen wurde:

<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>

Beachten Sie, dass die Datenbindungssyntax – <%# Eval("ProductName") %>z. B. direkt in die Ausgabe der Vorlage eingefügt werden kann. Das heißt, es muss nicht der Eigenschaft eines Label-Steuerelements Text zugewiesen werden. Beispielsweise wird der ProductName Wert in einem <h3> -Element mit <h3><%# Eval("ProductName") %></h3>angezeigt, das für das Produkt Chai als <h3>Chai</h3>gerendert wird.

Die ProductPropertyLabel CSS-Klassen und ProductPropertyValue werden verwendet, um den Stil der Produkteigenschaftennamen und -werte im <table>anzugeben. Diese CSS-Klassen sind in Styles.css definiert und bewirken, dass die Eigenschaftennamen fett und rechtsbündig sind und den Eigenschaftswerten einen rechten Abstand hinzufügen.

Da in FormView keine CheckBoxFields verfügbar sind, müssen wir ein eigenes CheckBox-Steuerelement hinzufügen, um den Discontinued Wert als Kontrollkästchen anzuzeigen. Die Enabled Eigenschaft wird auf False festgelegt, sodass sie schreibgeschützt ist, und die CheckBox-Eigenschaft Checked ist an den Wert des Discontinued Datenfelds gebunden.

Mit dem ItemTemplate vollständigen werden die Produktinformationen wesentlich flüssiger dargestellt. Vergleichen Sie die DetailsView-Ausgabe aus dem letzten Tutorial (Abbildung 3) mit der Ausgabe, die von FormView in diesem Tutorial generiert wurde (Abbildung 4).

Abbildung 3: Die Starre DetailAnsicht-Ausgabe (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 4: Die Fluid FormView-Ausgabe (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

Während die GridView- und DetailsView-Steuerelemente ihre Ausgabe mithilfe von TemplateFields anpassen können, präsentieren beide ihre Daten weiterhin in einem rasterartigen, schachteligen Format. Für Die Zeiten, in denen ein einzelner Datensatz mit einem weniger starren Layout angezeigt werden muss, ist FormView eine ideale Wahl. Wie die DetailsView rendert formView einen einzelnen Datensatz aus seinem DataSource, aber im Gegensatz zu DetailsView besteht es nur aus Vorlagen und unterstützt keine Felder.

Wie in diesem Tutorial gezeigt, ermöglicht FormView ein flexibleres Layout beim Anzeigen eines einzelnen Datensatzes. In zukünftigen Tutorials werden die DataList- und Repeater-Steuerelemente untersucht, die das gleiche Maß an Flexibilität wie FormsView bieten, aber mehrere Datensätze (z. B. GridView) anzeigen können.

Viel Spaß beim Programmieren!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Besonderer Dank an

Diese Tutorialreihe wurde von vielen hilfreichen Prüfern überprüft. Leitender Prüfer für dieses Tutorial war E.R. Gilmore. Möchten Sie meine bevorstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.

ZurückWeiter