Använda TemplateFields i GridView-kontrollen (VB)

av Scott Mitchell

Ladda ned PDF

För att ge flexibilitet erbjuder GridView TemplateField, som renderas med hjälp av en mall. En mall kan innehålla en blandning av statisk HTML, webbkontroller och databindningssyntax. I den här självstudien ska vi undersöka hur du använder TemplateField för att uppnå en högre grad av anpassning med GridView-kontrollen.

Inledning

GridView består av en uppsättning fält som anger vilka egenskaper från DataSource som ska ingå i de renderade utdata tillsammans med hur data ska visas. Den enklaste fälttypen är BoundField, som visar ett datavärde som text. Andra fälttyper visar data med hjälp av alternativa HTML-element. CheckBoxField återges till exempel som en kryssruta vars markerade tillstånd beror på värdet för ett angivet datafält. ImageField återger en bild vars bildkälla baseras på ett angivet datafält. Hyperlänkar och knappar vars tillstånd är beroende av ett underliggande datafältvärde kan renderas med hjälp av fälttyperna HyperLinkField och ButtonField.

Fälttyperna CheckBoxField, ImageField, HyperLinkField och ButtonField tillåter en alternativ vy av data, men de är fortfarande ganska begränsade när det gäller formatering. En CheckBoxField kan bara visa en enda kryssruta, medan en ImageField bara kan visa en enda bild. Vad händer om ett visst fält behöver visa text, en kryssruta och en bild, allt baserat på olika datafältvärden? Eller vad händer om vi vill visa data med hjälp av en annan webbkontroll än Kryssruta, Bild, HyperLink eller Knapp? Dessutom begränsar BoundField sin visning till ett enda datafält. Vad händer om vi vill visa två eller flera datafältvärden i en enda GridView-kolumn?

För att hantera den här flexibilitetsnivån erbjuder GridView TemplateField, som renderas med hjälp av en mall. En mall kan innehålla en blandning av statisk HTML, webbkontroller och databindningssyntax. Dessutom har TemplateField en mängd olika mallar som kan användas för att anpassa renderingen för olika situationer. Till exempel ItemTemplate används som standard för att återge cellen för varje rad, men mallen EditItemTemplate kan användas för att anpassa gränssnittet när du redigerar data.

I den här självstudien ska vi undersöka hur du använder TemplateField för att uppnå en högre grad av anpassning med GridView-kontrollen. I föregående självstudie såg vi hur du anpassar formateringen baserat på underliggande data genom att använda DataBound och RowDataBound händelsehanterarna. Ett annat sätt att anpassa formateringen baserat på underliggande data är genom att anropa formateringsmetoder inifrån en mall. Vi tittar på den här tekniken i den här handledningen också.

I den här självstudien använder vi TemplateFields för att anpassa utseendet på en lista över anställda. Mer specifikt listar vi alla anställda, men visar medarbetarens för- och efternamn i en kolumn, deras anställningsdatum i en kalenderkontroll och en statuskolumn som anger hur många dagar de har varit anställda på företaget.

Tre mallfält används för att anpassa visningen

Bild 1: Tre TemplateFields används för att anpassa visningen (klicka om du vill visa en bild i full storlek)

Steg 1: Binda data till GridView

I rapporteringsscenarier där du behöver använda TemplateFields för att anpassa utseendet är det enklast att börja med att skapa en GridView-kontroll som bara innehåller BoundFields först och sedan lägga till nya TemplateFields eller konvertera befintliga BoundFields till TemplateFields efter behov. Därför ska vi börja den här självstudien genom att lägga till en GridView på sidan via designern och binda den till en ObjectDataSource som returnerar listan över anställda. De här stegen skapar en GridView med BoundFields för vart och ett av de anställdas fält.

Öppna sidan GridViewTemplateField.aspx och dra en gridview från Verktygslådan till designern. Från GridViews smarta tagg väljer du att lägga till en ny ObjectDataSource-kontroll som anropar EmployeesBLL klassens GetEmployees() -metod.

Lägg till en ny ObjectDataSource-kontroll som anropar metoden GetEmployees()

Bild 2: Lägg till en ny ObjectDataSource-kontroll som anropar GetEmployees() metoden (Klicka om du vill visa en bild i full storlek)

Om du binder GridView på det här sättet läggs automatiskt till ett BoundField för var och en av de anställdas egenskaper: EmployeeID, LastName, FirstName, Title, HireDate, ReportsTooch Country. För den här rapporten ska vi inte bry oss om att visa EmployeeID, ReportsTo eller Country egenskaperna. Om du vill ta bort dessa BoundFields kan du:

  • Använd dialogrutan Fält och klicka på länken Redigera kolumner från GridViews smarta tagg för att ta upp den här dialogrutan. Välj sedan BoundFields i den nedre vänstra listan och klicka på den röda X-knappen för att ta bort BoundField.
  • Redigera GridViews deklarativa syntax för hand från källvyn och ta bort elementet <asp:BoundField> för det BoundField som du vill ta bort.

När du har tagit bort EmployeeID, ReportsTo, och Country BoundFields bör din GridView-markering se ut så här:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
          SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
          SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
          SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
          SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Ta en stund att se våra framsteg i en webbläsare. Nu bör du se en tabell med en post för varje anställd och fyra kolumner: en för anställdens efternamn, en för förnamn, en för titel och en för anställningsdatum.

Fälten LastName, FirstName, Title och HireDate visas för varje anställd

Bild 3: Fälten LastName, FirstName, Titleoch HireDate visas för varje anställd (Klicka om du vill visa en bild i full storlek)

Steg 2: Visa för- och efternamn i en enda kolumn

För närvarande visas varje medarbetares för- och efternamn i en separat kolumn. Det kan vara trevligt att kombinera dem i en enda kolumn i stället. För att åstadkomma detta måste vi använda ett TemplateField. Vi kan antingen lägga till ett nytt TemplateField, lägga till den behövliga markup- och databindningssyntaxen, och sedan ta bort FirstName och LastName BoundFields, eller så kan vi konvertera FirstName BoundField till ett TemplateField, redigera TemplateField för att inkludera LastName värdet, och sedan ta bort LastName BoundField.

Båda metoderna ger samma resultat, men personligen gillar jag att konvertera BoundFields till TemplateFields när det är möjligt eftersom konverteringen automatiskt lägger till en ItemTemplate och EditItemTemplate med webbkontroller och databindningssyntax för att efterlikna utseendet och funktionerna i BoundField. Fördelen är att vi behöver arbeta mindre med TemplateField eftersom konverteringsprocessen har utfört en del av arbetet åt oss.

Om du vill konvertera ett befintligt BoundField till ett TemplateField klickar du på länken Redigera kolumner från GridViews smarta tagg och öppnar dialogrutan Fält. Välj boundfield för att konvertera från listan i det nedre vänstra hörnet och klicka sedan på länken "Konvertera det här fältet till ett TemplateField" i det nedre högra hörnet.

Konvertera ett BoundField till ett TemplateField från dialogrutan Fält

Bild 4: Konvertera ett BoundField till ett mallfält från dialogrutan Fält (Klicka om du vill visa en bild i full storlek)

Gå vidare och konvertera FirstName BoundField till ett TemplateField. Efter den här ändringen finns det ingen klarsynt skillnad i designern. Det beror på att om du konverterar BoundField till ett TemplateField skapas ett TemplateField som underhåller utseendet och känslan hos BoundField. Trots att det inte finns någon visuell skillnad just nu i designern har den här konverteringsprocessen ersatt BoundFields deklarativa syntax – – <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> med följande TemplateField-syntax:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Som du ser består TemplateField av två mallar som ItemTemplate har en Etikett vars Text egenskap är inställd på värdet FirstName för datafältet och en EditItemTemplate med en TextBox-kontroll vars Text egenskap också är inställd på FirstName datafältet. Databindningssyntaxen - <%# Bind("fieldName") %> - anger att datafältet fieldName är bundet till den angivna webbkontrollegenskapen.

För att lägga till LastName datafältvärdet i det här TemplateField måste vi lägga till en annan etikett-webbkontroll i ItemTemplate och binda dess Text-egenskap till LastName. Detta kan göras antingen för hand eller via designern. Om du vill göra det för hand lägger du helt enkelt till lämplig deklarativ syntax i ItemTemplate:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Om du vill lägga till den via designern klickar du på länken Redigera mallar från GridViews smarta tagg. Då visas Mallredigeringsgränssnittet för GridView. I det här gränssnittets smarta tagg finns en lista över mallarna i GridView. Eftersom vi bara har ett TemplateField just nu är de enda mallarna som anges i listrutan dessa mallar för FirstName TemplateField tillsammans med EmptyDataTemplate och PagerTemplate. Mallen EmptyDataTemplate , om den anges, används för att återge GridView-utdata om det inte finns några resultat i data som är bundna till GridView. Om det PagerTemplateanges används den för att återge växlingsgränssnittet för en GridView som stöder växling.

GridViews mallar kan redigeras via designern

Bild 5: GridViews mallar kan redigeras via designern (klicka om du vill visa en bild i full storlek)

Om du också vill visa LastName i FirstName TemplateField, dra kontrollen Etikett från verktygslådan till FirstName TemplateFields ItemTemplate i GridViews mallredigeringsgränssnitt.

Lägg till en etikettwebbkontroll i FirstName TemplateFields ItemTemplate

Bild 6: Lägg till en etikettwebbkontroll i FirstName TemplateFields ItemTemplate (Klicka om du vill visa en bild i full storlek)

Nu har etikettwebbkontrollen som lagts till i TemplateField dess Text egenskap inställd på "Etikett". Vi måste ändra detta så att den här egenskapen är bunden till värdet för LastName datafältet i stället. Om du vill göra detta klickar du på etikettkontrollens smarta tagg och väljer alternativet Redigera DataBindings.

Välj alternativet Redigera databindningar från etikettens smarta tagg

Bild 7: Välj alternativet Redigera databindningar från etikettens smarta tagg (Klicka om du vill visa en bild i full storlek)

Då visas dialogrutan DataBindings. Härifrån kan du välja den egenskap som ska delta i databindning från listan till vänster och välja det fält som data ska bindas till från listrutan till höger. Välj egenskapen Text till vänster och fältet LastName från höger och klicka på OK.

Binda textegenskapen till datafältet LastName

Bild 8: Binda egenskapen Text till LastName datafältet (Klicka om du vill visa en bild i full storlek)

Anmärkning

I dialogrutan DataBindings kan du ange om du vill utföra dubbelriktad databindning. Om du lämnar detta avmarkerat används syntaxen för <%# Eval("LastName")%> databindning i stället för <%# Bind("LastName")%>. Antingen metod är bra för den här handledningen. Dubbelriktad databindning blir viktigt när du infogar och redigerar data. För att bara visa data fungerar dock båda tillvägagångssätten lika bra. Vi kommer att diskutera dubbelriktad databindning i detalj i framtida handledningar.

Ta en stund och titta på den här sidan via en webbläsare. Som du ser innehåller GridView fortfarande fyra kolumner. Kolumnen visar dock FirstNamenu både datafältvärdena FirstName och LastName .

Värden för både FirstName och LastName visas i en enda kolumn

Bild 9: Både FirstName värdena och LastName visas i en enskild kolumn (klicka om du vill visa en bild i full storlek)

För att slutföra det här första steget tar du bort LastName BoundField och byter namn på FirstName egenskapen TemplateField HeaderText till "Name". Efter dessa ändringar bör GridViews deklarativa markering se ut så här:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="" Title" />
        <asp:BoundField DataField="HireDate" HeaderText="
            HireDate" SortExpression="" HireDate" />
    </Columns>
</asp:GridView>

Varje medarbetares för- och efternamn visas i en kolumn

Bild 10: Varje medarbetares för- och efternamn visas i en kolumn (Klicka om du vill visa en bild i full storlek)

Steg 3: Använda kalenderkontrollen för att visa fältetHiredDate

Att visa ett datafältvärde som text i en GridView är lika enkelt som att använda ett BoundField. I vissa scenarier uttrycks dock data bäst med hjälp av en viss webbkontroll i stället för bara text. En sådan anpassning av visning av data är möjlig med TemplateFields. I stället för att till exempel visa medarbetarens anställningsdatum som text kan vi visa en kalender (med kalenderkontrollen) med anställningsdatumet markerat.

Det gör du genom att börja med att HiredDate konvertera BoundField till ett TemplateField. Gå bara till GridViews smarta tagg och klicka på länken Redigera kolumner och öppna dialogrutan Fält. HiredDate Välj BoundField och klicka på "Konvertera det här fältet till ett TemplateField".

Konvertera HiredDate BoundField till ett TemplateField

Bild 11: Konvertera HiredDate BoundField till ett mallfält (klicka om du vill visa en bild i full storlek)

Som vi såg i steg 2 ersätter detta BoundField med ett TemplateField som innehåller en ItemTemplate och EditItemTemplate med en etikett och textruta vars Text egenskaper är bundna till HiredDate värdet med hjälp av databindningssyntaxen <%# Bind("HiredDate")%>.

Om du vill ersätta texten med en kalenderkontroll redigerar du mallen genom att ta bort etiketten och lägga till en kalenderkontroll. I Designer väljer du Redigera mallar från GridViews smarta tagg och väljer HireDate TemplateFields ItemTemplate i listrutan. Ta sedan bort kontrollen Etikett och dra en kalenderkontroll från verktygslådan till mallredigeringsgränssnittet.

Lägg till en kalenderkontroll i HireDate TemplateFields ItemTemplate

Bild 12: Lägg till en kalenderkontroll i HireDate TemplateFields ItemTemplate (Klicka om du vill visa en bild i full storlek)

Vid den här tidpunkten innehåller varje rad i GridView en kalenderkontroll i dess HiredDate TemplateField. Den anställdes faktiska HiredDate värde anges dock inte någonstans i kalenderkontrollen, vilket gör att varje kalenderkontroll som standard visar den aktuella månaden och datumet. För att åtgärda detta måste vi tilldela varje anställds HiredDate till kalenderkontrollens egenskaper SelectedDate och VisibleDate .

Välj Redigera DataBindings i kalenderkontrollens smarta tagg. Sedan binder du både SelectedDate och VisibleDate egenskaper till HiredDate datafältet.

Binda egenskaperna SelectedDate och VisibleDate till datafältet HiredDate

Bild 13: Binda SelectedDate egenskaperna och VisibleDate till HiredDate datafältet (klicka om du vill visa en bild i full storlek)

Anmärkning

Kalenderkontrollens valda datum behöver inte nödvändigtvis vara synligt. En kalender kan till exempelha 1 augusti 1999 som valt datum, men visas den aktuella månaden och året. Det valda datumet och det synliga datumet anges av kalenderkontrollens SelectedDate och VisibleDate egenskaperna. Eftersom vi både vill välja medarbetarens HiredDate och se till att den visas måste vi binda båda dessa egenskaper till HireDate datafältet.

När du visar sidan i en webbläsare visar kalendern nu månaden för den anställdes anställningsdatum och väljer det specifika datumet.

Medarbetarens anställningsdatum visas i kalenderkontroll

Bild 14: Medarbetarens HiredDate visas i kalenderkontrollen (klicka om du vill visa en bild i full storlek)

Anmärkning

I motsats till alla exempel som vi har sett hittills har vi i den här självstudien inte angett egenskapen EnableViewState till False för denna GridView. Anledningen till det här beslutet är att klicka på kalenderkontrollens datum orsakar ett återanrop, vilket gör att kalenderns valda datum ställs in på det datum som precis klickats på. Om GridView-vytillståndet är inaktiverat återställs dock GridView-data på varje postback till dess underliggande datakälla, vilket gör att kalenderns valda datum anges tillbaka till medarbetarens HireDateoch skriver över det datum som användaren har valt.

I den här handledningen är detta en meningslös diskussion eftersom användaren inte kan uppdatera medarbetarens HireDate. Det är förmodligen bäst att konfigurera kalenderkontrollen så att dess datum inte kan väljas. Oavsett visar den här handledningen att view state i vissa fall måste vara aktiverat för att tillhandahålla viss funktionalitet.

Steg 4: Visar antalet dagar som medarbetaren har arbetat för företaget

Hittills har vi sett två program av TemplateFields:

  • Kombinera två eller flera datafältvärden i en kolumn och
  • Uttrycka ett datafältvärde med hjälp av en webbkontroll i stället för text

En tredje användning av TemplateFields är att visa metadata om GridViews underliggande data. Förutom att visa anställdas anställningsdatum kanske vi också vill ha en kolumn som visar hur många totala dagar de har varit på jobbet.

Ännu en användning av TemplateFields uppstår i scenarier när underliggande data måste visas på ett annat sätt i webbsiderapporten än i det format som lagras i databasen. Anta att tabellen Employees hade ett Gender fält som lagrade tecknet M eller F som anger könet på medarbetaren. När du visar den här informationen på en webbsida kanske vi vill visa könet som antingen "Man" eller "Kvinna", i stället för bara "M" eller "F".

Båda dessa scenarier kan hanteras genom att skapa en formateringsmetod i den ASP.NET sidans kod bakom-klass (eller i ett separat klassbibliotek, implementerat som en Shared metod) som anropas från mallen. En sådan formateringsmetod anropas från mallen med samma databindningssyntax som vi såg tidigare. Formateringsmetoden kan innehålla valfritt antal parametrar, men måste returnera en sträng. Den här returnerade strängen är HTML-koden som matas in i mallen.

För att illustrera det här konceptet ska vi utöka vår självstudiekurs för att visa en kolumn som visar det totala antalet dagar som en anställd har varit på jobbet. Den här formateringsmetoden tar in ett Northwind.EmployeesRow objekt och returnerar antalet dagar som medarbetaren har använts som en sträng. Den här metoden kan läggas till i ASP.NET-sidans kod bakom-klass, men måste markeras som Protected eller Public för att kunna nås från mallen.

Protected Function DisplayDaysOnJob(employee As Northwind.EmployeesRow) As String
    ' Make sure HiredDate is not NULL... if so, return "Unknown"
    If employee.IsHireDateNull() Then
        Return "Unknown"
    Else
        ' Returns the number of days between the current
        ' date/time and HireDate
        Dim ts As TimeSpan = DateTime.Now.Subtract(employee.HireDate)
        Return ts.Days.ToString("#,##0")
    End If
End Function

Eftersom fältet HiredDate kan innehålla NULL databasvärden måste vi först se till att värdet inte NULL är innan du fortsätter med beräkningen. Om värdet HiredDate är NULLreturnerar vi bara strängen "Okänd". Om det inte NULLär det beräknar vi skillnaden mellan aktuell tid och HiredDate värdet och returnerar antalet dagar.

För att kunna använda den här metoden måste vi anropa den från ett TemplateField i GridView med hjälp av syntaxen för databindning. Börja med att lägga till ett nytt TemplateField i GridView genom att klicka på länken Redigera kolumner i GridViews smarta tagg och lägga till ett nytt TemplateField.

Lägga till ett nytt mallfält i GridView

Bild 15: Lägg till ett nytt mallfält i GridView (Klicka om du vill visa en bild i full storlek)

Ställ in den här nya TemplateField-egenskapen HeaderText på "Days on the Job" (Dagar på jobbet) och dess ItemStyleHorizontalAlign egenskap till Center. Om du vill anropa DisplayDaysOnJob metoden från mallen lägger du till en ItemTemplate och använder följande syntax för databindning:

<%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
    Northwind.EmployeesRow)) %>

Container.DataItem returnerar ett DataRowView objekt som motsvarar posten DataSource som är bunden till GridViewRow. Dess Row-egenskap returnerar det starkt typade Northwind.EmployeesRow, som skickas till DisplayDaysOnJob-metoden. Syntaxen för denna databindning kan visas direkt i ItemTemplate (som visas i den deklarativa syntaxen nedan) eller tilldelas Text-egenskapen för en etikettwebbkontroll.

Anmärkning

I stället för att skicka in en EmployeesRow instans kan vi också skicka in HireDate värdet med hjälp av <%# DisplayDaysOnJob(Eval("HireDate")) %>. Metoden returnerar dock Eval en Object, så vi måste ändra vår DisplayDaysOnJob metodsignatur för att acceptera en indataparameter av typen Object, i stället. Vi kan inte blint omvandla anropet Eval("HireDate") till en DateTime eftersom HireDate kolumnen i Employees tabellen kan innehålla NULL värden. Därför skulle vi behöva acceptera en Object som indataparameter för DisplayDaysOnJob metoden, kontrollera om den hade ett databasvärde NULL (som kan utföras med hjälp av Convert.IsDBNull(objectToCheck)) och sedan fortsätta därefter.

På grund av dessa subtiliteter har jag valt att skicka in hela EmployeesRow instans. I nästa handledning kommer vi att se ett mer passande exempel på att använda syntaxen Eval("columnName") för att skicka en parameter till en formateringsmetod.

Följande visar den deklarativa syntaxen för vårt GridView efter att TemplateField har lagts till och DisplayDaysOnJob metoden som anropas från ItemTemplate:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="EmployeeID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name"
          SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="" Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate" SortExpression="
            HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
                </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
                    Northwind.EmployeesRow)) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Bild 16 visar den slutförda självstudiekursen när den visas via en webbläsare.

Antalet dagar som medarbetaren har varit på jobbet visas

Bild 16: Antalet dagar som medarbetaren har varit på jobbet visas (Klicka om du vill visa en bild i full storlek)

Sammanfattning

TemplateField i GridView-kontrollen ger en högre grad av flexibilitet när det gäller att visa data än vad som är tillgängligt med de andra fältkontrollerna. TemplateFields är idealiska för situationer där:

  • Flera datafält måste visas i en GridView-kolumn
  • Data uttrycks bäst med hjälp av en webbkontroll i stället för oformaterad text
  • Utdata beror på underliggande data, till exempel att visa metadata eller formatera om data

Förutom att anpassa visningen av data används TemplateFields också för att anpassa användargränssnitten som används för att redigera och infoga data, som vi ser i framtida självstudier.

De kommande två självstudierna fortsätter att utforska mallar, och börjar med en titt på hur du använder TemplateFields i en DetailsView. Därefter vänder vi oss till FormView, som använder mallar i stället för fält för att ge större flexibilitet i layouten och strukturen för data.

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 handledningen var Dan Jagers. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.