Dela via

Anpassad formatering baserat på data (C#)

av Scott Mitchell

Ladda ned PDF

Du kan justera formatet för GridView, DetailsView eller FormView baserat på de data som är bundna till den på flera sätt. I den här självstudien ska vi titta på hur du utför databunden formatering med hjälp av DataBound- och RowDataBound-händelsehanterare.

Inledning

Utseendet på kontrollerna GridView, DetailsView och FormView kan anpassas genom en mängd olika stilrelaterade egenskaper. Egenskaper som CssClass, Font, BorderWidth, BorderStyle, BorderColor, Widthoch Height, bland annat, dikterar den renderade kontrollens allmänna utseende. Med egenskaper som HeaderStyle, RowStyle, AlternatingRowStyleoch andra kan samma formatinställningar tillämpas på vissa avsnitt. På samma sätt kan dessa formatinställningar tillämpas på fältnivå.

I många scenarier beror dock formateringskraven på värdet för de data som visas. Om du till exempel vill uppmärksamma produkter som är slut i lager kan en rapport som listar produktinformation ställa in bakgrundsfärgen till gul för de produkter vars fält UnitsInStock och UnitsOnOrder båda är lika med 0. För att lyfta fram de dyrare produkterna kanske vi vill visa priserna på de produkter som kostar mer än 75,00 USD i ett fetstilt teckensnitt.

Du kan justera formatet för GridView, DetailsView eller FormView baserat på de data som är bundna till den på flera sätt. I den här handledningen ska vi titta på hur du utför databunden formatering med hjälp av de DataBound och RowDataBound händelsehanterare. I nästa handledning kommer vi att utforska en alternativ metod.

Använda DetailsView-kontrollensDataBoundhändelsehanterare

När data är bundna till en DetailsView, antingen från en datakällaskontroll eller genom att programmatiskt tilldela data till kontrollens DataSource egenskap och anropa dess DataBind() metod, sker följande stegsekvens:

  1. Datawebbkontrollens DataBinding händelse utlöses.
  2. Data är bundna till datawebbkontrollen.
  3. Datawebbkontrollens DataBound händelse utlöses.

Anpassad logik kan matas in direkt efter steg 1 och 3 via en händelsehanterare. Genom att skapa en händelsehanterare för DataBound händelsen kan vi programmatiskt fastställa de data som har bundits till datawebbkontrollen och justera formateringen efter behov. För att illustrera detta ska vi skapa en DetailsView som visar allmän information om en produkt, men som visar UnitPrice värdet i ett fetstilt, kursivt teckensnitt om det överskrider 75,00 USD.

Steg 1: Visa produktinformationen i en DetailsView

CustomColors.aspx Öppna sidan i CustomFormatting mappen, dra en DetailsView-kontroll från verktygslådan till designern, ange dess ID egenskapsvärde till ExpensiveProductsPriceInBoldItalicoch binda den till en ny ObjectDataSource-kontroll som anropar ProductsBLL klassens GetProducts() -metod. Detaljerade steg för att åstadkomma detta utelämnas här för korthet eftersom vi undersökte dem i detalj i tidigare självstudier.

När du har bundit ObjectDataSource till DetailsView kan du ändra fältlistan. Jag har valt att ta bort ProductID, SupplierID, CategoryID, UnitsInStock, UnitsOnOrder, ReorderLeveloch Discontinued BoundFields och bytt namn på och omformaterat de återstående BoundFields. Jag rensade också ut Width och Height inställningar. Eftersom DetailsView endast visar en enda post måste vi aktivera sidladdning för att slutanvändaren ska kunna visa alla produkter. Gör det genom att markera kryssrutan Aktivera paginering i DetailsViews smart-taggen.

Markera kryssrutan Aktivera sidindelning i smart-taggen i DetailsView

Bild 1: Markera kryssrutan Aktivera sidindelning i DetailsView's Smart Tag (Klicka för att visa bilden i full storlek)

Efter dessa ändringar blir DetailsView-markering:

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" 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" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Fields>
</asp:DetailsView>

Ta en stund att testa den här sidan i webbläsaren.

Kontrollen DetailsView visar en produkt i taget

Bild 2: Kontrollen DetailsView visar en produkt i taget (Klicka om du vill visa en bild i full storlek)

Steg 2: Programmatiskt fastställa värdet för data i DataBound-händelsehanteraren

För att kunna visa priset i ett fetstilt, kursivt teckensnitt för de produkter vars UnitPrice värde överstiger 75,00 USD måste vi först kunna bestämma UnitPrice värdet programmatiskt. För DetailsView kan detta utföras i DataBound händelsehanteraren. Om du vill skapa händelsehanteraren klickar du på DetailsView i designern och går sedan till fönstret Egenskaper. Tryck på F4 för att ta upp det, om det inte visas, eller gå till menyn Visa och välj menyalternativet Egenskaper fönster. I fönstret Egenskaper klickar du på blixtikonen för att visa informationsvyns händelser. Dubbelklicka sedan på DataBound händelsen eller skriv namnet på den händelsehanterare som du vill skapa.

Skapa en händelsehanterare för DataBound-händelsen

Bild 3: Skapa en händelsehanterare för DataBound händelsen

Detta skapar automatiskt händelsehanteraren och tar dig till koddelen där den har lagts till. Vid denna punkt kommer du att se:

protected void ExpensiveProductsPriceInBoldItalic_DataBound(object sender, EventArgs e)
{

}

Data som är bundna till DetailsView kan nås via egenskapen DataItem . Kom ihåg att vi binder våra kontroller till en starkt typad DataTable, som består av en samling starkt typade DataRow-instanser. När en DataTable är bunden till en DetailsView tilldelas den första datamängden i DataTable till egenskapen DataItem i DetailsView. Mer specifikt tilldelas egenskapen DataItem ett DataRowView objekt. Vi kan använda DataRowViews Row-egenskap för att få åtkomst till det underliggande DataRow-objektet, som faktiskt är en ProductsRow-instans. När vi har den här ProductsRow instansen kan vi fatta vårt beslut genom att bara granska objektets egenskapsvärden.

Följande kod visar hur du avgör om värdet som är bundet UnitPrice till DetailsView-kontrollen är större än 75,00 USD:

protected void ExpensiveProductsPriceInBoldItalic_DataBound(object sender, EventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((DataRowView)ExpensiveProductsPriceInBoldItalic.DataItem).Row;
    if (!product.IsUnitPriceNull() && product.UnitPrice > 75m)
    {
        // TODO: Make the UnitPrice text bold and italic
    }
}

Anmärkning

Eftersom UnitPrice kan ha ett NULL-värde i databasen kontrollerar vi först att vi inte har att göra med ett NULL-värde innan vi kommer åt ProductsRows UnitPrice-egenskap. Den här kontrollen är viktig eftersom om vi försöker komma åt UnitPrice egenskapen när den har ett NULL värde ProductsRow utlöser objektet ett StrongTypingException-undantag.

Steg 3: Formatera UnitPrice-värdet i DetailsView

Nu kan vi avgöra om värdet som är bundet UnitPrice till DetailsView har ett värde som överstiger 75,00 USD, men vi har ännu inte sett hur du programmatiskt justerar DetailsView-formateringen i enlighet med detta. Om du vill ändra formateringen för en hel rad i DetailsView kan du programmatiskt komma åt raden med hjälp av DetailsViewID.Rows[index]; om du vill ändra en viss cell kan du komma åt cellen med hjälp av DetailsViewID.Rows[index].Cells[index]. När vi har en referens till raden eller cellen kan vi sedan justera dess utseende genom att ange dess stilrelaterade egenskaper.

För att komma åt en rad programmässigt måste du känna till radens index, som börjar vid 0. Raden UnitPrice är den femte raden i DetailsView, vilket ger den ett index på 4 och gör den programmatiskt tillgänglig med .ExpensiveProductsPriceInBoldItalic.Rows[4] I det här läget kan hela radens innehåll visas i ett fetstilt, kursivt teckensnitt med hjälp av följande kod:

ExpensiveProductsPriceInBoldItalic.Rows[4].Font.Bold = true;
ExpensiveProductsPriceInBoldItalic.Rows[4].Font.Italic = true;

Detta gör dock både etiketten (Pris) och värdet fetstilt och kursivt. Om vi bara vill göra värdet fetstilt och kursivt måste vi tillämpa den här formateringen på den andra cellen på raden, vilket kan åstadkommas med hjälp av följande:

ExpensiveProductsPriceInBoldItalic.Rows[4].Cells[1].Font.Bold = true;
ExpensiveProductsPriceInBoldItalic.Rows[4].Cells[1].Font.Italic = true;

Eftersom våra självstudier hittills har använt formatmallar för att upprätthålla en ren separation mellan den renderade markerings- och formatinformationen, i stället för att ange de specifika formategenskaperna som visas ovan ska vi i stället använda en CSS-klass. Öppna formatmallen Styles.css och lägg till en ny CSS-klass med namnet ExpensivePriceEmphasis med följande definition:

.ExpensivePriceEmphasis
{
    font-weight: bold;
    font-style: italic;
}

DataBound I händelsehanteraren anger du sedan cellens CssClass egenskap till ExpensivePriceEmphasis. Följande kod visar DataBound händelsehanteraren i sin helhet:

protected void ExpensiveProductsPriceInBoldItalic_DataBound(object sender, EventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((DataRowView)ExpensiveProductsPriceInBoldItalic.DataItem).Row;
    if (!product.IsUnitPriceNull() && product.UnitPrice > 75m)
    {
        ExpensiveProductsPriceInBoldItalic.Rows[4].Cells[1].CssClass =
            "ExpensivePriceEmphasis";
    }
}

När du visar Chai, som kostar mindre än 75,00 USD, visas priset i ett vanligt teckensnitt (se bild 4). Men när du visar Mishi Kobe Niku, som har ett pris på $ 97,00, visas priset i ett fetstilt, kursivt teckensnitt (se bild 5).

Priser som är mindre än 75,00 USD visas i ett normalt teckensnitt

Bild 4: Priser som är mindre än 75,00 USD visas i ett normalt teckensnitt (klicka om du vill visa en bild i full storlek)

Priserna på dyra produkter visas i ett kursivt, fetstilt teckensnitt

Bild 5: Dyra produkters priser visas i ett fetstilt, kursivt teckensnitt (klicka om du vill visa en bild i full storlek)

Använda FormView-kontrollensDataBoundhändelsehanterare

Stegen för att fastställa underliggande data som är bundna till en FormView är identiska med dem för en DetailsView-skapa en DataBound händelsehanterare, omvandla DataItem egenskapen till lämplig objekttyp som är bunden till kontrollen och bestämma hur du ska fortsätta. FormView och DetailsView skiljer sig dock åt i hur användargränssnittets utseende uppdateras.

FormView innehåller inga BoundFields och saknar Rows därför samlingen. I stället består en FormView av mallar som kan innehålla en blandning av statisk HTML, webbkontroller och databindningssyntax. Att justera formatmallen för en FormView innebär vanligtvis att ändra formatet för en eller flera av webbkontrollerna i FormView-mallarna.

För att illustrera detta ska vi använda en FormView för att visa produkter som i föregående exempel, men den här gången ska vi visa bara produktnamnet och enheterna i lager med enheterna i lager som visas i ett rött teckensnitt om det är mindre än eller lika med 10.

Steg 4: Visa produktinformationen i en FormView

Lägg till en FormView på CustomColors.aspx sidan under DetailsView och ange dess ID egenskap till LowStockedProductsInRed. Binda FormView till kontrollen ObjectDataSource som skapades från föregående steg. Då skapas en ItemTemplate, EditItemTemplateoch InsertItemTemplate för FormView. Ta bort EditItemTemplate och InsertItemTemplate och förenkla ItemTemplate för att inkludera bara ProductName och UnitsInStock-värdena, var och en i sina egna etikettkontroller med lämpliga namn. Precis som med DetailsView från det tidigare exemplet, markera även kryssrutan Aktivera personsökning i FormView:s smarta tagg.

När du har redigerat Din FormView-markering bör den se ut ungefär så här:

<asp:FormView ID="LowStockedProductsInRed" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False" runat="server">
    <ItemTemplate>
        <b>Product:</b>
        <asp:Label ID="ProductNameLabel" runat="server"
         Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        <b>Units In Stock:</b>
        <asp:Label ID="UnitsInStockLabel" runat="server"
          Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:FormView>

Observera att ItemTemplate innehåller:

  • Statisk HTML "Produkt:" och "Enheter i lager:" tillsammans med elementen <br /> och <b>.
  • Web styr de två etikettkontrollerna ProductNameLabel och UnitsInStockLabel.
  • Databindningssyntaxen<%# Bind("ProductName") %> och <%# Bind("UnitsInStock") %> syntaxen, som tilldelar värdena från dessa fält till egenskaperna för etikettkontrollerna Text .

Steg 5: Programmatiskt bestämma värdet för data i DataBound-händelsehanteraren

När FormView-markering är klar är nästa steg att programmatiskt avgöra om UnitsInStock värdet är mindre än eller lika med 10. Detta görs på exakt samma sätt med FormView som med DetailsView. Börja med att skapa en händelsehanterare för FormView-händelsen DataBound .

Skapa DataBound-händelsehanteraren

Bild 6: Skapa DataBound händelsehanteraren

I händelsehanteraren omvandlas FormViews DataItem egenskap till en ProductsRow instans och bestäm om UnitsInPrice värdet är sådant att vi måste visa det med röd färg.

protected void LowStockedProductsInRed_DataBound(object sender, EventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((DataRowView)LowStockedProductsInRed.DataItem).Row;
    if (!product.IsUnitsInStockNull() && product.UnitsInStock <= 10)
    {
        // TODO: Make the UnitsInStockLabel text red
    }
}

Steg 6: Formatera UnitsInStockLabel-kontrollen i FormView's ItemTemplate

Det sista steget är att formatera det visade UnitsInStock värdet i ett rött teckensnitt om värdet är 10 eller mindre. För att åstadkomma detta måste vi programmatiskt komma åt UnitsInStockLabel kontrollen i ItemTemplate och ange dess formategenskaper så att texten visas i rött. Om du vill komma åt en webbkontroll i en mall använder du metoden FindControl("controlID") så här:

WebControlType someName = (WebControlType)FormViewID.FindControl("controlID");

I vårt exempel vill vi komma åt en etikettkontroll vars ID värde är UnitsInStockLabel, så vi använder:

Label unitsInStock =
    (Label)LowStockedProductsInRed.FindControl("UnitsInStockLabel");

När vi har en programmatisk referens till webbkontrollen kan vi ändra dess stilrelaterade egenskaper efter behov. Precis som i det tidigare exemplet har jag skapat en CSS-klass i Styles.css med namnet LowUnitsInStockEmphasis. Om du vill använda den här stilen på Etikettwebbkontrollen, ställer du in dess CssClass egenskap därefter.

protected void LowStockedProductsInRed_DataBound(object sender, EventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((DataRowView)LowStockedProductsInRed.DataItem).Row;
    if (!product.IsUnitsInStockNull() && product.UnitsInStock <= 10)
    {
        Label unitsInStock =
            (Label)LowStockedProductsInRed.FindControl("UnitsInStockLabel");

        if (unitsInStock != null)
        {
          unitsInStock.CssClass = "LowUnitsInStockEmphasis";
        }
    }
}

Anmärkning

Syntaxen för formatering av en mall som programmässigt använder FindControl("controlID") för att få åtkomst till webbkontrollen och sedan ange dess stilrelaterade egenskaper kan också användas när TemplateFields används i kontrollerna DetailsView eller GridView. Vi går igenom TemplateFields i vår nästa handledning.

Bild 7 visar FormView när du visar en produkt vars UnitsInStock värde är större än 10, medan produkten i bild 8 har sitt värde mindre än 10.

För produkter med tillräckligt stora enheter i lager tillämpas ingen anpassad formatering

Bild 7: För produkter med tillräckligt stora enheter i lager tillämpas ingen anpassad formatering (klicka om du vill visa en bild i full storlek)

Enheter i lagernummer visas i rött för dessa produkter med värden på 10 eller mindre

Bild 8: Enheter i lagernummer visas i rött för dessa produkter med värden på 10 eller mindre (klicka om du vill visa en bild i full storlek)

Formatering med GridView-eventRowDataBound

Tidigare undersökte vi sekvensen med steg som DetailsView- och FormView-kontrollerna går igenom under databindningen. Nu ska vi titta på de här stegen igen som en uppdatering.

  1. Datawebbkontrollens DataBinding händelse utlöses.
  2. Data är bundna till datawebbkontrollen.
  3. Datawebbkontrollens DataBound händelse utlöses.

Dessa tre enkla steg är tillräckliga för "DetailsView" och "FormView" eftersom de endast visar en enda post. För GridView, som visar alla poster som är bundna till den (inte bara den första), är steg 2 lite mer komplicerat.

I steg 2 räknar GridView upp datakällan och skapar för varje post en GridViewRow instans och binder den aktuella posten till den. För varje GridViewRow som läggs till i GridView utlöses två händelser:

  • RowCreated aktiveras efter att GridViewRow har skapats
  • RowDataBound utlöses efter att den aktuella posten har bundits till GridViewRow.

För GridView beskrivs databindningen mer exakt i följande stegsekvens:

  1. Händelsen för GridView DataBinding utlöses.

  2. Data är bundna till GridView.

    För varje post i datakällan

    1. Skapa ett GridViewRow objekt
    2. Utlös RowCreated händelsen
    3. Bind ihop posten med GridViewRow
    4. Utlös RowDataBound händelsen
    5. Lägg till GridViewRow i Rows-samlingen

  3. Händelsen för GridView DataBound utlöses.

För att anpassa formatet för GridViews enskilda poster måste vi sedan skapa en händelsehanterare för RowDataBound händelsen. För att illustrera detta ska vi lägga till en GridView på sidan CustomColors.aspx som visar namn, kategori och pris för varje produkt, och markera de produkter vars pris är mindre än 10,00 USD med en gul bakgrundsfärg.

Steg 7: Visa produktinformation i en GridView

Lägg till en GridView under FormView från föregående exempel och ange dess ID egenskap till HighlightCheapProducts. Eftersom vi redan har en ObjectDataSource som returnerar alla produkter på sidan binder du GridView till den. Slutligen redigerar du GridViews BoundFields så att de bara innehåller produkternas namn, kategorier och priser. När dessa har redigerats bör GridViews markering se ut så här:

<asp:GridView ID="HighlightCheapProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Bild 9 visar våra framsteg hittills när de ses genom en webbläsare.

GridView visar namn, kategori och pris för varje produkt

Bild 9: GridView visar en lista över namn, kategori och pris för varje produkt (klicka om du vill visa en bild i full storlek)

Steg 8: Programmatiskt bestämma värdet för data i RowDataBound-händelsehanteraren

När ProductsDataTable är bunden till GridView räknas dess ProductsRow-instanser upp och för varje ProductsRow skapas en GridViewRow. Egenskapen för GridViewRow tilldelas den specifika DataItem med ProductRow, varefter GridViews RowDataBound-händelsehanterare utlöses. För att fastställa UnitPrice värdet för varje produkt som är bunden till GridView måste vi sedan skapa en händelsehanterare för GridView-händelsen RowDataBound . I den här händelsehanteraren kan vi kontrollera UnitPrice värdet för den aktuella GridViewRow och fatta ett formateringsbeslut för den raden.

Den här händelsehanteraren kan skapas med samma stegserie som med FormView och DetailsView.

Skapa en händelsehanterare för GridViews RowDataBound-händelse

Bild 10: Skapa en händelsehanterare för GridView-händelsen RowDataBound

Om du skapar händelsehanteraren på det här sättet läggs följande kod automatiskt till i ASP.NET-sidans koddel:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

När händelsen RowDataBound utlöses skickas händelsehanteraren som den andra parametern ett objekt av typen GridViewRowEventArgs, som har en egenskap med namnet Row. Den här egenskapen returnerar en referens till GridViewRow som bara var databunden. För att komma åt den ProductsRow instans som GridViewRow är bunden till använder vi DataItem egenskapen så här:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((System.Data.DataRowView)e.Row.DataItem).Row;
    if (!product.IsUnitPriceNull() && product.UnitPrice < 10m)
    {
        // TODO: Highlight the row yellow...
    }
}

När du arbetar med RowDataBound händelsehanteraren är det viktigt att komma ihåg att GridView består av olika typer av rader och att den här händelsen utlöses för alla radtyper. En GridViewRow's-typ kan bestämmas av dess RowType egenskap och kan ha ett av de möjliga värdena:

  • DataRow en rad som är bunden till en post från GridViews DataSource
  • EmptyDataRow raden som visas om GridView är DataSource tom
  • Footer sidfotsraden. visas om GridView-egenskapen ShowFooter är inställd på true
  • Header rubrikraden. visas om egenskapen ShowHeader i GridView är inställd på true (standardvärdet)
  • Pager för GridView som implementerar växling, raden som visar växlingsgränssnittet
  • Separator används inte för GridView, men används av RowType egenskaperna för kontrollerna DataList och Repeater, två datawebbkontroller som vi diskuterar i framtida självstudier

Eftersom EmptyDataRow, Header, Footer och Pager raderna inte är associerade med en DataSource post kommer de alltid att ha ett null värde för sin DataItem egenskap. Innan vi försöker arbeta med den aktuella GridViewRowDataItem egenskapen måste vi därför först se till att vi har att göra med en DataRow. Detta kan åstadkommas genom att kontrollera GridViewRows egenskap RowType så här:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Make sure we are working with a DataRow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get the ProductsRow object from the DataItem property...
        Northwind.ProductsRow product = (Northwind.ProductsRow)
            ((System.Data.DataRowView)e.Row.DataItem).Row;
        if (!product.IsUnitPriceNull() && product.UnitPrice < 10m)
        {
          // TODO: Highlight row yellow...
        }
    }
}

Steg 9: Markera den gula raden när unitprice-värdet är mindre än 10,00 USD

Det sista steget är att programmatiskt markera hela GridViewRow om värdet för raden UnitPrice är mindre än 10,00 USD. Syntaxen för åtkomst till en GridView-rad eller -celler är densamma som med DetailsView GridViewID.Rows[index] för att få åtkomst till hela raden för GridViewID.Rows[index].Cells[index] att få åtkomst till en viss cell. Men när RowDataBound händelsehanteraren utlöses har datagränsen GridViewRow ännu inte lagts till i GridView-samlingen Rows . Därför kan du inte komma åt den aktuella instansen av GridViewRow från RowDataBound-händelsehanteraren genom att använda Rows-samlingen.

I stället för GridViewID.Rows[index], kan vi referera till den aktuella GridViewRow-instansen i RowDataBound-händelsehanteraren med hjälp av e.Row. För att markera den aktuella GridViewRow instansen från händelsehanteraren RowDataBound skulle vi alltså använda:

e.Row.BackColor = System.Drawing.Color.Yellow;

I stället för att direkt ställa in GridViewRows egenskap BackColor, ska vi hålla oss till att använda CSS-klasser. Jag har skapat en CSS-klass med namnet AffordablePriceEmphasis som anger bakgrundsfärgen till gul. Den slutförda RowDataBound händelsehanteraren följer:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Make sure we are working with a DataRow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get the ProductsRow object from the DataItem property...
        Northwind.ProductsRow product = (Northwind.ProductsRow)
            ((System.Data.DataRowView)e.Row.DataItem).Row;
        if (!product.IsUnitPriceNull() && product.UnitPrice < 10m)
        {
            e.Row.CssClass = "AffordablePriceEmphasis";
        }
    }
}

De mest prisvärda produkterna är markerade gul

Bild 11: De mest prisvärda produkterna är markerade med gult (klicka om du vill visa en bild i full storlek)

Sammanfattning

I den här självstudien såg vi hur du formaterar GridView, DetailsView och FormView baserat på de data som är bundna till kontrollen. För att åstadkomma detta skapade vi en händelsehanterare för DataBound händelserna eller RowDataBound , där underliggande data undersöktes tillsammans med en formateringsändring, om det behövs. För att komma åt data som är bundna till en DetailsView eller FormView använder DataItem vi egenskapen i DataBound händelsehanteraren. För en GridView innehåller varje GridViewRow instans DataItem egenskap de data som är bundna till den raden, som är tillgänglig i RowDataBound händelsehanteraren.

Syntaxen för att programmatiskt justera datawebbkontrollens formatering beror på webbkontrollen och hur data som ska formateras visas. För kontrollerna DetailsView och GridView kan rader och celler nås med ett ordningsindex. För FormView, som använder mallar, FindControl("controlID") används metoden ofta för att hitta en webbkontroll inifrån mallen.

I nästa självstudie kommer vi att titta på hur du använder mallar med GridView och DetailsView. Dessutom ser vi en annan teknik för att anpassa formateringen baserat på underliggande 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. De ledande granskare för denna handledning var E.R. Gilmore, Dennis Patterson och Dan Jagers. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.

Nästa