De sjablonen van FormView gebruiken (C#)

door Scott Mitchell

PDF downloaden

In tegenstelling tot de DetailsView bestaat de FormView niet uit velden. In plaats daarvan wordt de FormView weergegeven met behulp van sjablonen. In deze zelfstudie gaan we het besturingselement FormView gebruiken om een minder starre weergave van gegevens weer te geven.

Introductie

In de laatste twee zelfstudies hebben we gezien hoe we de uitvoer van gridview- en DetailsView-besturingselementen aanpassen met behulp van TemplateFields. Met TemplateFields kan de inhoud van een specifiek veld sterk worden aangepast, maar uiteindelijk hebben zowel gridView als DetailsView een nogal boxy, rasterachtige weergave. Voor veel scenario's is een dergelijke rasterachtige indeling ideaal, maar soms is een meer vloeiende, minder rigide indeling nodig. Bij het weergeven van één record is een dergelijke vloeiende indeling mogelijk met behulp van het besturingselement FormView.

In tegenstelling tot de DetailsView bestaat de FormView niet uit velden. U kunt geen BoundField of TemplateField toevoegen aan een FormView. In plaats daarvan wordt de FormView weergegeven met behulp van sjablonen. Denk aan de FormView als een DetailView-besturingselement dat één TemplateField bevat. FormView ondersteunt de volgende sjablonen:

• ItemTemplate wordt gebruikt om de specifieke record weer te geven die wordt weergegeven in de FormView
• HeaderTemplate wordt gebruikt om een optionele koprij op te geven
• FooterTemplate wordt gebruikt om een optionele voettekstrij op te geven
• EmptyDataTemplate wanneer de FormView DataSource geen records bevat, wordt deze EmptyDataTemplate gebruikt in plaats van de ItemTemplate voor het weergeven van de opmaak van het besturingselement
• PagerTemplate kan worden gebruikt voor het aanpassen van de paging-interface voor FormViews waarvoor paging is ingeschakeld
• EditItemTemplate / InsertItemTemplate wordt gebruikt voor het aanpassen van de bewerkingsinterface of het invoegen van interface voor FormViews die ondersteuning bieden voor dergelijke functionaliteit

In deze zelfstudie gaan we na hoe we het besturingselement FormView kunnen gebruiken om een minder starre presentatie van producten te realiseren. In plaats van velden voor de naam, categorie, leverancier enzovoort te hebben, zal de FormView ItemTemplate deze waarden weergeven met behulp van een combinatie van een header-element en een <table> (zie Afbeelding 1).

Afbeelding 1: De FormView breekt uit van de Grid-Like indeling gezien in de DetailsView (klik om de afbeelding volledig weer te geven)

Stap 1: De gegevens binden aan de FormView

Open de FormView.aspx pagina en sleep een FormView van de Toolbox naar de ontwerpomgeving. Wanneer u de FormView voor het eerst toevoegt, verschijnt deze als een grijs vak en laat zien dat er een ItemTemplate nodig is.

Afbeelding 2: De FormView kan niet worden weergegeven in de ontwerpfunctie totdat een ItemTemplate afbeelding is opgegeven (klik om de volledige afbeelding weer te geven)

De ItemTemplate kan handmatig worden gemaakt (via de declaratieve syntaxis) of automatisch worden gemaakt door de FormView te binden aan een besturingselement voor gegevensbronnen via de ontwerpfunctie. Deze automatisch gemaakte ItemTemplate html bevat de naam van elk veld en een labelbesturingselement waarvan Text de eigenschap afhankelijk is van de waarde van het veld. Deze aanpak maakt ook automatisch een InsertItemTemplate en EditItemTemplate aan, die beide worden gevuld met invoercontroles voor elk van de gegevensvelden die door het gegevensbronbesturingselement worden geretourneerd.

Als u de sjabloon automatisch wilt maken, voegt u vanuit de smarttag van FormView een nieuw ObjectDataSource-besturingselement toe waarmee de methode van ProductsBLL de GetProducts() klasse wordt aangeroepen. Hiermee maakt u een FormView met een ItemTemplate, InsertItemTemplateen EditItemTemplate. Verwijder in de bronweergave de InsertItemTemplate en EditItemTemplate omdat we niet geïnteresseerd zijn in het maken van een FormView die ondersteuning biedt voor bewerken of invoegen. Wis vervolgens de markering binnen de ItemTemplate, zodat we met een schone lei kunnen beginnen.

Als u liever de ItemTemplate handmatige opbouw wilt uitvoeren, kunt u de ObjectDataSource toevoegen en configureren door deze vanuit de werkset naar de ontwerpfunctie te slepen. Stel de gegevensbron van FormView echter niet in vanuit de ontwerpfunctie. Ga in plaats daarvan naar de bronweergave en stel de eigenschap van DataSourceID FormView handmatig in op de ID waarde van de ObjectDataSource. Voeg vervolgens handmatig de ItemTemplate.

Ongeacht de aanpak die u hebt gekozen, moet de declaratieve opmaak van uw FormView er nu als volgt uitzien:

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

    </ItemTemplate>
</asp:FormView>

Neem even de tijd om het selectievakje Paging inschakelen in te schakelen in de smarttag van FormView; hiermee wordt het AllowPaging="True" kenmerk toegevoegd aan de declaratieve syntaxis van FormView. Stel de EnableViewState eigenschap ook in op False.

Stap 2: deItemTemplate markeringen definiëren

Met de FormView gebonden aan de ObjectDataSource-controle en geconfigureerd om paginering te ondersteunen, zijn we klaar om de inhoud voor de ItemTemplate te specificeren. Voor deze zelfstudie laten we de naam van het product weergeven in een <h3> kop. Laten we hierna een HTML <table> gebruiken om de resterende producteigenschappen weer te geven in een tabel met vier kolommen, waarin de namen van de eigenschappen en de tweede en vierde lijst van de waarden worden weergegeven in de eerste en derde kolom.

Deze markering kan worden ingevoerd via de sjabloonbewerkingsinterface van FormView in de ontwerpfunctie of handmatig worden ingevoerd via de declaratieve syntaxis. Wanneer ik met sjablonen werk, vind ik het meestal sneller om rechtstreeks met de declaratieve syntaxis te werken, maar voel je vrij om elke techniek te gebruiken waarmee je het meest vertrouwd bent.

In de volgende markeringen ziet u de declaratieve opmaak van FormView nadat de ItemTemplatestructuur is voltooid:

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

U merkt op dat de syntaxis van gegevensbinding, bijvoorbeeld <%# Eval("ProductName") %>, rechtstreeks in de uitvoer van de sjabloon kan worden geïnjecteerd. Dat wil zeggen dat het niet aan de eigenschap van een Label-besturingselement Text hoeft te worden toegewezen. We hebben bijvoorbeeld de ProductName waarde weergegeven in een <h3> element met behulp van <h3><%# Eval("ProductName") %></h3>, wat voor het product Chai zal weergeven als <h3>Chai</h3>.

De ProductPropertyLabel en ProductPropertyValue CSS-klassen worden gebruikt voor het opgeven van de stijl van de producteigenschapsnamen en -waarden in de <table>. Deze CSS-klassen worden gedefinieerd in Styles.css en zorgen ervoor dat de eigenschapsnamen vetgedrukt en rechts-uitgelijnd zijn en voegen opvulling toe aan de rechterkant van de eigenschapswaarden.

Omdat er geen CheckBoxFields beschikbaar zijn met de FormView, moeten we onze eigen CheckBox-controle toevoegen om de Discontinued-waarde weer te geven als een selectievakje. De Enabled eigenschap is ingesteld op Onwaar, waardoor deze alleen-lezen is, en de eigenschap van het selectievakje Checked is gebonden aan de waarde van het Discontinued gegevensveld.

Met de ItemTemplate voltooid, wordt de productinformatie op een veel vloeiendere manier weergegeven. Vergelijk de DetailsView-uitvoer van de laatste zelfstudie (afbeelding 3) met de uitvoer die in deze zelfstudie is gegenereerd door de FormView (afbeelding 4).

Afbeelding 3: De Rigid DetailsView-uitvoer (klik om de afbeelding volledig weer te geven)

Afbeelding 4: De Fluid FormView-uitvoer (klik om de afbeelding op volledige grootte weer te geven)

Samenvatting

Hoewel de besturingselementen GridView en DetailsView hun uitvoer kunnen aanpassen met TemplateFields, kunnen beide hun gegevens nog steeds in een rasterachtige, boxy-indeling presenteren. Voor die gevallen waarin één record moet worden weergegeven met een minder strikte indeling, is de FormView een ideale keuze. Net als de DetailsView geeft de FormView één record weer uit zijn DataSource, maar in tegenstelling tot de DetailsView bestaat het uitsluitend uit sjablonen en ondersteunt het geen velden.

Zoals we in deze zelfstudie hebben gezien, maakt formView een flexibelere indeling mogelijk bij het weergeven van één record. In toekomstige zelfstudies bekijken we de besturingselementen DataList en Repeater, die hetzelfde flexibiliteitsniveau bieden als formsView, maar meerdere records (zoals de GridView) kunnen weergeven.

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. Hoofdbeoordelaar voor deze handleiding was E.R. Gilmore. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.

VorigeVolgende