Verwenden von TemplateFields im DetailsView-Steuerelement (VB)

Artikel
07/13/2023

Die gleichen TemplateFields-Funktionen, die mit GridView verfügbar sind, sind auch mit dem DetailsView-Steuerelement verfügbar. In diesem Tutorial zeigen wir jeweils ein Produkt an, indem wir eine DetailsView verwenden, die TemplateFields enthält.

Einführung

Das TemplateField bietet ein höheres Maß an Flexibilität beim Rendern von Daten als boundField, CheckBoxField, HyperLinkField und andere Datenfeldsteuerelemente. Im vorherigen Tutorial haben wir die Verwendung von TemplateField in einer GridView für Folgendes untersucht:

Anzeigen mehrerer Datenfeldwerte in einer Spalte. Insbesondere wurden die FirstName Felder und LastName in einer GridView-Spalte kombiniert.
Verwenden Sie ein alternatives Websteuerelement, um einen Datenfeldwert auszudrücken. Wir haben gesehen, wie der HiredDate Wert mithilfe eines Calendar-Steuerelements angezeigt wird.
Zeigen Sie status Informationen basierend auf den zugrunde liegenden Daten an. Obwohl die Employees Tabelle keine Spalte enthält, die die Anzahl der Tage zurückgibt, die ein Mitarbeiter im Job war, konnten wir solche Informationen im GridView-Beispiel im vorherigen Tutorial mithilfe einer TemplateField- und Formatierungsmethode anzeigen.

Die gleichen TemplateFields-Funktionen, die mit GridView verfügbar sind, sind auch mit dem DetailsView-Steuerelement verfügbar. In diesem Tutorial zeigen wir jeweils ein Produkt mit einer DetailsView an, die zwei TemplateFields enthält. Das erste TemplateField kombiniert die UnitPriceDatenfelder , UnitsInStockund UnitsOnOrder in einer DetailView-Zeile. Das zweite TemplateField zeigt den Wert des Discontinued Felds an, verwendet jedoch eine Formatierungsmethode, um "JA" anzuzeigen, wenn TrueDiscontinued ist, und andernfalls "NO".

Abbildung 1: Zwei TemplateFields werden verwendet, um die Anzeige anzupassen (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Jetzt geht‘s los!

Schritt 1: Binden der Daten an detailsView

Wie im vorherigen Tutorial erläutert, ist es bei der Arbeit mit TemplateFields häufig am einfachsten, zunächst das DetailsView-Steuerelement zu erstellen, das nur BoundFields enthält, und dann neue TemplateFields hinzuzufügen oder die vorhandenen BoundFields nach Bedarf in TemplateFields zu konvertieren. Beginnen Sie daher dieses Tutorial, indem Sie der Seite über die Designer eine DetailsView hinzufügen und an eine ObjectDataSource binden, die die Liste der Produkte zurückgibt. Diese Schritte erstellen eine DetailsView mit BoundFields für jedes der nicht booleschen Wertfelder des Produkts und ein CheckBoxField für das boolesche Wertfeld (Nicht mehr verfügbar).

Öffnen Sie die DetailsViewTemplateField.aspx Seite, und ziehen Sie eine DetailsView aus der Toolbox auf die Designer. Wählen Sie im Smarttag von DetailsView aus, um ein neues ObjectDataSource-Steuerelement hinzuzufügen, das die -Methode der ProductsBLL -Klasse GetProducts() aufruft.

Abbildung 2: Hinzufügen eines neuen ObjectDataSource-Steuerelements, das die GetProducts() -Methode aufruft (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Entfernen Sie für diesen Bericht die ProductIDBoundFields , SupplierID, CategoryIDund ReorderLevel . Ordnen Sie als Nächstes die BoundFields neu an, sodass die CategoryName BoundFields und SupplierName die BoundFields unmittelbar nach dem ProductName BoundField angezeigt werden. Sie können die HeaderText Eigenschaften und Formatierungseigenschaften für die BoundFields nach Bedarf anpassen. Wie bei GridView können diese Änderungen auf BoundField-Ebene über das Dialogfeld Felder (durch Klicken auf den Link Felder im Smarttag von DetailsView) oder über die deklarative Syntax ausgeführt werden. Löschen Sie schließlich die Eigenschaftswerte Height von DetailsView und Width , damit das DetailsView-Steuerelement basierend auf den angezeigten Daten erweitert werden kann, und aktivieren Sie das Kontrollkästchen Paging aktivieren im Smarttag.

Nachdem Sie diese Änderungen vorgenommen haben, sollte das deklarative Markup Ihres DetailsView-Steuerelements in etwa wie folgt aussehen:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
          SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
          HeaderText="Units In Stock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder"
          HeaderText="Units On Order" SortExpression="UnitsOnOrder" />
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Nehmen Sie sich einen Moment Zeit, um die Seite über einen Browser anzuzeigen. An diesem Punkt sollte ein einzelnes Produkt (Chai) mit Zeilen angezeigt werden, die den Namen, die Kategorie, den Lieferanten, den Preis, die lagerigen Einheiten, die einheiten auf Bestellung und die nicht mehr verfügbaren status.

Abbildung 3: Die Produktdetails werden mithilfe einer Reihe von BoundFields angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 2: Kombinieren von Preis, Lagereinheiten und Einheiten auf Bestellung in einer Zeile

Die DetailsView enthält eine Zeile für die UnitPriceFelder , UnitsInStockund UnitsOnOrder . Wir können diese Datenfelder in einer einzelnen Zeile mit einem TemplateField kombinieren, indem sie entweder ein neues TemplateField hinzufügen oder eines der vorhandenen UnitPrice, UnitsInStockund UnitsOnOrder BoundFields in ein TemplateField konvertieren. Obwohl ich es persönlich vorziehe, vorhandene BoundFields zu konvertieren, sollten wir ein neues TemplateField hinzufügen.

Klicken Sie zunächst im Smarttag von DetailsView auf den Link Felder bearbeiten, um das Dialogfeld Felder anzuzeigen. Fügen Sie als Nächstes ein neues TemplateField hinzu, legen Sie dessen HeaderText Eigenschaft auf "Price and Inventory" fest, und verschieben Sie das neue TemplateField so, dass es über dem UnitPrice BoundField positioniert wird.

Abbildung 4: Hinzufügen eines neuen TemplateField zum DetailView-Steuerelement (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Da dieses neue TemplateField die Werte enthält, die UnitPricederzeit in , UnitsInStockund UnitsOnOrder BoundFields angezeigt werden, entfernen wir sie.

Die letzte Aufgabe für diesen Schritt besteht darin, das ItemTemplate Markup für das Price and Inventory TemplateField zu definieren, das entweder über die Bearbeitungsschnittstelle für Vorlagen von DetailsView im Designer oder manuell über die deklarative Syntax des Steuerelements erreicht werden kann. Wie bei GridView kann auf die Bearbeitungsoberfläche für Vorlagen von DetailsView zugegriffen werden, indem Sie im Smarttag auf den Link Vorlagen bearbeiten klicken. Hier können Sie die zu bearbeitende Vorlage aus der Dropdownliste auswählen und dann beliebige Websteuerelemente aus der Toolbox hinzufügen.

Beginnen Sie in diesem Tutorial mit dem Hinzufügen eines Label-Steuerelements zum Price and Inventory TemplateField-Steuerelement ItemTemplate. Klicken Sie als Nächstes im Smarttag des Label Web-Steuerelements auf den Link DataBindings bearbeiten, und binden Sie die Text Eigenschaft an das UnitPrice Feld.

Abbildung 5: Binden der Eigenschaft der Text Bezeichnung an das UnitPrice Datenfeld (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Formatieren des Preises als Währung

Mit dieser Ergänzung zeigt das Label Web-Steuerelement Price and Inventory TemplateField jetzt nur den Preis für das ausgewählte Produkt an. Abbildung 6 zeigt einen Screenshot des bisherigen Fortschritts, wenn es über einen Browser angezeigt wird.

Abbildung 6: Das Feld "Preis und Bestand" zeigt den Preis an (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Beachten Sie, dass der Preis des Produkts nicht als Währung formatiert ist. Bei einem BoundField ist die Formatierung möglich, indem die HtmlEncode -Eigenschaft auf False und die DataFormatString -Eigenschaft auf {0:formatSpecifier}festgelegt wird. Für ein TemplateField müssen jedoch alle Formatierungsanweisungen in der Datenbindungssyntax oder durch Verwendung einer Formatierungsmethode angegeben werden, die irgendwo im Code der Anwendung definiert ist (z. B. in der CodeBehind-Klasse der ASP.NET Seite).

Um die Formatierung für die im Label Web-Steuerelement verwendete Datenbindungssyntax anzugeben, kehren Sie zum Dialogfeld DataBindings zurück, indem Sie im Smarttag der Bezeichnung auf den Link DataBindings bearbeiten klicken. Sie können die Formatierungsanweisungen direkt in die Dropdownliste Format eingeben oder eine der definierten Formatzeichenfolgen auswählen. Wie bei der BoundField-Eigenschaft DataFormatString wird die Formatierung mithilfe {0:formatSpecifier}von angegeben.

Verwenden Sie für das UnitPrice Feld die angegebene Währungsformatierung, indem Sie entweder den entsprechenden Dropdownlistenwert auswählen oder manuell eingeben {0:C} .

Abbildung 7: Formatieren des Preises als Währung (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Deklarativ wird die Formatierungsspezifikation als zweiter Parameter in den Bind Methoden oder Eval angegeben. Die soeben über den Designer vorgenommenen Einstellungen führen im deklarativen Markup zu dem folgenden Datenbindungsausdruck:

<asp:Label ID="Label1" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>'/>

Hinzufügen der verbleibenden Datenfelder zum TemplateField

An diesem Punkt haben wir das UnitPrice Datenfeld im Preis- und Bestandsvorlagenfeld angezeigt und formatiert, müssen aber weiterhin die UnitsInStock Felder und UnitsOnOrder anzeigen. Wir zeigen diese in einer Zeile unterhalb des Preises und in Klammern an. Über die Bearbeitungsoberfläche der Vorlage im Designer kann ein solches Markup hinzugefügt werden, indem Sie den Cursor in der Vorlage positionieren und einfach den anzuzeigenden Text eingeben. Alternativ kann dieses Markup direkt in der deklarativen Syntax eingegeben werden.

Fügen Sie das statische Markup, Label Web-Steuerelemente und die Datenbindungssyntax hinzu, damit im TemplateField für Preis und Bestand die Preis- und Bestandsinformationen wie folgt angezeigt werden:

UnitPrice
(Auf Lager / Auf Bestellung:UnitsInStock / UnitsOnOrder)

Nachdem Sie diese Aufgabe ausgeführt haben, sollte das deklarative Markup von DetailsView in etwa wie folgt aussehen:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:TemplateField HeaderText="Price and Inventory">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                  Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                <br />
                <strong>
                (In Stock / On Order: </strong>
                <asp:Label ID="Label2" runat="server"
                  Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                <strong>/</strong>
                <asp:Label ID="Label3" runat="server"
                  Text='<%# Eval("UnitsOnOrder") %>'>
                </asp:Label><strong>)</strong>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Mit diesen Änderungen haben wir die Preis- und Bestandsinformationen in einer einzelnen DetailsView-Zeile konsolidiert.

Abbildung 8: Die Preis- und Bestandsinformationen werden in einer einzelnen Zeile angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 3: Anpassen der Nicht mehr eingestellten Feldinformationen

Die Products Spalte der Discontinued Tabelle ist ein Bitwert, der angibt, ob das Produkt eingestellt wurde. Beim Binden eines DetailsView-Steuerelements (oder GridView) an ein Datenquellensteuerelement werden die booleschen Wertfelder wie Discontinuedbeispielsweise als CheckBoxFields implementiert, während nicht boolesche Wertefelder wie ProductID, ProductNameusw. als BoundFields implementiert werden. Das CheckBoxField wird als deaktiviertes Kontrollkästchen gerendert, das aktiviert wird, wenn der Wert des Datenfelds True ist und andernfalls deaktiviert ist.

Anstatt das CheckBoxField anzuzeigen, sollten wir stattdessen Text anzeigen, der angibt, ob das Produkt eingestellt wird oder nicht. Um dies zu erreichen, könnten wir das CheckBoxField aus der DetailsView entfernen und dann ein BoundField hinzufügen, dessen DataField Eigenschaft auf Discontinuedfestgelegt wurde. Nehmen Sie sich einen Moment Zeit, um dies zu tun. Nach dieser Änderung zeigt detailsView den Text "True" für nicht mehr verfügbare Produkte und "False" für noch aktive Produkte an.

Abbildung 9: Die Zeichenfolgen True und False werden verwendet, um den Status "Nicht beendet" anzuzeigen (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Stellen Sie sich vor, dass nicht die Zeichenfolgen "True" oder "False" verwendet werden sollen, sondern stattdessen "YES" und "NO". Eine solche Anpassung kann mithilfe eines TemplateField-Steuerelements und einer Formatierungsmethode durchgeführt werden. Eine Formatierungsmethode kann eine beliebige Anzahl von Eingabeparametern aufnehmen, muss jedoch den HTML-Code (als Zeichenfolge) zurückgeben, um sie in die Vorlage einzufügen.

Fügen Sie der CodeBehind-Klasse der DetailsViewTemplateField.aspx Seite eine Formatierungsmethode mit dem Namen DisplayDiscontinuedAsYESorNO hinzu, die ein Northwind.ProductsRow Objekt als Eingabeparameter akzeptiert und eine Zeichenfolge zurückgibt. Wie im vorherigen Tutorial erläutert, muss diese Methode als Protected oder Public gekennzeichnet werden, damit über die Vorlage auf sie zugegriffen werden kann.

Protected Function DisplayDiscontinuedAsYESorNO(discontinued As Boolean) As String
    If discontinued Then
        Return "YES"
    Else
        Return "NO"
    End If
End Function

Diese Methode überprüft den Eingabeparameter (discontinued) und gibt "YES" zurück, wenn er andernfalls "NEIN" ist True.

Hinweis

Erinnern Sie sich in der formatierungsmethode, die im vorherigen Tutorial untersucht wurde, dass wir ein Datenfeld übergeben haben, das möglicherweise s enthält NULL und daher überprüfen musste, ob der Eigenschaftswert des Mitarbeiters HiredDate einen Datenbankwert NULL aufweist, bevor auf die Eigenschaft des EmployeesRowMitarbeiters HiredDate zugegriffen wurde. Eine solche Überprüfung ist hier nicht erforderlich, da der Discontinued Spalte niemals Datenbankwerte NULL zugewiesen werden können. Darüber hinaus kann die -Methode einen booleschen Eingabeparameter akzeptieren, anstatt einen ProductsRow instance oder einen Parameter vom Typ Objectakzeptieren zu müssen.

Wenn diese Formatierungsmethode abgeschlossen ist, bleibt es nur noch, sie aus dem TemplateField-Element ItemTemplateaufzurufen. Um templateField zu erstellen, entfernen Sie entweder boundField Discontinued , und fügen Sie ein neues TemplateField hinzu, oder konvertieren Sie das Discontinued BoundField in ein TemplateField. Bearbeiten Sie dann in der deklarativen Markupansicht das TemplateField so, dass es nur eine ItemTemplate enthält, die die DisplayDiscontinuedAsYESorNO -Methode aufruft und den Wert der Eigenschaft der aktuellen ProductRow instance Discontinued übergibt. Auf diese kann über die Eval -Methode zugegriffen werden. Insbesondere sollte das TemplateField-Markup wie folgt aussehen:

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <%#DisplayDiscontinuedAsYESorNO(Convert.ToBoolean(Eval("Discontinued")))%> 
    </ItemTemplate>
</asp:TemplateField>

Dies führt dazu, dass die DisplayDiscontinuedAsYESorNO -Methode beim Rendern der DetailsView aufgerufen wird, wobei der Wert des ProductRowDiscontinued instance übergeben wird. Da die Eval -Methode einen Wert vom Typ Objectzurückgibt, die DisplayDiscontinuedAsYESorNO -Methode jedoch einen Eingabeparameter vom Typ Booleanerwartet, werden die Eval Methoden den Rückgabewert in Booleanumgewandelt. Die DisplayDiscontinuedAsYESorNO Methode gibt dann je nach empfangenem Wert "YES" oder "NO" zurück. Der zurückgegebene Wert wird in dieser DetailView-Zeile angezeigt (siehe Abbildung 10).

Abbildung 10: JA- oder NEIN-Werte werden jetzt in der nicht eingestellten Zeile angezeigt (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Zusammenfassung

Das TemplateField-Steuerelement im DetailsView-Steuerelement ermöglicht eine höhere Flexibilität bei der Anzeige von Daten als bei den anderen Feldsteuerelementen und eignet sich ideal für Situationen, in denen:

Mehrere Datenfelder müssen in einer GridView-Spalte angezeigt werden.
Die Daten werden am besten mit einem Websteuerelement und nicht mit Nur-Text ausgedrückt.
Die Ausgabe hängt von den zugrunde liegenden Daten ab, z. B. beim Anzeigen von Metadaten oder beim Neuformatieren der Daten

Während TemplateFields ein höheres Maß an Flexibilität beim Rendern der zugrunde liegenden Daten von DetailsView ermöglicht, fühlt sich die DetailsView-Ausgabe immer noch ein wenig boxy an, da jedes Feld als Zeile in einem HTML-Code <table>gerendert wird.

Das FormView-Steuerelement bietet ein höheres Maß an Flexibilität beim Konfigurieren der gerenderten Ausgabe. Die FormView enthält keine Felder, sondern nur eine Reihe von Vorlagen (ItemTemplate, EditItemTemplate, HeaderTemplateusw.). In unserem nächsten Tutorial erfahren Sie, wie Sie die FormView verwenden, um noch mehr Kontrolle über das gerenderte Layout zu erhalten.

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 Stunden. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Besonderen Dank an

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

Zurück Weiter

Freigeben über