11 The Repeater Control. 22 Objectives You will be able to use a Repeater Control to display data...
-
Upload
jade-dixon -
Category
Documents
-
view
216 -
download
0
Transcript of 11 The Repeater Control. 22 Objectives You will be able to use a Repeater Control to display data...
![Page 1: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/1.jpg)
11
The Repeater Control
![Page 2: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/2.jpg)
2 2
Objectives
You will be able to use a Repeater Control to display data obtained with a SQL query with custom formatting.
![Page 3: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/3.jpg)
3 3
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.
![Page 4: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/4.jpg)
4 4
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
http://www.cse.usf.edu/~turnerr/Web_Application_Design/090_Data_Bound_Controls.pdf
Save connection as "scorpius_connection"
![Page 5: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/5.jpg)
5
Save Connection String
![Page 6: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/6.jpg)
6 6
In Web.Config
<connectionStrings>
<add
name="scorpius_connection"
connectionString="Data Source=scorpius.eng.usf.edu;UserID=wpusr40;Password=xxx"
providerName="System.Data.SqlClient" />
</connectionStrings>
![Page 7: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/7.jpg)
7 7
In Default.aspx
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:scorpius_connection %>"
SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
</div>
</form>
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.
![Page 8: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/8.jpg)
8 8
Drag a Repeater to the Form
![Page 9: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/9.jpg)
9 9
Repeater on the Form
![Page 10: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/10.jpg)
10 10
Configure the Repeater
Switch to Source view.
![Page 11: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/11.jpg)
11 11
The Repeater in Source View
We will put a template inside the Repeater.
![Page 12: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/12.jpg)
12 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.
![Page 13: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/13.jpg)
13
Repeater with Template
![Page 14: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/14.jpg)
14
Data Binding Expression
<%# expression-goes-here %>
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.
![Page 15: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/15.jpg)
15 15
DataBinder.Eval
Check help for DataBinder.Eval http://msdn.microsoft.com/en-us/library/system.web.ui.databinder.
aspx http://msdn.microsoft.com/en-us/library/4hx47hfe.aspx
![Page 16: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/16.jpg)
16 16
Repeater Example
Build and run.
![Page 17: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/17.jpg)
17 17
Repeater in Action
![Page 18: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/18.jpg)
18 18
Make It a Table
![Page 19: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/19.jpg)
A Table with Style
<head runat="server">
<title>Repeater Demo</title>
<style type="text/css">
div
{
text-align: center;
}
table
{
border: solid 1px;
margin: auto;
}
td
{
border:solid 1px;
}
</style>
</head>
![Page 20: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/20.jpg)
20 20
The Table
![Page 21: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/21.jpg)
More Styling
td
{
border:solid 1px;
padding:4px;
font-family:Tahoma;
font-size:large;
color:Blue;
text-align:left
}
![Page 22: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/22.jpg)
22 22
More Styling
![Page 23: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/23.jpg)
23 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 <td> ... </td>
Let's add ContactName and Phone to the page.
![Page 24: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/24.jpg)
24 24
More Data
![Page 25: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/25.jpg)
25 25
Table with More Data
![Page 26: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/26.jpg)
26 26
Tighten it up a bit.
table { border: solid 1px; margin: auto; border-collapse:collapse; }
![Page 27: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/27.jpg)
27 27
Tighter Display
![Page 28: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/28.jpg)
28 28
AlternatingItemTemplate
An AlternatingItemTemplate can be used to give alternate rows different styling. Background color.
Make a table easier to read.
![Page 29: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/29.jpg)
29 29
AlternatingItemTemplate
![Page 30: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/30.jpg)
30 30
AlternatingItemTemplate
![Page 31: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/31.jpg)
Header Template
We can also provide a header for the table.
![Page 32: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/32.jpg)
32 32
HeaderTemplate
![Page 33: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/33.jpg)
33 33
HeaderTemplate
![Page 34: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/34.jpg)
34 34
Add a Page Heading
![Page 35: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062409/56649f4a5503460f94c6bbcb/html5/thumbnails/35.jpg)
35 35
Final Result