Använda FormView-mallar (VB)

2025-04-30

Till skillnad från DetailsView består FormView inte av fält. I stället renderas FormView med hjälp av mallar. I den här självstudien ska vi undersöka hur du använder FormView-kontrollen för att presentera en mindre strikt visning av data.

Inledning

I de två senaste självstudierna såg vi hur du anpassar GridView- och DetailsView-kontrollernas utdata med hjälp av TemplateFields. TemplateFields tillåter att innehållet för ett visst fält anpassas mycket, men i slutändan har både GridView och DetailsView ett ganska boxigt, rutnätsliknande utseende. I många scenarier är en sådan rutnätsliknande layout idealisk, men ibland behövs en mer flytande, mindre stel skärm. När du visar en enskild post är en sådan flytande layout möjlig med hjälp av FormView-kontrollen.

Till skillnad från DetailsView består FormView inte av fält. Du kan inte lägga till ett BoundField- eller TemplateField-fält i en FormView. I stället renderas FormView med hjälp av mallar. Tänk på FormView som en DetailsView-kontroll som innehåller ett enda TemplateField. FormView stöder följande mallar:

ItemTemplate används för att återge den specifika post som visas i FormView
HeaderTemplate används för att ange en valfri rubrikrad
FooterTemplate används för att ange en valfri sidfotsrad
EmptyDataTemplate när FormView saknar några värden DataSource används i stället för att återge kontrollens markering
PagerTemplate kan användas för att anpassa sidindelningsgränssnittet för FormViews som har sidindelning aktiverat
EditItemTemplate / InsertItemTemplate används för att anpassa redigeringsgränssnittet eller infoga gränssnittet för FormViews som stöder sådana funktioner

I den här självstudien ska vi undersöka hur du använder FormView-kontrollen för att presentera en mindre strikt visning av produkter. I stället för att ha fält för namn, kategori, leverantör och så vidare visar FormView ItemTemplate dessa värden med hjälp av en kombination av ett rubrikelement och ett <table> (se bild 1).

Bild 1: Formulärvyn bryter sig ur Grid-Like layouten som visas i DetailsView (Klicka om du vill visa en bild i full storlek)

Steg 1: Binda data till FormView

Öppna sidan FormView.aspx och dra en FormView från verktygslådan till designer-vyn. När du först lägger till FormView visas den som en grå ruta och instruerar oss att en ItemTemplate behövs.

Bild 2: Formulärvyn kan inte återges i designern förrän en ItemTemplate har angetts (Klicka om du vill visa en bild i full storlek)

ItemTemplate Kan skapas för hand (via deklarativ syntax) eller skapas automatiskt genom att binda FormView till en datakällakontroll via designern. Den här automatiskt skapade ItemTemplate filen innehåller HTML som visar namnet på varje fält och en etikettkontroll vars Text egenskap är bunden till fältets värde. Den här metoden skapar också automatiskt en InsertItemTemplate och EditItemTemplate, som båda fylls i med indatakontroller för vart och ett av de datafält som returneras av datakällans kontroll.

Om du vill skapa mallen automatiskt lägger du till en ny ObjectDataSource-kontroll från FormViews smarta tagg som anropar ProductsBLL klassens GetProducts() -metod. Då skapas en FormView med ItemTemplate, InsertItemTemplate och EditItemTemplate. Från källvyn tar du bort InsertItemTemplate och EditItemTemplate eftersom vi inte är intresserade av att skapa en FormView som stöder redigering eller infogning ännu. Rensa sedan markeringen inom ItemTemplate så att vi har en ren start att arbeta från.

Om du hellre vill bygga upp den ItemTemplate manuellt kan du lägga till och konfigurera ObjectDataSource genom att dra den från verktygslådan till designern. Ange dock inte FormView-datakällan från designern. Gå i stället till källvyn och ange egenskapen FormView DataSourceID manuellt till ID värdet för ObjectDataSource. Lägg sedan till ItemTemplate.

Oavsett vilken metod du har valt bör formViews deklarativa markering nu se ut så här:

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

    </ItemTemplate>
</asp:FormView>

Ta ett ögonblick för att markera kryssrutan Aktivera sidindelning i FormView:s smidiga tagg; detta kommer att lägga till AllowPaging="True" attributet i FormView:s deklarativa syntax. Ställ också in egenskapen EnableViewState till False.

Steg 2: Definiering av`ItemTemplate`'s markup

Med FormView bunden till ObjectDataSource-kontrollen och konfigurerad för att stödja sidindelning är vi redo att ange innehållet för ItemTemplate. I den här självstudien låt oss se till att produktens namn visas i en <h3> rubrik. Därefter ska vi använda en HTML <table> för att visa de återstående produktegenskaperna i en tabell med fyra kolumner där de första och tredje kolumnerna visar egenskapsnamnen och den andra och fjärde listan med deras värden.

Den här markeringen kan anges i formulärvyns mallredigeringsgränssnitt i designern eller anges manuellt via den deklarativa syntaxen. När jag arbetar med mallar tycker jag vanligtvis att det går snabbare att arbeta direkt med deklarativ syntax, men använd gärna den teknik som du är mest bekväm med.

Följande markering visar deklarativ markering för FormView när ItemTemplatestrukturen har slutförts:

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

Observera att databindningssyntaxen – <%# Eval("ProductName") %>, till exempel kan matas in direkt i mallens utdata. Den behöver alltså inte tilldelas till en etikettkontrolls Text egenskap. Vi har till exempel värdet ProductName som visas i ett <h3> element med <h3><%# Eval("ProductName") %></h3>, vilket för produkten Chai återges som <h3>Chai</h3>.

CSS-klasserna ProductPropertyLabel och ProductPropertyValue används för att ange formatet för produktegenskapens namn och värden i <table>. Dessa CSS-klasser definieras i Styles.css och gör att egenskapsnamnen är fetstilt och högerjusterade och lägger till rätt utfyllnad till egenskapsvärdena.

Eftersom det inte finns några CheckBoxFields tillgängliga med FormView, för att visa Discontinued värdet som en kryssruta måste vi lägga till vår egen CheckBox-kontroll. Egenskapen Enabled är inställd på False, vilket gör den skrivskyddad, och egenskapen för kryssrutan Checked är bunden till värdet i datafältet Discontinued.

När ItemTemplate är komplett visas produktinformationen på ett mycket mer smidigt sätt. Jämför DetailsView-utdata från den senaste självstudien (bild 3) med utdata som genererades av FormView i den här självstudien (bild 4).

Bild 3: Rigid DetailsView-utdata (Klicka om du vill visa en bild i full storlek)

Bild 4: Fluid FormView-utdata (Klicka om du vill visa en bild i full storlek)

Sammanfattning

Kontrollerna GridView och DetailsView kan anpassa sina utdata med hjälp av TemplateFields, men båda visar fortfarande sina data i ett rutnätsliknande, boxigt format. För de tillfällen då en enskild post måste visas med en mindre strikt layout är FormView ett idealiskt val. Liksom DetailsView renderar FormView en enda post från dess DataSource, men till skillnad från DetailsView består den bara av mallar och stöder inte fält.

Som vi såg i den här självstudien möjliggör FormView en mer flexibel layout när du visar en enda post. I framtida självstudier undersöker vi kontrollerna DataList och Repeater, som ger samma flexibilitetsnivå som FormsView, men som kan visa flera poster (t.ex. GridView).

Lycka till med programmerandet!

Om författaren

Scott Mitchell, författare till sju ASP/ASP.NET-böcker och grundare av 4GuysFromRolla.com, har arbetat med Microsofts webbtekniker sedan 1998. Scott arbetar som oberoende konsult, tränare och författare. Hans senaste bok är Sams Teach Yourself ASP.NET 2.0 på 24 timmar. Han kan nås på mitchell@4GuysFromRolla.com.

Särskilt tack till

Den här självstudieserien granskades av många användbara granskare. Ansvarig granskare för den här självstudien var E.R. Gilmore. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.

Föregående nästa

Feedback

Var den här sidan till hjälp?