Visa data med kontrollerna DataList och Repeater (VB)

av Scott Mitchell

Ladda ned PDF

I de föregående handledningarna har vi använt GridView-kontrollen för att visa data. Från och med den här självstudiekursen tittar vi på hur du skapar vanliga rapporteringsmönster med kontrollerna DataList och Repeater, och börjar med grunderna för att visa data med dessa kontroller.

Inledning

I alla exempel under de senaste 28 handledningarna, om vi behövde visa flera poster från en datakälla vände vi oss till GridView-kontrollen. GridView återger en rad för varje post i datakällan och visar postens datafält i kolumner. Medan GridView gör det enkelt att visa, bläddra igenom, sortera, redigera och ta bort data, är dess utseende lite boxigt. Dessutom är markeringen som ansvarar för GridViews struktur fixad, den innehåller en HTML <table> med en tabellrad (<tr>) för varje post och en tabellcell (<td>) för varje fält.

För att ge en större grad av anpassning av utseendet och renderad kod när du visar flera poster erbjuder ASP.NET 2.0 kontrollerna DataList och Repeater (som båda också var tillgängliga i ASP.NET version 1.x). Kontrollerna DataList och Repeater återger sitt innehåll med hjälp av mallar i stället för BoundFields, CheckBoxFields, ButtonFields och så vidare. Precis som GridView renderas DataList som en HTML, <table>men tillåter att flera datakällposter visas per tabellrad. Repeatern, å andra sidan, återger ingen ytterligare markering än vad du uttryckligen anger och är en idealisk kandidat när du behöver exakt kontroll över den markering som sänds ut.

Under det kommande dussintalet självstudiekurser kommer vi att titta på hur du skapar vanliga rapporteringsmönster med kontrollerna DataList och Repeater, och vi börjar med grunderna för att visa data med dessa kontrollmallar. Vi får se hur du formaterar dessa kontroller, hur du ändrar layouten för datakällposter i DataList, vanliga huvud-/detaljscenarier, sätt att redigera och ta bort data, hur du bläddrar igenom poster och så vidare.

Steg 1: Lägga till webbsidorna DataList och Repeater Tutorial

Innan vi börjar den här handledningen, låt oss först ta en stund för att lägga till de ASP.NET sidor som vi behöver för den här handledningen och de kommande självstudierna som handlar om att visa data med hjälp av DataList och Repeater. Börja med att skapa en ny mapp i projektet med namnet DataListRepeaterBasics. Lägg sedan till följande fem ASP.NET sidor i den här mappen, där alla har konfigurerats för att använda huvudsidan Site.master:

• Default.aspx
• Basics.aspx
• Formatting.aspx
• RepeatColumnAndDirection.aspx
• NestedControls.aspx

Bild 1: Skapa en DataListRepeaterBasics mapp och lägg till handledningens ASP.NET-sidor

Default.aspx Öppna sidan och dra SectionLevelTutorialListing.ascx användarkontrollen från UserControls mappen till designytan. Den här användarkontrollen, som vi skapade i självstudien Huvudsidor och Webbplatsnavigering , räknar upp webbplatskartan och visar självstudierna från det aktuella avsnittet i en punktlista.

Bild 2: Lägg till SectionLevelTutorialListing.ascx användarkontrollen Default.aspx i (Klicka om du vill visa en bild i full storlek)

För att punktlistan ska visa de självstudiekurser för DataList och Repeater som vi kommer att skapa måste vi lägga till dem i webbplatsöversikten. Web.sitemap Öppna filen och lägg till följande kod efter nodkoden för att lägga till anpassade knappar på webbplatskartan:

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

Bild 3: Uppdatera webbplatskartan så att den innehåller de nya ASP.NET sidorna

Steg 2: Visa produktinformation med DataList

På samma sätt som FormView är DataList-kontrollens återgivna utdata beroende av mallar i stället för BoundFields, CheckBoxFields och så vidare. Till skillnad från FormView är DataList utformad för att visa en uppsättning poster i stället för en ensam. Låt oss börja den här självstudien med en titt på att binda produktinformation till en DataList. Börja med att öppna sidan Basics.aspx i DataListRepeaterBasics mappen. Dra sedan en DataList från verktygslådan till designern. Som figur 4 illustrerar visar Designer dataList-mallarna som en grå ruta innan du anger dem.

Bild 4: Dra DataList från verktygslådan till designern (klicka för att visa bilden i full storlek)

Från den smarta taggen DataLists lägger du till en ny ObjectDataSource och konfigurerar den så att den ProductsBLL använder klassens GetProducts metod. Eftersom vi skapar en skrivskyddad DataList i den här självstudien ställer du in listrutan på (Ingen) på guidens flikar INSERT, UPDATE och DELETE.

Bild 5: Välj att skapa en ny ObjectDataSource (klicka för att visa bilden i full storlek)

Konfigurera ObjectDataSource för att använda klassen ProductsBLL

Bild 6: Konfigurera ObjectDataSource att använda ProductsBLL klassen (Klicka om du vill visa en bild i full storlek)

Figur 7: Hämta information om alla produkter med hjälp GetProducts av metoden (klicka för att se bilden i full storlek)

När du har konfigurerat ObjectDataSource och associerat den med DataList via dess smarta tagg skapar Visual Studio automatiskt en ItemTemplate i DataList som visar namnet och värdet för varje datafält som returneras av datakällan (se koden nedan). Det här standardutseendet ItemTemplate är identiskt med de mallar som skapas automatiskt när du binder en datakälla till FormView via designern.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Låt oss ta en stund för att förbättra utseendet på den här mallen. I stället för att visa alla datafält, låt oss bara visa produktens namn, leverantör, kategori, kvantitet per enhet och enhetspris. Dessutom, låt s visa namnet i en <h4> rubrik och placera ut de återstående fälten med hjälp av en under rubriken <table> .

För att göra dessa ändringar kan du antingen använda mallredigeringsfunktionerna i Designer från DataLists smarta tagg, klicka på länken Redigera mallar, eller så kan du ändra mallen manuellt via sidans deklarativa syntax. Om du använder alternativet Redigera mallar i Designer kan det hända att den resulterande markeringen inte matchar följande kod exakt, men när den visas genom en webbläsare bör den se mycket lik ut som skärmbilden som visas i figur 8.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Att lämna kvar etikettwebbkontrollerna har dock två fördelar. För det första ger det ett enklare sätt att formatera data baserat på data, som vi kommer att se i nästa handledning. För det andra visar alternativet Redigera mallar i Designer inte deklarativ syntax för databindning som visas utanför någon webbkontroll. Gränssnittet Redigera mallar är i stället utformat för att underlätta arbete med statisk kod och webbkontroller och förutsätter att all databindning görs via dialogrutan Redigera databindningar, som du kommer åt via de smarta etiketterna för webbkontroller.

När jag arbetar med DataList, som ger möjlighet att redigera mallarna via designern, föredrar jag därför att använda etikettwebbkontroller så att innehållet är tillgängligt via gränssnittet Redigera mallar. Som vi kommer att se inom kort kräver repeatern att mallens innehåll redigeras från källvyn. Följaktligen, när jag skapar Repeaters mallar, utelämnar jag ofta etikettwebbkontrollerna om jag inte vet att jag behöver formatera utseendet på den databundna texten baserat på programmatisk logik.

Figur 8: Varje produkts utdata återges med hjälp av DataLists ItemTemplate s (klicka för att visa bilden i full storlek)

Steg 3: Förbättra utseendet på DataList

Precis som GridView erbjuder DataList ett antal stilrelaterade egenskaper, till Fontexempel , ForeColor, BackColor, CssClassItemStyleAlternatingItemStyleSelectedItemStyle, och så vidare. När vi arbetade med kontrollerna GridView och DetailsView skapade vi hudfiler i DataWebControls temat som fördefinierade CssClass egenskaperna för dessa två kontroller och CssClass egenskapen för flera av deras underegenskaper (RowStyle, HeaderStyleoch så vidare). Låt s göra samma sak för DataList.

Som beskrivs i självstudiekursen Visa data med ObjectDataSource anger en skalfil de standardutseenderelaterade egenskaperna för en webbkontroll. ett tema är en samling skal-, CSS-, bild- och JavaScript-filer som definierar ett visst utseende och känsla för en webbplats. I självstudien Visa data med ObjectDataSource skapade vi ett DataWebControls tema (som implementeras som en mapp i mappen App_Themes ) som för närvarande har två skalfiler - GridView.skin och DetailsView.skin. Låt oss lägga till en tredje skalfil för att ange de fördefinierade formatinställningarna för DataList.

För att lägga till en skalfil, högerklicka på mappen App_Themes/DataWebControls , välj Lägg till ett nytt objekt och välj alternativet Skalfil från listan. Ge filen namnet DataList.skin.

Figur 9: Skapa en ny skalfil med namnet DataList.skin (klicka för att visa bilden i full storlek)

Använd följande kod för DataList.skin filen:

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

Dessa inställningar tilldelar samma CSS-klasser till lämpliga DataList-egenskaper som användes med GridView- och DetailsView-kontrollerna. CSS-klasserna som används här DataWebControlStyle, AlternatingRowStyle, RowStyle, och så vidare definieras i filen Styles.css och lades till i tidigare självstudier.

När den här skalfilen läggs till uppdateras DataLists utseende i Designer (du kan behöva uppdatera Designer-vyn för att se effekterna av den nya skalfilen. Välj Uppdatera på Visa-menyn). Som figur 10 visar har varje alternerande produkt en ljusrosa bakgrundsfärg.

Figur 10: Skapa en ny skalfil med namnet DataList.skin (klicka för att visa bilden i full storlek)

Steg 4: Utforska DataLists andra mallar

Förutom har ItemTemplateDataList stöd för sex andra valfria mallar:

• HeaderTemplate Om det anges läggs en rubrikrad till i utdata och används för att återge den här raden
• AlternatingItemTemplate Används för att återge alternerande objekt
• SelectedItemTemplateanvänds för att återge det valda objektet; Det markerade objektet är det objekt vars index motsvarar egenskapen DataList s SelectedIndex
• EditItemTemplate Används för att återge objektet som redigeras
• SeparatorTemplate Om det anges lägger du till en avgränsare mellan varje objekt och används för att återge den här avgränsaren
• FooterTemplate - Om det anges lägger en sidfotsrad till i utdata och används för att återge den här raden

När du anger HeaderTemplate eller FooterTemplatelägger DataList till ytterligare en sidhuvuds- eller sidfotsrad i de renderade utdata. Precis som med GridViews sidhuvuds- och sidfotsrader är sidhuvudet och sidfoten i en DataList inte bundna till data. Därför returnerar alla databindningssyntaxer i HeaderTemplate eller FooterTemplate som försöker komma åt bundna data en tom sträng.

I vårt exempel kan du visa titeln Produktinformation högst upp i DataLists resultat i en <h3> rubrik. För att åstadkomma detta, lägg till en HeaderTemplate med lämplig markering. Från designern kan detta åstadkommas genom att klicka på länken Redigera mallar i DataLists smarta etikett, välja Header Template från rullgardinsmenyn och skriva in texten efter att ha valt alternativet Heading 3 från rullgardinsmenyn för stil (se figur 11).

Figur 11: Lägg till en HeaderTemplate med texten Produktinformation (klicka för att se bilden i full storlek)

Alternativt kan detta läggas till deklarativt genom att ange följande kod i taggarna <asp:DataList> :

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

För att lägga till lite utrymme mellan varje produktlista, låt oss lägga till en SeparatorTemplate som innehåller en rad mellan varje avsnitt. Den vågräta linjetaggen (<hr>) lägger till en sådan avdelare. Skapa så SeparatorTemplate att den har följande markering:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

När du har gjort detta tillägg bör sidan se ut som i figur 12 när du tittar på den genom en webbläsare. Notera rubrikraden och raden mellan varje produktlista.

Figur 12: DataList innehåller en rubrikrad och en vågrät linje mellan varje produktlista (klicka för att visa bilden i full storlek)

Steg 5: Återge specifik kod med Repeater-kontrollen

Om du gör en Visa/Källa från din webbläsare när du besöker DataList-exemplet från figur 12, ser du att DataList genererar en HTML <table> som innehåller en tabellrad (<tr>) med en enda tabellcell (<td>) för varje objekt som är bundet till DataList. Dessa utdata är i själva verket identiska med vad som skulle avges från en GridView med ett enda TemplateField. Som vi kommer att se i en framtida självstudiekurs tillåter DataList ytterligare anpassning av utdata, vilket gör att vi kan visa flera datakällposter per tabellrad.

Vad händer om du inte vill generera en HTML-kod <table>? Om du vill ha fullständig kontroll över den kod som genereras av en datawebbkontroll måste vi använda Repeater-kontrollen. Precis som DataList är Repeater konstruerad baserat på mallar. Repeatern erbjuder dock bara följande fem mallar:

• HeaderTemplate Om det anges läggs den angivna markeringen till före objekten
• ItemTemplate Används för att återge objekt
• AlternatingItemTemplate Om det tillhandahålls, används för att återge alternerande objekt
• SeparatorTemplate Om det anges läggs den angivna markeringen till mellan varje objekt
• FooterTemplate - Om det anges, lägger till den angivna markeringen efter objekten

I ASP.NET 1.x användes ofta repeaterkontrollen för att visa en punktlista vars data kom från en viss datakälla. I ett sådant fall HeaderTemplate skulle and FooterTemplates innehålla de inledande respektive avslutande <ul> taggarna, medan de skulle innehålla ItemTemplate element med syntax för <li> databindning. Den här metoden kan fortfarande användas i ASP.NET 2.0, vilket vi såg i två exempel i självstudiekursen för huvudsidor och webbplatsnavigering :

• Site.master På huvudsidan användes en repeater för att visa en punktlista med innehållet i webbplatsöversikten på den översta nivån (grundläggande rapportering, filtreringsrapporter, anpassad formatering och så vidare), en annan, kapslad repeater användes för att visa de underordnade avsnitten i avsnitten på den översta nivån
• I SectionLevelTutorialListing.ascxanvändes en repeater för att visa en punktlista över de underordnade avsnitten i den aktuella webbplatsöversikten

Repeatern fungerar som en webbkontroll för att fånga alla data. Om det inte finns någon befintlig kontroll som genererar den kod som behövs kan du använda Repeater-kontrollen. För att illustrera hur du använder repeatern, låt oss ha listan med kategorier som visas ovanför produktinformationsdatalistan som skapades i steg 2. Låt oss särskilt ha kategorierna visade i en HTML-kod <table> med en rad där varje kategori visas som en kolumn i tabellen.

Det gör du genom att börja med att dra en Repeater-kontroll från Verktygslådan till Designern, ovanför Produktinformationsdatalistan. Precis som med DataList visas Repeater till en början som en grå ruta tills dess mallar har definierats.

Figur 13: Lägg till en repeater i designern (klicka för att visa bilden i full storlek)

Det finns bara ett alternativ i Repeaterns smarta etikett: Välj Datakälla. Välj att skapa en ny ObjectDataSource och konfigurera den så att den CategoriesBLL använder klassens GetCategories metod.

Bild 14: Skapa en ny ObjectDataSource (klicka för att visa bilden i full storlek)

Bild 15: Konfigurera ObjectDataSource för att använda klassen (CategoriesBLL i full storlek)

Figur 16: Hämta information om alla kategorier med hjälp GetCategories av metoden (klicka för att visa bilden i full storlek)

Till skillnad från DataList skapar Visual Studio inte automatiskt en ItemTemplate för Repeater när den har bundits till en datakälla. Dessutom kan Repeaters mallar inte konfigureras via Designer och måste anges deklarativt.

För att visa kategorierna som en enda rad <table> med en kolumn för varje kategori måste repeatern avge markering som liknar följande:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

<td>Category X</td> Eftersom texten är den del som upprepas kommer detta att visas i repeaterns ItemTemplate. Markeringen som visas före den - <table><tr> - kommer att placeras i medan HeaderTemplate den avslutande markeringen - </tr></table> - kommer att placeras i FooterTemplate. För att ange dessa mallinställningar, gå till den deklarativa delen av ASP.NET-sidan genom att klicka på knappen Källa i det nedre vänstra hörnet och skriv in följande syntax:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Repeatern sänder ut den exakta markeringen som anges av dess mallar, varken mer eller mindre. Figur 17 visar Repeaterns utdata när viewed genom en webbläsare.

Figur 17: En Single-Row HTML <table> listar varje kategori i en separat kolumn (klicka för att visa bilden i full storlek)

Steg 6: Förbättra utseendet på repeatern

Eftersom repeatern sänder ut exakt den markering som anges av dess mallar, bör det inte komma som någon överraskning att det inte finns några stilrelaterade egenskaper för repeatern. För att ändra utseendet på innehållet som genereras av Repeater måste vi manuellt lägga till det HTML- eller CSS-innehåll som behövs direkt i Repeaterns mallar.

I vårt exempel ska vi låta kategorikolumnerna växla bakgrundsfärger, som med de alternerande raderna i DataList. För att åstadkomma detta måste vi tilldela RowStyle CSS-klassen till varje Repeater-objekt och CSS-klassen AlternatingRowStyle till varje alternerande Repeater-objekt via ItemTemplateAlternatingItemTemplate och-mallarna, så här:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Låt oss också lägga till en rubrikrad i utdata med texten Product Categories. Eftersom vi inte vet hur många kolumner vårt resultat <table> kommer att bestå av, är det enklaste sättet att generera en rubrikrad som garanterat sträcker sig över alla kolumner att använda två<table> s. Den första <table> kommer att innehålla två rader, rubrikraden och en rad som kommer att innehålla den andra, enradiga <table> som har en kolumn för varje kategori i systemet. Det innebär att vi vill generera följande kod:

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

HeaderTemplate Följande och FooterTemplate resulterar i önskad markering:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Figur 18 visar repeatern efter att dessa ändringar har gjorts.

Figur 18: Kategorikolumnerna alternerar i bakgrundsfärg och inkluderar en rubrikrad (klicka för att visa bilden i full storlek)

Sammanfattning

Medan GridView-kontrollen gör det enkelt att visa, redigera, ta bort, sortera och bläddra igenom data, är utseendet väldigt boxigt och rutnätsliknande. Om du vill ha mer kontroll över utseendet måste vi använda antingen kontrollerna DataList eller Repeater. Båda dessa kontroller visar en uppsättning poster med mallar i stället för BoundFields, CheckBoxFields och så vidare.

DataList återges som en HTML <table> som som standard visar varje datakällpost i en enda tabellrad, precis som en GridView med en enda TemplateField. Som vi kommer att se i en framtida handledning tillåter dock DataList att flera poster visas per tabellrad. Repeatern, å andra sidan, avger strikt den markering som anges i dess mallar; Den lägger inte till någon ytterligare kod och används därför ofta för att visa data i andra HTML-element än a <table> (t.ex. i en punktlista).

Även om DataList och Repeater erbjuder mer flexibilitet i sina renderade utdata, saknar de många av de inbyggda funktionerna som finns i GridView. Som vi kommer att undersöka i kommande handledningar kan vissa av dessa funktioner kopplas in igen utan alltför mycket ansträngning, men kom ihåg att användningen av DataList eller Repeater i stället för GridView begränsar de funktioner du kan använda utan att behöva implementera dessa funktioner själv.

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. Ledande granskare för den här självstudien var Yaakov Ellis, Liz Shulok, Randy Schmidt och Stacy Park. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.