All ASP.Net WebForm controls require runat="server"
in order to communicate with the CodeBehind.
When the Repeater is Bound, for each item in the data, a new table row will be added.
<asp:Repeater ID="repeaterID" runat="server" OnItemDataBound="repeaterID_ItemDataBound">
<HeaderTemplate>
<table>
<thead>
<tr>
<th style="width: 10%">Column 1 Header</th>
<th style="width: 30%">Column 2 Header</th>
<th style="width: 30%">Column 3 Header</th>
<th style="width: 30%">Column 4 Header</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr runat="server" id="rowID">
<td>
<asp:Label runat="server" ID="mylabel">You can add ASP labels if you want</asp:Label>
</td>
<td>
<label>Or you can add HTML labels.</label>
</td>
<td>
You can also just type plain text like this.
</td>
<td>
<button type="button">You can even add a button to the table if you want!</button>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
The ItemDataBound
method is optional, yet useful for formatting or populating more complicated data. In this example, the method is used to dynamically give each <tr>
a unique ID. This ID can then be use in JavaScript to access or modify a specific row. Note, the tr
will not keep its dynamic ID value on PostBack. The text of each row's <asp:Label>
was also set in this method.
protected void repeaterID_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
MyItem item = (MyItem)e.Item.DataItem;
var row = e.Item.FindControl("rowID");
row.ClientIDMode = ClientIDMode.Static;
row.ID = "rowID" + item.ID;
Label mylabel = (Label)e.Item.FindControl("mylabel");
mylabel.Text = "The item ID is: " + item.ID;
}
}
If you plan on doing a lot of communication with the CodeBehind, you might want to consider using GridView. Repeaters, however, in general have less overhead than GridView, and with basic ID manipulation, can perform the same functions as GridView.
asp:ListView
introduced in ASP.NET WebForms framework 3.5 is the most flexible of all DataPresentation Controls in the framework. An example of Grouping using ListView (which will come handy as an image gallery)
Objective: To display three images in a row using asp:ListView
Markup
<asp:ListView ID="SportsImageList" runat="server"
GroupItemCount="3">
<LayoutTemplate>
<span class="images-list">
<ul id="groupPlaceholder" runat="server"></ul>
</span>
</LayoutTemplate>
<GroupTemplate>
<ul>
<li id="itemPlaceholder" runat="server"></li>
</ul>
</GroupTemplate>
<ItemTemplate>
<li>
<img src='<%# Container.DataItem %>' />
</li>
</ItemTemplate>
</asp:ListView>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
SportsImageList.DataSource = GetImages();
SportsImageList.DataBind();
}
}
private static IEnumerable<string> GetImages()
{
var images = Enumerable.Range(1, 9) //get numbers 1 to 9
.Select(i =>
string.Format("http://lorempixel.com/100/100/sports/{0}/", i)
); //convert the numbers to string
return images;
}
CSS
.images-list ul{
clear: both;
list-style-type: none;
}
.images-list ul li{
float: left;
padding: 5px;
}
Rendered Output
<script language="VB" runat="server">
Sub SubmitBtn_Click(sender As Object, e As EventArgs)
Label1.Text = "Text1.Text = " & Text1.Text
End Sub
</script>
<h3><font face="Verdana">TextBox Sample</font></h3>
<form runat="server">
<asp:TextBox id="Text1" Text="Copy this text to the label" Width="200px" runat="server"/>
<asp:Button OnClick="SubmitBtn_Click" Text="Copy Text to Label" Runat="server"/>
<p>
<asp:Label id="Label1" Text="Label1" runat="server"/>
</form>
The HyperLink control is used to navigate from the client to another page.
<html>
<script language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
' Set hyperlink to "~", which indicates application root.
HyperLink1.NavigateUrl = "~"
End Sub
</script>
<body>
<h3><font face="Verdana">Simple asp:hyperlink Sample</font></h3>
<form runat=server>
<p>
<asp:hyperlink id=HyperLink1 runat="server">
Go To QuickStart
</asp:hyperlink>
</form>
</body>
</html>
<HeaderTemplate></HeaderTemplate>
<ItemTemplate></ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:Repeater>