11 the repeater control. 22 objectives you will be able to use a repeater control to display data...
Post on 14-Jan-2016
220 Views
Preview:
TRANSCRIPT
11
The Repeater Control
2 2
Objectives
You will be able to use a Repeater Control to display data obtained with a SQL query with custom formatting.
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.
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"
5
Save Connection String
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>
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.
8 8
Drag a Repeater to the Form
9 9
Repeater on the Form
10 10
Configure the Repeater
Switch to Source view.
11 11
The Repeater in Source View
We will put a template inside the Repeater.
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.
13
Repeater with Template
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.
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
16 16
Repeater Example
Build and run.
17 17
Repeater in Action
18 18
Make It a Table
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>
20 20
The Table
More Styling
td
{
border:solid 1px;
padding:4px;
font-family:Tahoma;
font-size:large;
color:Blue;
text-align:left
}
22 22
More Styling
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.
24 24
More Data
25 25
Table with More Data
26 26
Tighten it up a bit.
table { border: solid 1px; margin: auto; border-collapse:collapse; }
27 27
Tighter Display
28 28
AlternatingItemTemplate
An AlternatingItemTemplate can be used to give alternate rows different styling. Background color.
Make a table easier to read.
29 29
AlternatingItemTemplate
30 30
AlternatingItemTemplate
Header Template
We can also provide a header for the table.
32 32
HeaderTemplate
33 33
HeaderTemplate
34 34
Add a Page Heading
35 35
Final Result
top related