Delen via

TemplateFields gebruiken in het Besturingselement DetailsView (VB)

door Scott Mitchell

PDF downloaden

Dezelfde TemplateFields-mogelijkheden die beschikbaar zijn in GridView, zijn ook beschikbaar met het besturingselement DetailsView. In deze zelfstudie wordt één product tegelijk weergegeven met behulp van een DetailsView met TemplateFields.

Introductie

Het TemplateField biedt een hogere mate van flexibiliteit bij het weergeven van gegevens dan de besturingselementen BoundField, CheckBoxField, HyperLinkField en andere besturingselementen voor gegevensvelden. In de vorige zelfstudie hebben we gekeken naar het gebruik van TemplateField in een GridView om het volgende te doen:

  • Meerdere gegevensveldwaarden weergeven in één kolom. Zowel de FirstName- als de LastName-velden zijn gecombineerd in één GridView-kolom.
  • Gebruik een alternatief web besturingselement om een gegevensveldwaarde uit te drukken. We hebben gezien hoe we de HiredDate waarde kunnen weergeven met behulp van een besturingselement Agenda.
  • Statusinformatie weergeven op basis van de onderliggende gegevens. Hoewel de Employees tabel geen kolom bevat die het aantal dagen retourneert dat een werknemer aan de taak is geweest, konden we dergelijke informatie weergeven in het GridView-voorbeeld in de vorige zelfstudie met behulp van een TemplateField- en opmaakmethode.

Dezelfde TemplateFields-mogelijkheden die beschikbaar zijn in GridView, zijn ook beschikbaar met het besturingselement DetailsView. In deze zelfstudie wordt één product tegelijk weergegeven met behulp van een DetailsView die twee TemplateFields bevat. Het eerste TemplateField combineert de UnitPricevelden , UnitsInStocken UnitsOnOrder gegevensvelden in één DetailsView-rij. In het tweede TemplateField wordt de waarde van het Discontinued-veld weergegeven, maar een opmaakmethode wordt gebruikt om 'JA' weer te geven als Discontinued gelijk is aan True, en 'NEE' anders.

Er worden twee TemplateFields gebruikt om de weergave aan te passen

Afbeelding 1: Twee TemplateFields worden gebruikt om de weergave aan te passen (klik om de afbeelding volledig weer te geven)

Laten we aan de slag gaan.

Stap 1: De gegevens binden aan de DetailsView

Zoals besproken in de vorige zelfstudie, is het bij het werken met TemplateFields vaak het eenvoudigst om te beginnen met het maken van het besturingselement DetailsView dat alleen BoundFields bevat en vervolgens nieuwe TemplateFields toevoegt of de bestaande BoundFields indien nodig converteert naar TemplateFields. Begin deze zelfstudie daarom door een DetailsView toe te voegen aan de pagina via de ontwerpfunctie en deze te binden aan een ObjectDataSource die de lijst met producten retourneert. Met deze stappen creëert u een DetailsView, waarbij BoundFields worden gebruikt voor elk van de niet-Booleaanse waardevelden van het product en een CheckBoxField voor het ene booleaanse waardeveld (Stopgezet).

Open de DetailsViewTemplateField.aspx pagina en sleep een DetailsView van de toolbox naar de ontwerper. Kies in de infolabel van DetailsView om een nieuw ObjectDataSource-besturingselement toe te voegen waarmee de methode van ProductsBLL de GetProducts() klasse wordt aangeroepen.

Een nieuw ObjectDataSource-besturingselement toevoegen dat de Methode GetProducts() aanroept

Afbeelding 2: Voeg een nieuw ObjectDataSource-besturingselement toe dat de GetProducts() methode aanroept (klik om de afbeelding op volledige grootte weer te geven)

Voor dit rapport moet u de ProductID, SupplierID, CategoryID, en ReorderLevel BoundFields verwijderen. Wijzig vervolgens de volgorde van de BoundFields zodat de CategoryName en SupplierName BoundFields direct na het ProductName BoundField worden weergegeven. U kunt de HeaderText eigenschappen en opmaakeigenschappen voor de BoundFields naar wens aanpassen. Net als bij GridView kunnen deze bewerkingen op BoundField-niveau worden uitgevoerd via het dialoogvenster Velden (toegankelijk door te klikken op de koppeling Velden bewerken in de infolabel van DetailsView) of via de declaratieve syntaxis. Verwijder ten slotte de Height en Width eigenschapswaarden van DetailsView om het besturingselement DetailsView toe te staan uit te breiden op basis van de weergegeven gegevens, en vink het selectievakje 'Paginering inschakelen' aan in de smart tag.

Nadat u deze wijzigingen hebt aangebracht, zou de declaratieve code van het besturingselement DetailsView er ongeveer zoals hieronder uitzien.

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

Neem even de tijd om de pagina via een browser weer te geven. Op dit punt ziet u één product dat wordt vermeld (Chai) met rijen met de naam van het product, categorie, leverancier, prijs, eenheden op voorraad, eenheden op bestelling en de stopgezette status.

De details van het product worden weergegeven met behulp van een reeks BoundFields

Afbeelding 3: De details van het product worden weergegeven met behulp van een reeks BoundFields (Klik hier om de volledige afbeelding weer te geven)

Stap 2: de prijs, eenheden op voorraad en eenheden op volgorde combineren in één rij

De DetailsView heeft een rij voor de UnitPrice, UnitsInStocken UnitsOnOrder velden. We kunnen deze gegevensvelden combineren in één rij met een TemplateField door een nieuw TemplateField toe te voegen of door een van de bestaande UnitPrice, UnitsInStocken UnitsOnOrder BoundFields te converteren naar een TemplateField. Hoewel ik liever bestaande BoundFields converteer, gaan we oefenen door een nieuw TemplateField toe te voegen.

Begin met het klikken op de link 'Velden bewerken' in het slimme label van DetailsView om het dialoogvenster 'Velden' te openen. Voeg vervolgens een nieuw TemplateField toe en stel de HeaderText eigenschap ervan in op 'Price and Inventory' en verplaats het nieuwe TemplateField zodat deze boven het UnitPrice BoundField wordt geplaatst.

Een nieuw templateveld toevoegen aan het Besturingselement DetailsView

Afbeelding 4: Een nieuw sjabloonveld toevoegen aan het Besturingselement DetailsView (klik om de afbeelding op volledige grootte weer te geven)

Aangezien dit nieuwe TemplateField de waarden bevat die momenteel worden weergegeven in de UnitPrice, UnitsInStocken UnitsOnOrder BoundFields, gaan we ze verwijderen.

De laatste taak voor deze stap is het definiëren van de ItemTemplate markeringen voor het veld Price and Inventory TemplateField, dat kan worden uitgevoerd via de sjabloonbewerkingsinterface van DetailsView in de ontwerpfunctie of met de hand via de declaratieve syntaxis van het besturingselement. Net als bij de GridView kan de sjabloonbewerkingsinterface van de DetailsView worden geopend door te klikken op de link Sjablonen bewerken in de smarttag. Hier kunt u de sjabloon selecteren die u wilt bewerken in de vervolgkeuzelijst en vervolgens webbesturingselementen uit de werkset toevoegen.

Voor deze zelfstudie voegt u eerst een labelcontrole-element toe aan het veld ItemTemplate van de Price and Inventory TemplateField. Klik vervolgens op de koppeling 'DataBindings bewerken' vanuit de smart tag van het labelwebbesturingselement en koppel de Text eigenschap aan het UnitPrice veld.

Bind de teksteigenschap van het label aan het gegevensveld UnitPrice

Afbeelding 5: De eigenschap van Text het label binden aan het UnitPrice gegevensveld (klik om de afbeelding op volledige grootte weer te geven)

De prijs formateren als valuta

Met deze toevoeging wordt in het labelwebbeheer Price and Inventory TemplateField nu alleen de prijs voor het geselecteerde product weergegeven. Afbeelding 6 toont een schermafbeelding van onze voortgang tot nu toe wanneer deze wordt bekeken via een browser.

In het veld Price and Inventory TemplateField wordt de prijs weergegeven

Afbeelding 6: Het veld Price and Inventory TemplateField toont de prijs (klik hier om de volledige afbeelding weer te geven)

Houd er rekening mee dat de prijs van het product niet is opgemaakt als valuta. Met een BoundField is opmaak mogelijk door de HtmlEncode eigenschap in te stellen op False en de DataFormatString eigenschap op {0:formatSpecifier}. Voor een TemplateField moeten eventuele opmaakinstructies echter worden opgegeven in de syntaxis van de gegevensbinding of via het gebruik van een opmaakmethode die ergens in de code van de toepassing is gedefinieerd (zoals in de code-achterklasse van de ASP.NET pagina).

Als u de opmaak wilt opgeven voor de gegevensbindingssyntaxis die wordt gebruikt in het Label Web-besturingselement, gaat u terug naar het dialoogvenster DataBindings door te klikken op de koppeling 'DataBindings bewerken' vanuit het slimme label. U kunt de opmaakinstructies rechtstreeks in de vervolgkeuzelijst Opmaak typen of een van de gedefinieerde notatietekenreeksen selecteren. Net als bij de eigenschap BoundField DataFormatString wordt de opmaak opgegeven met behulp van {0:formatSpecifier}.

Voor het UnitPrice veld gebruikt u de valutaopmaak die is opgegeven door ofwel de juiste optie in de vervolgkeuzelijst te selecteren, of door handmatig {0:C} in te typen.

De prijs opmaken als valuta

Afbeelding 7: De prijs opmaken als een valuta (klik om de afbeelding op volledige grootte weer te geven)

Declaratief wordt de opmaakspecificatie aangegeven als een tweede parameter in de Bind of Eval methoden. De instellingen die zojuist via de ontwerpfunctie zijn gemaakt, resulteren in de volgende gegevensbindingexpressie in de declaratieve markering:

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

De resterende gegevensvelden toevoegen aan het sjabloonveld

Op dit moment hebben we het UnitPrice-gegevensveld in het Price and Inventory TemplateField weergegeven en opgemaakt, maar we moeten nog steeds de velden UnitsInStock en UnitsOnOrder weergeven. Laten we deze op een regel onder de prijs en tussen haakjes weergeven. Vanuit de interface voor het bewerken van sjablonen in de ontwerpfunctie kunnen dergelijke markeringen worden toegevoegd door de cursor in de sjabloon te plaatsen en gewoon de tekst te typen die moet worden weergegeven. U kunt deze markering ook rechtstreeks invoeren in de declaratieve syntaxis.

Voeg de statische markeringen, labelwebbesturingselementen en gegevensbindingsyntaxis toe, zodat de prijs- en voorraadgegevens in het veld Price and Inventory TemplateField als volgt worden weergegeven:

Prijs per eenheid
(Op voorraad/op bestelling:EenhedenInStock / UnitsOnOrder)

Nadat u deze taak hebt uitgevoerd, moet de declaratieve opmaak van uw DetailsView er ongeveer als volgt uitzien:

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

Met deze wijzigingen hebben we de prijs- en voorraadgegevens samengevoegd tot één DetailView-rij.

De prijs- en inventarisgegevens worden weergegeven in één rij

Afbeelding 8: De prijs- en voorraadgegevens worden weergegeven in één rij (klik hier om de volledige afbeelding weer te geven)

Stap 3: De stopgezette veldgegevens aanpassen

De kolom van Products de Discontinued tabel is een bitwaarde die aangeeft of het product is stopgezet. Wanneer u een DetailsView (of GridView) aan een gegevensbronbesturingselement bindt, worden de Booleaanse waardevelden, zoals Discontinued, geïmplementeerd als CheckBoxFields, terwijl niet-Booleaanse waardevelden, zoals ProductID, ProductNameenzovoort, worden geïmplementeerd als BoundFields. CheckBoxField wordt weergegeven als een uitgeschakeld selectievakje dat is aangevinkt als de waarde van het gegevensveld Waar is en anders niet aangevinkt.

In plaats van het selectievakjeveld weer te geven, willen we in plaats daarvan tekst weergeven die aangeeft of het product al dan niet wordt stopgezet. Hiervoor kunnen we het CheckBoxField verwijderen uit de DetailsView en vervolgens een BoundField toevoegen waarvan DataField de eigenschap is ingesteld op Discontinued. Neem even de tijd om dit te doen. Na deze wijziging wordt in DetailsView de tekst 'Waar' weergegeven voor stopgezette producten en 'Onwaar' voor producten die nog actief zijn.

De tekenreeksen Waar en Onwaar worden gebruikt om de stopgezette status weer te geven

Afbeelding 9: De tekenreeksen Waar en Onwaar worden gebruikt om de stopgezette status weer te geven (klik om de afbeelding op volledige grootte weer te geven)

Stel dat we niet willen dat de tekenreeksen 'Waar' of 'Onwaar' worden gebruikt, maar in plaats daarvan 'JA' en 'NEE'. Een dergelijke aanpassing kan worden uitgevoerd met behulp van een TemplateField en een opmaakmethode. Een opmaakmethode kan een willekeurig aantal invoerparameters bevatten, maar moet de HTML (als tekenreeks) retourneren om in de sjabloon te injecteren.

Voeg een opmaakmethode toe aan de code-behind-klasse van de DetailsViewTemplateField.aspx pagina die een DisplayDiscontinuedAsYESorNO object als invoerparameter accepteert en een tekenreeks retourneert. Zoals besproken in de vorige zelfstudie, moet deze methode worden gemarkeerd als Protected of Public om toegankelijk te zijn vanuit de sjabloon.

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

Deze methode controleert de invoerparameter (discontinued) en retourneert "JA" als dit is True, "NEE" anders.

Opmerking

In de opmaakmethode die in de vorige zelfstudie is onderzocht, herinningt u zich eraan dat we een gegevensveld hebben doorgegeven dat mogelijk NULLs bevat en daarom moesten we controleren of de eigenschapswaarde van de werknemer HiredDate een databasewaarde NULL had voordat we toegang hadden tot de eigenschap EmployeesRow van HiredDate. Een dergelijke controle is hier niet nodig omdat aan de Discontinued kolom nooit databasewaarden NULL kunnen worden toegewezen. Bovendien kan de methode een Booleaanse invoerparameter accepteren in plaats van een ProductsRow exemplaar of parameter van het type Objectte accepteren.

Als deze opmaakmethode is voltooid, hoeft u dit alleen maar aan te roepen vanuit het sjabloonveld ItemTemplate. Als u het TemplateField wilt maken, verwijdert u het Discontinued BoundField en voegt u een nieuw TemplateField toe of converteert u het Discontinued BoundField naar een TemplateField. Bewerk vervolgens vanuit de declaratieve opmaakweergave het TemplateField zodat deze alleen een ItemTemplate bevat die de DisplayDiscontinuedAsYESorNO methode aanroept, waarbij de waarde van de eigenschap van het huidige ProductRow exemplaar Discontinued wordt doorgegeven. Dit kan worden geopend via de Eval methode. De opmaak van TemplateField moet er met name als volgt uitzien:

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

Hierdoor wordt de DisplayDiscontinuedAsYESorNO-methode aangeroepen bij het weergeven van de DetailsView, waarbij de waarde van ProductRow van het Discontinued-exemplaar wordt doorgegeven. Omdat de Eval methode een waarde van het type Objectretourneert, maar de DisplayDiscontinuedAsYESorNO methode een invoerparameter van het type Booleanverwacht, worden de Eval methoden geretourneerd naar Boolean. De DisplayDiscontinuedAsYESorNO methode retourneert vervolgens 'JA' of 'NEE', afhankelijk van de waarde die wordt ontvangen. De geretourneerde waarde wordt weergegeven in deze detailweergaverij (zie afbeelding 10).

JA of NEE-waarden worden nu weergegeven in de stopgezette rij

Afbeelding 10: JA- of NEE-waarden worden nu weergegeven in de stopgezette rij (klik hier om de volledige afbeelding weer te geven)

Samenvatting

Het TemplateField in het besturingselement DetailsView biedt een hogere mate van flexibiliteit bij het weergeven van gegevens dan beschikbaar is met de andere veldbesturingselementen en zijn ideaal voor situaties waarin:

  • Er moeten meerdere gegevensvelden worden weergegeven in één GridView-kolom
  • De gegevens worden het beste uitgedrukt met behulp van een webcontrole in plaats van platte tekst.
  • De uitvoer is afhankelijk van de onderliggende gegevens, zoals het weergeven van metagegevens of het opnieuw opmaken van de gegevens

Hoewel TemplateFields meer flexibiliteit bieden bij het weergeven van de onderliggende gegevens van de DetailsView, voelt de DetailsView-uitvoer nog steeds een beetje hoekig aan, aangezien elk veld wordt weergegeven als een rij in een HTML <table>.

Het besturingselement FormView biedt meer flexibiliteit bij het configureren van de gerenderde uitvoer. De FormView bevat geen velden, maar eerder een reeks sjablonen (ItemTemplateEditItemTemplateHeaderTemplate, enzovoort). In onze volgende zelfstudie ziet u hoe u de FormView kunt gebruiken om nog meer controle te krijgen over de gerenderde indeling.

Veel plezier met programmeren!

Over de auteur

Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.

Speciale dank aan

Deze tutorialreeks is beoordeeld door veel behulpzame beoordelers. Hoofdrecensent voor deze handleiding was Dan Jagers. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.

VorigeVolgende

  • Last updated on