[ Home | Syllabus | Course Notes | Assignments | Search]
Repeater
DataList
DataGrid
.ASPX Tags
<asp:Repeater>
<ItemTemplate>
<AlternatingItemTemplate>
<HeaderTemplate>
<FooterTemplate>
<SeparatorTemplate>
Events (can assign command arguments)
ItemCreated
ItemDataBound
ItemCommand
Example:
CREATE DATABASE MyComics
GO
USE MyComics
GO
CREATE TABLE Books (
Title varchar (64) NOT NULL,
Number smallint
NOT NULL,
Year smallint
NOT NULL,
Rating decimal (3, 1) NOT NULL,
CGC
bit NOT
NULL,
LargeCover varchar (64) NOT NULL,
SmallCover varchar (64) NOT NULL,
Comment varchar (512) NULL
)
INSERT INTO Books (Title, Number, Year, Rating, CGC, LargeCover, SmallCover,
Comment)
VALUES ('Masterminds of the .NET Universe', 1, 2001, 9.0, 0, 'mm_01.jpg',
'mm_01_small.jpg',
'First title in the Masterminds series.')
INSERT INTO Books (Title, Number, Year, Rating, CGC, LargeCover, SmallCover,
Comment)
VALUES ('Masterminds of the .NET Universe', 2, 2002, 9.2, 1,
'mm_02.jpg', 'mm_02_small.jpg',
'Minor wear on the cover prevents this one from grading higher. Pages
are white to off-white.')
INSERT INTO Books (Title, Number, Year, Rating, CGC, LargeCover, SmallCover,
Comment)
VALUES ('Masterminds of the .NET Universe', 3, 2002, 9.4, 0,
'mm_03.jpg', 'mm_03_small.jpg',
'First appearance of Dr. Evil.')
INSERT INTO Books (Title, Number, Year, Rating, CGC, LargeCover, SmallCover,
Comment)
VALUES ('Masterminds of the .NET Universe', 4, 2002, 9.0, 1,
'mm_04.jpg', 'mm_04_small.jpg',
'Hard-to-find issue made rarer by a printing error that limited
production.')
INSERT INTO Books (Title, Number, Year, Rating, CGC, LargeCover, SmallCover,
Comment)
VALUES ('Masterminds of the .NET Universe', 5, 2002, 9.2, 0,
'mm_05.jpg', 'mm_05_small.jpg',
'Double issue featuring epic battle for control of the universe.')
INSERT INTO Books (Title, Number, Year, Rating, CGC, LargeCover, SmallCover,
Comment)
VALUES ('Masterminds of the .NET Universe', 6, 2002, 9.4, 1,
'mm_06.jpg', 'mm_06_small.jpg',
'My personal favorite.')
INSERT INTO Books (Title, Number, Year, Rating, CGC, LargeCover, SmallCover,
Comment)
VALUES ('Masterminds of the .NET Universe', 7, 2002, 9.0, 0,
'mm_07.jpg', 'mm_07_small.jpg',
'Landmark issue featuring all the masterminds together for the first
time.')
GO
<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %><html> <body> <h1>My Comics (Repeater)</h1> <hr> <form runat="server"> <table width="100%"> <tr> <td width="104" />
F1: Need to import namespaces not provided by default
F2: invokes this c# code each repetition,
DataBinder is a class defined in System.Web.UI, "Eval" is a static
method that uses reflection to evaluate a data-binding expression (Container.DataItem
- which is bound to the current item from the data source) and the name of
the field desired.
NOTE: the image (set up by the second Eval, links to a second larger image -
first Eval)
F3: table inside a table - used to align with table in yellow for headings
F4: used to provide spacing to align to later tables.
F5: Optional formatting string
Adds Multicolumn features
RepeatColumns and RepeatDirection
SelectedIndex
SelectedItemStyle and SelectedItemTemplate; control appearance
EditItemStyle and EditItemTemplate for editing an item
An Example
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<body>
<h1>My Comics (DataList)</h1>
<hr>
<form runat="server">
<asp:Table Width="100%" Height="32" CellPadding="4"
BackColor="yellow" RunAt="server">
<asp:TableRow>
<asp:TableCell ID="Output" />
</asp:TableRow>
</asp:Table>
<br>
<asp:DataList ID="MyDataList" RepeatColumns="3"
RepeatDirection="Horizontal" CellPadding="4"
OnItemCommand ="OnItemCommand" RunAt="server">
<ItemTemplate>
<table width="100%" cellpadding="4">
<tr>
<td width="100">
<a href='Images/Large/<%# DataBinder.Eval
(Container.DataItem, "LargeCover") %>'>
<img src='Images/Small/<%# DataBinder.Eval
(Container.DataItem, "SmallCover") %>'>
</a>
</td>
<td valign="top">
<asp:LinkButton CommandName="Select" RunAt="server"
CommandArgument='<%# DataBinder.Eval
(Container.DataItem, "Comment") %>'
Text='<%# DataBinder.Eval (Container.DataItem,
"Title") + " " +
DataBinder.Eval (Container.DataItem,
"Number") %>' /><br>
<%# DataBinder.Eval (Container.DataItem, "Year") %><br>
<%# DataBinder.Eval (Container.DataItem, "Rating",
"{0:f1}") %><br>
</td>
</tr>
</table>
</ItemTemplate>
<SelectedItemStyle BackColor="gainsboro" />
</asp:DataList>
</form>
</body>
</html>
<script language="C#" runat="server">
void Page_Load (Object sender, EventArgs e)
{
if (!IsPostBack) {
SqlConnection connection = new SqlConnection
("server=localhost;database=mycomics;uid=sa;pwd=");
try {
connection.Open ();
SqlCommand command;
command = new SqlCommand
("select * from Books order by title, number",
connection);
SqlDataReader reader = command.ExecuteReader ();
MyDataList.DataSource = reader;
MyDataList.DataBind ();
}
finally {
connection.Close ();
}
}
}
void OnItemCommand (Object sender, DataListCommandEventArgs e)
{
if (e.CommandName == "Select") {
MyDataList.SelectedIndex = e.Item.ItemIndex;
Output.Text = e.CommandArgument.ToString ();
}
}
</script>
F6: When the LinkButton is clicked, the DataList fires an ItemCommand event
F7: makes this a hyperlink - which sends back some command parameter information
F8: makes selection visible
F9: allows handling of multiple types of commands
F10: with an argument
Permits tabular display of data course information
Example
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<body>
<h1>My Comics (DataGrid)</h1>
<hr>
<form runat="server">
<center>
<asp:DataGrid ID="MyDataGrid" AutoGenerateColumns="false"
BorderWidth="1" BorderColor="lightgray" CellPadding="2"
Font-Name="Verdana" Font-Size="8pt" GridLines="vertical"
OnItemCommand="OnItemCommand" OnSortCommand="OnSort"
Width="90%" AllowSorting="true" RunAt="server">
<Columns>
<asp:ButtonColumn ButtonType="PushButton"
HeaderText="Cover" Text="View"
HeaderStyle-HorizontalAlign="center"
ItemStyle-HorizontalAlign="center"
CommandName="ViewComic" />
<asp:BoundColumn HeaderText="Title" DataField="Title"
SortExpression="Title ASC"
HeaderStyle-HorizontalAlign="center" />
<asp:BoundColumn HeaderText="Number" DataField="Number"
SortExpression="Number ASC"
HeaderStyle-HorizontalAlign="center"
ItemStyle-HorizontalAlign="center" />
<asp:BoundColumn HeaderText="Year" DataField="Year"
SortExpression="Year ASC"
HeaderStyle-HorizontalAlign="center"
ItemStyle-HorizontalAlign="center" />
<asp:BoundColumn HeaderText="Rating" DataField="Rating"
DataFormatString="{0:f1}" SortExpression="Rating ASC"
HeaderStyle-HorizontalAlign="center"
ItemStyle-HorizontalAlign="center" />
<asp:TemplateColumn HeaderText="CGC"
HeaderStyle-HorizontalAlign="center">
<ItemTemplate>
<center>
<%# ((bool) DataBinder.Eval (Container.DataItem,
"CGC")) == false ? "N" : "Y" %>
</center>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn HeaderText="Large Cover"
DataField="LargeCover"
HeaderStyle-HorizontalAlign="center" />
<asp:BoundColumn HeaderText="Small Cover"
DataField="SmallCover"
HeaderStyle-HorizontalAlign="center" />
</Columns>
<HeaderStyle BackColor="teal" ForeColor="white"
Font-Bold="true" />
<ItemStyle BackColor="white" ForeColor="darkblue" />
<AlternatingItemStyle BackColor="beige"
ForeColor="darkblue" />
</asp:DataGrid>
</center>
</form>
</body>
</html>
<script language="C#" runat="server">
void Page_Load (Object sender, EventArgs e)
{
if (!IsPostBack) {
SqlDataAdapter adapter = new SqlDataAdapter
("select * from books order by title, number",
"server=localhost;database=mycomics;uid=sa;pwd=");
DataSet ds = new DataSet ();
adapter.Fill (ds);
MyDataGrid.DataSource = ds;
MyDataGrid.DataBind ();
}
}
void OnSort (Object sender, DataGridSortCommandEventArgs e)
{
SqlDataAdapter adapter = new SqlDataAdapter
("select * from books order by title, number",
"server=localhost;database=mycomics;uid=sa;pwd=");
DataSet ds = new DataSet ();
adapter.Fill (ds);
DataView view = new DataView (ds.Tables[0]);
view.Sort = e.SortExpression.ToString ();
MyDataGrid.DataSource = view;
MyDataGrid.DataBind ();
}
void OnItemCommand (Object sender, DataGridCommandEventArgs e)
{
if (e.CommandName == "ViewComic")
Response.Redirect ("Images/Large/" + e.Item.Cells[6].Text);
}
</script>
F11: Lots of properties to control appearance and behavior