Thistutorialispartofaset.FindoutmoreaboutdataaccesswithASP.NETintheWorkingwithDatain ASP.NET2.0sectionoftheASP.NETsiteathttp://www.asp.net/learn/dataaccess/default.aspx.
WorkingwithDatainASP.NET2.0::Displaying DataWiththeObjectDataSource Introduction
Withourapplicationarchitectureandwebsitepagelayoutcomplete,we'rereadytostartexploringhowto accomplishavarietyofcommondataandreportingrelatedtasks.Intheprevioustutorialswe'veseenhowto programmaticallybinddatafromtheDALandBLLtoadataWebcontrolinanASP.NETpage.Thissyntax assigningthedataWebcontrol'sDataSource propertytothedatatodisplayandthencallingthecontrol's DataBind() methodwasthepatternusedinASP.NET1.xapplications,andcancontinuetobeusedinyour 2.0applications.However,ASP.NET2.0'snewdatasourcecontrolsofferadeclarativewaytoworkwith data.UsingthesecontrolsyoucanbinddataretrievedfromtheBLLcreatedintheprevioustutorial without havingtowritealineofcode! ASP.NET2.0shipswithfivebuiltindatasourcecontrolsSqlDataSource,AccessDataSource, ObjectDataSource,XmlDataSource,andSiteMapDataSourcealthoughyoucanbuildyourown customdata sourcecontrols,ifneeded.Sincewehavedevelopedanarchitectureforourtutorialapplication,we'llbeusing theObjectDataSourceagainstourBLLclasses.
Figure1:ASP.NET2.0IncludesFiveBuiltInDataSourceControls TheObjectDataSourceservesasaproxyforworkingwithsomeotherobject.Toconfigurethe ObjectDataSourcewespecifythisunderlyingobjectandhowitsmethodsmaptotheObjectDataSource's Select,Insert,Update,andDelete methods.Oncethisunderlyingobjecthasbeenspecifiedandits methodsmappedtotheObjectDataSource's,wecanthenbindtheObjectDataSourcetoadataWebcontrol. ASP.NETshipswithmanydataWebcontrols,includingtheGridView,DetailsView,RadioButtonList,and DropDownList,amongothers.Duringthepagelifecycle,thedataWebcontrolmayneedtoaccessthedatait's boundto,whichitwillaccomplishbyinvokingitsObjectDataSource'sSelect methodifthedataWebcontrol
1of14
supportsinserting,updating,ordeleting,callsmaybemadetoitsObjectDataSource'sInsert,Update,or Delete methods.ThesecallsarethenroutedbytheObjectDataSourcetotheappropriateunderlyingobject's methodsasthefollowingdiagramillustrates.
Figure2:TheObjectDataSourceServesasaProxy WhiletheObjectDataSourcecanbeusedtoinvokemethodsforinserting,updating,ordeletingdata,let'sjust focusonreturningdatafuturetutorialswillexploreusingtheObjectDataSourceanddataWebcontrolsthat modifydata.
Step1:AddingandConfiguringthe ObjectDataSourceControl
StartbyopeningtheSimpleDisplay.aspx pageintheBasicReporting folder,switchtoDesignview,and thendraganObjectDataSourcecontrolfromtheToolboxontothepage'sdesignsurface.The ObjectDataSourceappearsasagrayboxonthedesignsurfacebecauseitdoesnotproduceanymarkupit simplyaccessesdatabyinvokingamethodfromaspecifiedobject.ThedatareturnedbyanObjectDataSource canbedisplayedbyadataWebcontrol,suchastheGridView,DetailsView,FormView,andsoon. Note:Alternatively,youmayfirstaddthedataWebcontroltothepageandthen,fromitssmarttag,choose the<Newdatasource>optionfromthedropdownlist. TospecifytheObjectDataSource'sunderlyingobjectandhowthatobject'smethodsmaptothe ObjectDataSource's,clickontheConfigureDataSourcelinkfromtheObjectDataSource'ssmarttag.
2of14
Figure3:ClicktheConfigureDataSourceLinkfromtheSmartTag ThisbringsuptheConfigureDataSourcewizard.First,wemustspecifytheobjecttheObjectDataSourceisto workwith.Ifthe"Showonlydatacomponents"checkboxischecked,thedropdownlistonthisscreenlists onlythoseobjectsthathavebeendecoratedwiththeDataObject attribute.Currentlyourlistincludesthe TableAdaptersintheTypedDataSetandtheBLLclasseswecreatedintheprevioustutorial.Ifyouforgotto addtheDataObject attributetotheBusinessLogicLayerclassesyouwon'tseetheminthislist.Inthatcase, uncheckthe"Showonlydatacomponents"checkboxtoviewallobjects,whichshouldincludetheBLLclasses (alongwiththeotherclassesintheTypedDataSettheDataTables,DataRows,andsoon). FromthisfirstscreenchoosetheProductsBLL classfromthedropdownlistandclickNext.
Figure4:SpecifytheObjecttoUsewiththeObjectDataSourceControl ThenextscreeninthewizardpromptsyoutoselectwhatmethodtheObjectDataSourceshouldinvoke.The dropdownliststhosemethodsthatreturndataintheobjectselectedfromthepreviousscreen.Herewesee GetProductsByProductID,GetProducts,GetProductsByCategoryID,andGetProductsBySupplierID. SelecttheGetProducts methodfromthedropdownlistandclickFinish(ifyouaddedthe DataObjectMethodAttribute totheProductBLL'smethodsasshownintheprevioustutorial,thisoption willbeselectedbydefault).
3of14
Figure5:ChoosetheMethodforReturningDatafromtheSELECTTab
ConfiguretheObjectDataSourceManually
TheObjectDataSource'sConfigureDataSourcewizardoffersaquickwaytospecifytheobjectitusesandto associatewhatmethodsoftheobjectareinvoked.Youcan,however,configuretheObjectDataSource throughitsproperties,eitherthroughthePropertieswindowordirectlyinthedeclarativemarkup.Simplyset theTypeName propertytothetypeoftheunderlyingobjecttobeused,andtheSelectMethod tothemethod toinvokewhenretrievingdata.
<asp:ObjectDataSourceID="ObjectDataSource1"runat="server" SelectMethod="GetProducts" TypeName="ProductsBLL"> </asp:ObjectDataSource>
EvenifyouprefertheConfigureDataSourcewizardtheremaybetimeswhenyouneedtomanuallyconfigure theObjectDataSource,asthewizardonlylistsdevelopercreatedclasses.Ifyouwanttobindthe ObjectDataSourcetoaclassinthe.NETFrameworksuchastheMembershipclass,toaccessuseraccount information,ortheDirectoryclasstoworkwithfilesysteminformationyou'llneedtomanuallysetthe ObjectDataSource'sproperties.
Step2:AddingaDataWebControlandBindingit totheObjectDataSource
OncetheObjectDataSourcehasbeenaddedtothepageandconfigured,we'rereadytoadddataWebcontrols tothepagetodisplaythedatareturnedbytheObjectDataSource'sSelect method.AnydataWebcontrolcan beboundtoanObjectDataSourcelet'slookatdisplayingtheObjectDataSource'sdatainaGridView, DetailsView,andFormView.
4of14
BindingaGridViewtotheObjectDataSource
AddaGridViewcontrolfromtheToolboxto SimpleDisplay.aspx'sdesignsurface.FromtheGridView's smarttag,choosetheObjectDataSourcecontrolweaddedinStep1.Thiswillautomaticallycreatea BoundFieldintheGridViewforeachpropertyreturnedbythedatafromtheObjectDataSource'sSelect method(namely,thepropertiesdefinedbytheProductsDataTable).
Figure6:AGridViewHasBeenAddedtothePageandBoundtotheObjectDataSource Youcanthencustomize,rearrange,orremovetheGridView'sBoundFieldsbyclickingtheEditColumns optionfromthesmarttag.
5of14
Figure7:ManagetheGridView'sBoundFieldsThroughtheEditColumnsDialogBox TakeamomenttomodifytheGridView'sBoundFields,removingtheProductID,SupplierID,CategoryID, QuantityPerUnit,UnitsInStock,UnitsOnOrder,andReorderLevel BoundFields.Simplyselectthe BoundFieldfromthelistinthebottomleftandclickthedeletebutton(theredX)toremovethem.Next, RearrangetheBoundFieldssothattheCategoryName andSupplierName BoundFieldsprecedethe UnitPrice BoundFieldbyselectingtheseBoundFieldsandclickingtheuparrow.SettheHeaderText propertiesoftheremainingBoundFieldsto Products,Category,Supplier,andPrice,respectively.Next, havethePrice BoundFieldformattedasacurrencybysettingtheBoundField'sHtmlEncode propertytoFalse anditsDataFormatString propertyto{0:c}.Finally,horizontallyalignthePrice totherightandthe Discontinued checkboxinthecenterviatheItemStyle/HorizontalAlign property.
<asp:GridViewID="GridView1"runat="server" AutoGenerateColumns="False"DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"EnableViewState="False"> <Columns> <asp:BoundFieldDataField="ProductName" HeaderText="Product"SortExpression="ProductName"/> <asp:BoundFieldDataField="CategoryName" HeaderText="Category"ReadOnly="True" SortExpression="CategoryName"/> <asp:BoundFieldDataField="SupplierName" HeaderText="Supplier"ReadOnly="True" SortExpression="SupplierName"/> <asp:BoundFieldDataField="UnitPrice" DataFormatString="{0:c}"HeaderText="Price" HtmlEncode="False"SortExpression="UnitPrice"> <ItemStyleHorizontalAlign="Right"/> </asp:BoundField> <asp:CheckBoxFieldDataField="Discontinued" HeaderText="Discontinued"SortExpression="Discontinued"> <ItemStyleHorizontalAlign="Center"/> </asp:CheckBoxField> </Columns> </asp:GridView>
6of14
Figure8:TheGridView'sBoundFieldsHaveBeenCustomized
UsingThemesforaConsistentLook
Thesetutorialsstrivetoremoveanycontrollevelstylesettings,insteadusingcascadingstylesheetsdefinedin anexternalfilewheneverpossible.TheStyles.css filecontainsDataWebControlStyle,HeaderStyle, RowStyle,andAlternatingRowStyle CSSclassesthatshouldbeusedtodictatetheappearanceofthedata Webcontrolsusedinthesetutorials.Toaccomplishthis,wecouldsettheGridView'sCssClass propertyto DataWebControlStyle,anditsHeaderStyle,RowStyle,andAlternatingRowStyle properties'CssClass propertiesaccordingly. IfwesettheseCssClass propertiesattheWebcontrolwe'dneedtoremembertoexplicitlysettheseproperty valuesforeachandeverydataWebcontroladdedtoourtutorials.Amoremanageableapproachistodefine thedefaultCSSrelatedpropertiesfortheGridView,DetailsView,andFormViewcontrolsusingaTheme.A Themeisacollectionofcontrollevelpropertysettings,images,andCSSclassesthatcanbeappliedtopages acrossasitetoenforceacommonlookandfeel. OurThemewon'tincludeanyimagesorCSSfiles(we'llleavethestylesheet Styles.css asis,definedinthe rootfolderofthewebapplication),butwillincludetwoSkins.ASkinisafilethatdefinesthedefault propertiesforaWebcontrol.Specifically,we'llhaveaSkinfilefortheGridViewandDetailsViewcontrols, indicatingthedefault CssClassrelatedproperties. StartbyaddinganewSkinFiletoyourprojectnamedGridView.skin byrightclickingontheprojectname intheSolutionExplorerandchoosingAddNewItem.
Figure9:AddaSkinFileNamedGridView.skin SkinfilesneedtobeplacedinaTheme,whicharelocatedintheApp_Themes folder.Sincewedon'tyethave suchafolder,VisualStudiowillkindlyoffertocreateoneforuswhenaddingourfirstSkin.ClickYesto createtheApp_Theme folderandplacethenewGridView.skin filethere.
7of14
Figure10:LetVisualStudioCreatetheApp_Theme Folder ThiswillcreateanewThemeintheApp_Themes foldernamedGridViewwiththeSkinfileGridView.skin.
Figure11:TheGridViewThemehasBeenAddedtotheApp_Theme Folder RenametheGridViewThemetoDataWebControls(rightclickontheGridViewfolderintheApp_Theme folderandchooseRename).Next,enterthefollowingmarkupintotheGridView.skin file:
<asp:GridViewrunat="server"CssClass="DataWebControlStyle"> <AlternatingRowStyleCssClass="AlternatingRowStyle"/> <RowStyleCssClass="RowStyle"/> <HeaderStyleCssClass="HeaderStyle"/> </asp:GridView>
ThisdefinesthedefaultpropertiesfortheCssClassrelatedpropertiesforanyGridViewinanypagethatuses theDataWebControlsTheme.Let'saddanotherSkinfortheDetailsView,adataWebcontrolthatwe'llbe usingshortly.AddanewSkintotheDataWebControlsThemenamedDetailsView.skin andaddthe followingmarkup:
<asp:DetailsViewrunat="server"CssClass="DataWebControlStyle"> <AlternatingRowStyleCssClass="AlternatingRowStyle"/> <RowStyleCssClass="RowStyle"/> <FieldHeaderStyleCssClass="HeaderStyle"/> </asp:DetailsView>
WithourThemedefined,thelaststepistoapplytheThemetoourASP.NETpage.AThemecanbeapplied
8of14
onapagebypagebasisorforallpagesinawebsite.Let'susethisthemeforallpagesinthewebsite.To accomplishthis,addthefollowingmarkuptoWeb.config's<system.web> section:
<pagesstyleSheetTheme="DataWebControls"/>
That'sallthereistoit!ThestyleSheetTheme settingindicatesthatthepropertiesspecifiedintheTheme shouldnotoverridethepropertiesspecifiedatthecontrollevel.TospecifythatThemesettingsshouldtrump controlsettings,usethetheme attributeinplaceofstyleSheetThemeunfortunately,Themesettings specifiedviathetheme attributedonotappearintheVisualStudioDesignview.RefertoASP.NETThemes andSkinsOverviewandServerSideStylesUsingThemesformoreinformationonThemesandSkinssee HowTo:ApplyASP.NETThemesformoreonconfiguringapagetouseatheme.
Figure12:TheGridViewDisplaystheProduct'sName,Category,Supplier,Price,andDiscontinued Information
DisplayingOneRecordataTimeinthe DetailsView
TheGridViewdisplaysonerowforeachrecordreturnedbythedatasourcecontroltowhichit'sbound.There aretimes,however,whenwemaywanttodisplayasolerecordorjustonerecordatatime.TheDetailsView control offersthisfunctionality,renderingasanHTML<table> withtwocolumnsandonerowforeach columnorpropertyboundtothecontrol.YoucanthinkoftheDetailsViewasaGridViewwithasinglerecord rotated90degrees. StartbyaddingaDetailsViewcontrol abovetheGridViewinSimpleDisplay.aspx.Next,bindittothesame ObjectDataSourcecontrolastheGridView.LikewiththeGridView,aBoundFieldwillbeaddedtothe DetailsViewforeachpropertyintheobjectreturnedbytheObjectDataSource'sSelect method.Theonly differenceisthattheDetailsView'sBoundFieldsarelaidouthorizontallyratherthanvertically.
9of14
Figure13:AddaDetailsViewtothePageandBindittotheObjectDataSource LiketheGridView,theDetailsView'sBoundFieldscanbetweakedtoprovideamorecustomizeddisplayof thedatareturnedbytheObjectDataSource.Figure14showstheDetailsViewafteritsBoundFieldsand CssClass propertieshavebeenconfiguredtomakeitsappearancesimilartotheGridViewexample.
Figure14:TheDetailsViewShowsaSingleRecord
10of14
NotethattheDetailsViewonlydisplaysthefirstrecordreturnedbyitsdatasource.Toallowtheusertostep throughalloftherecords,oneatatime,wemustenablepagingfortheDetailsView.Todoso,returnto VisualStudioandchecktheEnablePagingcheckboxintheDetailsView'ssmarttag.
Figure15EnablePagingintheDetailsViewControl
Figure16:WithPagingEnabled,theDetailsViewAllowstheUsertoViewAnyoftheProducts We'lltalkmoreaboutpaginginfuturetutorials.
11of14
AMoreFlexibleLayoutforShowingOneRecord ataTime
TheDetailsViewisprettyrigidinhowitdisplayseachrecordreturnedfromtheObjectDataSource.Wemay wantamoreflexibleviewofthedata.Forexample,ratherthanshowingtheproduct'sname,category, supplier,price,anddiscontinuedinformationeachonaseparaterow,wemaywanttoshowtheproductname andpriceinan<h4> heading,withthecategoryandsupplierinformationappearingbelowthenameandprice inasmallerfontsize.Andwemaynotcaretoshowthepropertynames(Product,Category,andsoon)next tothevalues. TheFormViewcontrol providesthislevelofcustomization.Ratherthanusingfields(liketheGridViewand DetailsViewdo),theFormViewusestemplates,whichallowforamixofWebcontrols,staticHTML,and databindingsyntax.IfyouarefamiliarwiththeRepeatercontrolfromASP.NET1.x,youcanthinkofthe FormViewastheRepeaterforshowingasinglerecord. AddaFormViewcontroltotheSimpleDisplay.aspx page'sdesignsurface.InitiallytheFormViewdisplays asagrayblock,informingusthatweneedtoprovide,atminimum,thecontrol'sItemTemplate.
Figure17:TheFormViewMustIncludeanItemTemplate YoucanbindtheFormViewdirectlytoadatasourcecontrolthroughtheFormView'ssmarttag,whichwill createadefault ItemTemplate automatically(alongwithanEditItemTemplate andInsertItemTemplate, iftheObjectDatatSourcecontrol'sInsertMethod andUpdateMethod propertiesareset).However,forthis examplelet'sbindthedatatotheFormViewandspecifyitsItemTemplate manually.Startbysettingthe FormView'sDataSourceID propertytotheID oftheObjectDataSourcecontrol,ObjectDataSource1.Next, createtheItemTemplate sothatitdisplaystheproduct'snameandpriceinan<h4> elementandthecategory andshippernamesbeneaththatinasmallerfontsize.
<asp:FormViewID="FormView1"runat="server" DataSourceID="ObjectDataSource1"EnableViewState="False"> <ItemTemplate>
12of14
<h4><%#Eval("ProductName")%> (<%#Eval("UnitPrice","{0:c}")%>)</h4> Category:<%#Eval("CategoryName")%> Supplier:<%#Eval("SupplierName")%> </ItemTemplate> </asp:FormView>
Figure18:TheFirstProduct(Chai)isDisplayedinaCustomFormat The<%#Eval(propertyName)%> isthedatabindingsyntax.TheEval methodreturnsthevalueofthe specifiedpropertyforthecurrentobjectbeingboundtotheFormViewcontrol.CheckoutAlexHomer's articleSimplifiedandExtendedDataBindingSyntaxinASP.NET2.0formoreinformationontheinsand outsofdatabinding. LiketheDetailsView,theFormViewonlyshowsthefirstrecordreturnedfromtheObjectDataSource.You canenablepagingintheFormViewtoallowvisitorstostepthroughtheproductsoneatatime.
Summary
AccessinganddisplayingdatafromaBusinessLogicLayercanbeaccomplishedwithoutwritingalineofcode thankstoASP.NET2.0'sObjectDataSourcecontrol.TheObjectDataSourceinvokesaspecifiedmethodofa classandreturnstheresults.TheseresultscanbedisplayedinadataWebcontrolthat'sboundtothe ObjectDataSource.InthistutorialwelookedatbindingtheGridView,DetailsView,andFormViewcontrols totheObjectDataSource. Sofarwe'veonlyseenhowtousetheObjectDataSourcetoinvokeaparameterlessmethod,butwhatifwe wanttoinvokeamethodthatexpectsinputparameters,suchastheProductBLL class's GetProductsByCategoryID(categoryID)?Inordertocallamethodthatexpectsoneormoreparameters wemustconfiguretheObjectDataSourcetospecifythevaluesfortheseparameters.We'llseehowto accomplishthisinournexttutorial. HappyProgramming!
FurtherReading
13of14
Formoreinformationonthetopicsdiscussedinthistutorial,refertothefollowingresources: CreateYourOwnDataSourceControls GridViewExamplesforASP.NET2.0 SimplifiedandExtendedDataBindingSyntaxinASP.NET2.0 ThemesinASP.NET2.0 ServerSideStylesUsingThemes HowTo:ApplyASP.NETThemesProgrammatically
AbouttheAuthor
ScottMitchell,authorofsixASP/ASP.NETbooksandfounderof4GuysFromRolla.com,hasbeenworking withMicrosoftWebtechnologiessince1998.Scottworksasanindependentconsultant,trainer,andwriter, recentlycompletinghislatestbook,SamsTeachYourselfASP.NET2.0in24Hours.Hecanbereachedat [email protected] orviahisblog,whichcanbefoundathttp://ScottOnWriting.NET.
SpecialThanksTo
Thistutorialserieswasreviewedbymanyhelpfulreviewers.LeadreviewerforthistutorialwasHilton Giesenow.InterestedinreviewingmyupcomingMSDNarticles?Ifso,dropmealineat [email protected].
14of14
