Visa data med ObjectDataSource (VB)

I den här självstudien tittar vi på ObjectDataSource-kontrollen Med den här kontrollen kan du binda data som hämtats från den BLL som skapades i föregående självstudie utan att behöva skriva en kodrad!

Inledning

När vår programarkitektur och webbplatssidelayout är klar är vi redo att börja utforska hur du utför en mängd vanliga data- och rapporteringsrelaterade uppgifter. I de föregående självstudierna har vi sett hur du programmatiskt binder data från DAL och BLL till en datawebbkontroll på en ASP.NET sida. Den här syntaxen som tilldelar datawebbkontrollens DataSource egenskap till de data som ska visas och som sedan anropar kontrollens DataBind() metod var det mönster som användes i ASP.NET 1.x-program och kan fortsätta att användas i dina 2.0-program. Men ASP.NET 2.0:s nya datakällkontroller erbjuder ett deklarativt sätt att arbeta med data. Med hjälp av dessa kontroller kan du binda data som hämtats från den BLL som skapades i föregående självstudie utan att behöva skriva en kodrad!

ASP.NET 2.0 levereras med fem inbyggda datakällkontroller SqlDataSource, AccessDataSource, ObjectDataSource, XmlDataSource och SiteMapDataSource , även om du kan skapa egna anpassade datakällkontroller om det behövs. Eftersom vi har utvecklat en arkitektur för vårt självstudieprogram använder vi ObjectDataSource mot våra BLL-klasser.

ASP.NET 2.0 innehåller fem Built-In datakällakontroller

Bild 1: ASP.NET 2.0 innehåller fem Built-In datakällans kontroller

ObjectDataSource fungerar som proxy för att arbeta med något annat objekt. För att konfigurera ObjectDataSource anger vi det här underliggande objektet och hur dess metoder mappas till ObjectDataSources Selectmetoder , Insert, Updateoch Delete . När det här underliggande objektet har angetts och dess metoder har mappats till ObjectDataSources kan vi sedan binda ObjectDataSource till en datawebbkontroll. ASP.NET levereras med många datawebbkontroller, bland annat GridView, DetailsView, RadioButtonList och DropDownList. Under sidlivscykeln kan datawebbkontrollen behöva komma åt de data som den är bunden till, vilket den åstadkommer genom att anropa metoden ObjectDataSource Select . Om datawebbkontrollen stöder infogning, uppdatering eller borttagning kan anrop göras till ObjectDataSources Insert, Updateeller Delete -metoder. Dessa anrop dirigeras sedan av ObjectDataSource till lämpliga underliggande objekts metoder, vilket visas i följande diagram.

Bild 2: ObjectDataSource fungerar som en proxy (klicka om du vill visa en bild i full storlek)

ObjectDataSource kan användas för att anropa metoder för att infoga, uppdatera eller ta bort data, men vi fokuserar bara på att returnera data. Framtida självstudier kommer att utforska hur man ändrar data med ObjectDataSource och datawebbkontroller.

Steg 1: Lägga till och konfigurera ObjectDataSource-kontrollen

Börja med att öppna SimpleDisplay.aspx sidan i BasicReporting mappen, växla till designvyn och dra sedan en ObjectDataSource-kontroll från verktygslådan till sidans designyta. ObjectDataSource visas som en grå ruta på designytan eftersom den inte ger någon markering. den kommer helt enkelt åt data genom att anropa en metod från ett angivet objekt. Data som returneras av en ObjectDataSource kan visas av en datawebbkontroll, till exempel GridView, DetailsView, FormView och så vidare.

Anmärkning

Du kan också först lägga till datawebbkontrollen på sidan och sedan välja <alternativet Ny datakälla> i listrutan från dess smarta tagg.

Om du vill ange ObjectDataSources underliggande objekt och hur objektets metoder mappas till ObjectDataSource klickar du på länken Konfigurera datakälla från ObjectDataSources smarta tagg.

Bild 3: Klicka på länken Konfigurera datakälla från den smarta taggen (klicka om du vill visa en bild i full storlek)

Då visas guiden Konfigurera datakälla. Först måste vi ange det objekt som ObjectDataSource ska arbeta med. Om kryssrutan Visa endast datakomponenter är markerad visar listrutan på den här skärmen endast de objekt som har dekorerats med DataObject attributet. För närvarande innehåller vår lista TableAdapters i Typed DataSet och BLL-klasserna som vi skapade i föregående självstudie. Om du har glömt att lägga DataObject till attributet i Business Logic Layer-klasserna ser du dem inte i den här listan. I så fall avmarkerar du kryssrutan "Visa endast datakomponenter" för att visa alla objekt, vilka bör inkludera BLL-klasserna (tillsammans med de andra klasserna i den typade DataSet:et, såsom Datatabellerna, DataRaderna och så vidare).

Från den första skärmen väljer du ProductsBLL klassen i listrutan och klickar på Nästa.

Bild 4: Ange det objekt som ska användas med ObjectDataSource-kontrollen (klicka om du vill visa en bild i full storlek)

Nästa skärm i guiden uppmanar dig att välja vilken metod ObjectDataSource ska anropa. I listrutan visas de metoder som returnerar data i det objekt som valts från föregående skärm. Här ser GetProductByProductIDvi , GetProducts, GetProductsByCategoryIDoch GetProductsBySupplierID. GetProducts Välj metoden i listrutan och klicka på Slutför (om du har lagt DataObjectMethodAttribute till ProductBLLi metoderna i den föregående självstudien väljs det här alternativet som standard).

Bild 5: Välj metoden för att returnera data från fliken VÄLJ (Klicka om du vill visa en bild i full storlek)

Konfigurera ObjectDataSource manuellt

Med guiden Konfigurera datakälla i ObjectDataSource kan du snabbt ange det objekt som används och associera vilka metoder för objektet som anropas. Du kan dock konfigurera ObjectDataSource via dess egenskaper, antingen genom fönstret Egenskaper eller direkt i den deklarativa markeringen. Ange TypeName bara egenskapen till den typ av underliggande objekt som ska användas och SelectMethod till metoden som ska anropas när data hämtas.

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Även om du föredrar guiden Konfigurera datakälla kan det finnas tillfällen då du behöver konfigurera ObjectDataSource manuellt, eftersom guiden endast visar klasser som skapats av utvecklare. Om du vill binda ObjectDataSource till en klass i .NET Framework, till exempel medlemskapsklassen, för att få åtkomst till information om användarkontot eller katalogklassen för att arbeta med filsysteminformation måste du manuellt ange Egenskaperna för ObjectDataSource.

Steg 2: Lägga till en datawebbkontroll och binda den till ObjectDataSource

När ObjectDataSource har lagts till på sidan och konfigurerats är vi redo att lägga till datawebbkontroller på sidan för att visa de data som returneras av ObjectDataSource-metoden Select . Alla datawebbkontroller kan bindas till en ObjectDataSource. Nu ska vi titta på hur du visar ObjectDataSources data i en GridView, DetailsView och FormView.

Binda en GridView till en ObjectDataSource

Lägg till en GridView-kontroll från verktygslådan till SimpleDisplay.aspxdesignytan. Från GridViews smarta tagg väljer du kontrollen ObjectDataSource som vi lade till i steg 1. Detta skapar automatiskt ett BoundField i GridView för varje egenskap som returneras av data från ObjectDataSource-metoden Select (dvs. egenskaperna som definieras av Products DataTable).

Bild 6: En GridView har lagts till på sidan och bundits till ObjectDataSource (klicka om du vill visa en bild i full storlek)

Du kan sedan anpassa, ordna om eller ta bort GridViews BoundFields genom att klicka på alternativet Redigera kolumner från den smarta taggen.

Bild 7: Hantera GridViews BoundFields via dialogrutan Redigera kolumner (Klicka om du vill visa en bild i full storlek)

Ta en stund att ändra GridViews BoundFields och ta bort ProductID, SupplierID, CategoryID, QuantityPerUnit, UnitsInStock, UnitsOnOrderoch ReorderLevel BoundFields. Välj bara BoundField i listan längst ned till vänster och klicka på knappen ta bort (det röda X) för att ta bort dem. Ordna sedan om BoundFields så att CategoryName BoundFields och SupplierName BoundFields föregår UnitPrice BoundField genom att välja dessa BoundFields och klicka på uppåtpilen. Ange egenskaperna för återstående HeaderText BoundFields till Products, Category, Supplier, respektive Price. Därefter formaterar du Price BoundField som en valuta genom att ställa in dess HtmlEncode-egenskap till False och dess DataFormatString-egenskap till {0:c}. Slutligen justerar du Price vågrätt åt höger och kryssrutan Discontinued i mitten via ItemStyle/HorizontalAlign egenskapen .

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <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="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued">
            <ItemStyle HorizontalAlign="Center" />
        </asp:CheckBoxField>
    </Columns>
</asp:GridView>

Bild 8: GridViews BoundFields har anpassats (klicka om du vill visa en bild i full storlek)

Använda teman för ett konsekvent utseende

De här självstudierna strävar efter att ta bort alla stilinställningar på kontrollnivå, och i stället använda kaskadstilark definierade i en extern fil när det är möjligt. Filen Styles.css innehåller DataWebControlStyle, HeaderStyle, RowStyleoch AlternatingRowStyle CSS-klasser som ska användas för att diktera utseendet på de datawebbkontroller som används i de här självstudierna. För att åstadkomma detta kan vi ställa in GridView:s CssClass-egenskap till DataWebControlStyle, och dess HeaderStyle, RowStyle, och AlternatingRowStyle-egenskapers CssClass-egenskaper i enlighet med detta.

Om vi ställer in dessa CssClass egenskaper på webbkontroller måste vi komma ihåg att uttryckligen ange dessa egenskapsvärden för varje datawebbkontroll som läggs till i våra handledningar. En mer hanterbar metod är att definiera css-relaterade standardegenskaper för kontrollerna GridView, DetailsView och FormView med hjälp av ett tema. Ett tema är en samling egenskapsinställningar på kontrollnivå, bilder och CSS-klasser som kan tillämpas på sidor på en webbplats för att framtvinga ett gemensamt utseende.

Vårt tema innehåller inga bilder eller CSS-filer (vi lämnar formatmallen Styles.css as-is, definierad i rotmappen för webbprogrammet), men kommer att innehålla två skal. A Skin är en fil som definierar standardegenskaperna för en webbkontroll. Mer specifikt har vi en Skin-fil för kontrollerna GridView och DetailsView som anger standardrelaterade CssClassegenskaper.

Börja med att lägga till en ny hudfil i projektet med namnet GridView.skin genom att högerklicka på projektnamnet i Solution Explorer och välja Lägg till nytt objekt.

Bild 9: Lägg till en hudfil med namnet GridView.skin (Klicka om du vill visa en bild i full storlek)

Hudfiler måste placeras i ett tema som finns i App_Themes mappen. Eftersom vi ännu inte har en sådan mapp kommer Visual Studio vänligen att erbjuda sig att skapa en åt oss när vi lägger till vår första Skin. Klicka på Ja för att skapa App_Theme mappen och placera den nya GridView.skin filen där.

Bild 10: Låt Visual Studio skapa App_Theme mappen (Klicka om du vill visa en bild i full storlek)

Då skapas ett nytt tema i App_Themes mappen GridView med skin-filen GridView.skin.

GridView-temat har lagts till i mappen App_Theme

Bild 11: GridView-temat har lagts till i mappen App_Theme

Byt namn på GridView-temat till DataWebControls (högerklicka på Mappen GridView i App_Theme mappen och välj Byt namn). Ange sedan följande markering i GridView.skin filen:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
</asp:GridView>

Detta definierar standardegenskaperna för de CssClass-relaterade egenskaperna för alla GridView på alla sidor som använder DataWebControls-temat. Nu ska vi lägga till ytterligare ett skin för DetailsView, en datawebbkontroll som vi kommer att använda inom kort. Lägg till ett nytt skal i DataWebControls-temat med namnet DetailsView.skin och lägg till följande markering:

<asp:DetailsView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <FieldHeaderStyle CssClass="HeaderStyle" />
</asp:DetailsView>

Med vårt tema definierat är det sista steget att tillämpa temat på vår ASP.NET sida. Ett tema kan användas sida för sida eller för alla sidor på en webbplats. Nu ska vi använda det här temat för alla sidor på webbplatsen. Så gör du genom att lägga till följande markering i Web.config:s <system.web>-avsnitt:

<pages styleSheetTheme="DataWebControls" />

Det är allt! Inställningen styleSheetTheme anger att de egenskaper som anges i temat inte ska åsidosätta de egenskaper som anges på kontrollnivå. Om du vill ange att Temainställningar ska trumfa kontrollinställningar använder du theme attributet i stället för styleSheetTheme. Tyvärr visas inte Temainställningar i vyn Visual Studio-design. Mer information om teman och skinn finns I översikten över ASP.NET teman och skinn och Server-Side Formatmallar med teman. Se Anvisning: Använd ASP.NET teman för mer information om hur du konfigurerar en sida för att använda ett tema.

Bild 12: GridView visar produktens namn, kategori, leverantör, pris och avbruten information (klicka om du vill visa en bild i full storlek)

Visa en post i taget i DetailsView

GridView visar en rad för varje post som returneras av datakällans kontrollobjekt till vilket den är bunden. Det finns dock tillfällen då vi kanske vill visa en enda post eller bara en post i taget. DetailsView-kontrollen erbjuder den här funktionen, vilket återges som en HTML-kod <table> med två kolumner och en rad för varje kolumn eller egenskap som är bunden till kontrollen. Du kan tänka på DetailsView som en GridView där en enda post är vriden 90 grader.

Börja med att lägga till en DetailsView-kontroll ovanför GridView i SimpleDisplay.aspx. Sedan binder du den till samma ObjectDataSource-kontroll som GridView. Precis som med GridView läggs ett BoundField till i DetailsView för varje egenskap i objektet som returneras av ObjectDataSource-metoden Select . Den enda skillnaden är att BoundFields i DetailsView anges horisontellt snarare än lodrätt.

Bild 13: Lägg till en DetailsView på sidan och binda den till ObjectDataSource (Klicka om du vill visa en bild i full storlek)

Precis som GridView kan BoundFields i DetailsView justeras för att ge en mer anpassad visning av data som returneras av ObjectDataSource. Bild 14 visar DetailsView efter att dess BoundFields och CssClass egenskaper har konfigurerats för att se ut ungefär som i GridView-exemplet.

Bild 14: DetailsView visar en enskild post (klicka om du vill visa en bild i full storlek)

Observera att DetailsView endast visar den första posten som returnerats av datakällan. För att användaren ska kunna gå igenom alla poster, en åt gången, måste vi aktivera paginering för DetailsView. Det gör du genom att gå tillbaka till Visual Studio och markera kryssrutan Aktivera sidindelning i DetailsView i smarta taggen.

Bild 15: Aktivera sidindelning i DetailsView-kontrollen (Klicka för att visa bilden i full storlek)

Bild 16: Med sidladdning aktiverad tillåter DetailsView användaren att visa vilken produkt som helst (Klicka för att visa bilden i full storlek)

Vi kommer att prata mer om paginering i framtida handledningar.

En mer flexibel layout för att visa en datapost i taget

DetailsView är ganska rigid i hur den visar varje post som returneras från ObjectDataSource. Vi kanske vill ha en mer flexibel vy av data. I stället för att till exempel visa produktens namn, kategori, leverantör, pris och utgående information på en separat rad, kanske vi vill visa produktnamnet och priset i en <h4> rubrik, där kategori- och leverantörsinformationen visas under namnet och priset i en mindre teckenstorlek. Och vi kanske inte bryr oss om att visa egenskapsnamnen (produkt, kategori och så vidare) bredvid värdena.

FormView-kontrollen tillhandahåller den här anpassningsnivån. I stället för att använda fält (som GridView och DetailsView) använder FormView mallar som möjliggör en blandning av webbkontroller, statisk HTML och databindningssyntax. Om du är bekant med Repeater-kontrollen från ASP.NET 1.x kan du se FormView som en Repeater för att visa en enda post.

Lägg till en FormView-kontroll på SimpleDisplay.aspx sidans designyta. Till en början visas FormView som ett grått block som informerar oss om att vi minst måste ange kontrollens ItemTemplate.

Bild 17: Formulärvyn måste innehålla en ItemTemplate (Klicka om du vill visa en bild i full storlek)

Du kan binda FormView direkt till en datakällkontroll via FormViews smarta tagg, vilket skapar en standard ItemTemplate automatiskt (tillsammans med en EditItemTemplate och InsertItemTemplate, om ObjectDataSource-kontrollens och InsertMethod egenskaperna har angettsUpdateMethod). I det här exemplet ska vi däremot binda datat till FormView och ange dess ItemTemplate manuellt. Börja med att ange FormView:s egenskap DataSourceID till ID ObjectDataSource-kontrollen, ObjectDataSource1. Skapa sedan ItemTemplate så att den visar produktens namn och pris i ett <h4> element och kategori- och avsändarnamnen under det i en mindre teckenstorlek.

<asp:FormView ID="FormView1" runat="server"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><%# Eval("ProductName") %>
          (<%# Eval("UnitPrice", "{0:c}") %>)</h4>
        Category: <%# Eval("CategoryName") %>;
        Supplier: <%# Eval("SupplierName") %>
    </ItemTemplate>
</asp:FormView>

Bild 18: Den första produkten (Chai) visas i ett anpassat format (Klicka om du vill visa en bild i full storlek)

<%# Eval(propertyName) %> är syntaxen för databindning. Metoden Eval returnerar värdet för den angivna egenskapen för det aktuella objektet som är bundet till FormView-kontrollen. Läs Alex Homers artikel Förenklad och utökad databindningssyntax i ASP.NET 2.0 för mer information om detaljerna kring databindning.

Liksom DetailsView visar FormView bara den första posten som returneras från ObjectDataSource. Du kan aktivera sidsökning i FormView så att besökarna kan bläddra igenom produkterna en i taget.

Sammanfattning

Du kan komma åt och visa data från ett affärslogiklager utan att skriva en kodrad tack vare ASP.NET 2.0-kontrollen ObjectDataSource. ObjectDataSource anropar en angiven metod för en klass och returnerar resultatet. Dessa resultat kan visas i en datawebbkontroll som är bunden till ObjectDataSource. I den här självstudien tittade vi på att binda kontrollerna GridView, DetailsView och FormView till ObjectDataSource.

Hittills har vi bara sett hur du använder ObjectDataSource för att anropa en parameterlös metod, men vad händer om vi vill anropa en metod som förväntar sig indataparametrar, till exempel ProductBLL klassens GetProductsByCategoryID(categoryID)? För att kunna anropa en metod som förväntar sig en eller flera parametrar måste vi konfigurera ObjectDataSource för att ange värdena för dessa parametrar. Vi kommer att se hur vi kan göra detta i vår nästa handledning.

Lycka till med programmerandet!

Ytterligare läsning

Mer information om de ämnen som beskrivs i den här självstudien finns i följande resurser:

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 handledningen var Hilton Giesenow. 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?

Last updated on 2025-04-30