11 The Repeater Control

22 Objectives You will be able to use a Repeater Control to display data obtained with a SQL query with custom formatting.

33 The Repeater Control Displays query results on a page using a template. Snippet of HTML with blanks to be filled in with data from a data source. Repeated for each row in the data source. Greater flexibility than a GridView, at the cost of more work. The template specifies what to display from the data source and how to format it.

44 Using a Repeater Create a new web site Repeater_Demo Add a SqlDataSource Follow same procedures as last class to set up the SqlDataSource See slides 17 – 26 of 090_Data_Bound_Controls.pdf Save connection as "scorpius_connection"

5 Save Connection String

66 In Web.Config <add name="scorpius_connection" connectionString="Data Source=scorpius.eng.usf.edu;UserID=wpusr40;Password=xxx" providerName="System.Data.SqlClient" />

77 In Default.aspx <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=" " SelectCommand="SELECT * FROM [Customers]"> Note Will generate code to retrieve the specified connection string from the connectionStrings section of web.config Done on the server as the.aspx file is being processed. Does not emit HTML. Sets a property in SqlDataSource1.

88 Drag a Repeater to the Form

99 Repeater on the Form

10 Configure the Repeater Switch to Source view.

11 The Repeater in Source View We will put a template inside the Repeater.

12 Templates A template determines the appearance and content the HTML generated by the repeater. HTML or ASP tags. Has blanks to be filled with data from the data source. Repeated for each row in the data source.

13 Repeater with Template

14 Data Binding Expression The # makes this a data binding expression. Evaluated on the server. Replaced by the value of the expression. Expression could be a public variable or method In this case it is DataBinder.Eval( ) Other possibilities.

15 DataBinder.Eval Check help for DataBinder.Eval

16 Repeater Example Build and run.

17 Repeater in Action

18 Make It a Table

A Table with Style Repeater Demo div { text-align: center; } table { border: solid 1px; margin: auto; } td { border:solid 1px; }

20 The Table

More Styling td { border:solid 1px; padding:4px; font-family:Tahoma; font-size:large; color:Blue; text-align:left }

22 More Styling

23 More Data Let’s add more data to the table. Anything in the Customers table is available. We need a DataBinder.Eval for each column that we want to show. Inside... Let's add ContactName and Phone to the page.

24 More Data

25 Table with More Data

26 Tighten it up a bit. table { border: solid 1px; margin: auto; border-collapse:collapse; }

27 Tighter Display

28 AlternatingItemTemplate An AlternatingItemTemplate can be used to give alternate rows different styling. Background color. Make a table easier to read.

29 AlternatingItemTemplate

30 AlternatingItemTemplate

Header Template We can also provide a header for the table.

32 HeaderTemplate

33 HeaderTemplate

34 Add a Page Heading

35 Final Result