Getting Started
Now that we have a sense of what we need let's start creating the .aspx page.
Ok, we'll just start of by adding a Page directive, where we define the language we are going to use for this page and what codebehind we want to use. Also take note of the Import directive as we need this throughout the page:
<%@ Page Language="C#" Codebehind="MasterDetail.aspx.cs" Inherits="MasterDetail.MasterDetail" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Master-Detail</title>
<style type="text/css">
h1 { font-family: verdana; font-weight: bold; font-size: 16px; color: red; padding-bottom: 5px; margin-bottom: 0px; }
td { font-family: verdana; font-size: 12px; }
</style>
</head>
<body>
I've also added a couple of styles to the page, but this is optional.
Now that the base is in place we need to add the first Repeater control, and define the ItemTemplate:
<asp:repeater id="Categories" runat="server">
<itemtemplate>
<h1><%# ((DataRowView) Container.DataItem)["CategoryName"] %></h1>
The preceding code very simple stuff, the only thing that may be new to you is the way I databind the 'CategoryName' field; Instead of using the 'standard' way, namely by using DataBinder.Eval(), I simply cast Container.DataItem to a DataRowView (this is why we needed that Import directive) and then refer to the field I want to print to the screen.
Next we need to add the second the Repeater control, the one that will display all products within the respective categories:
<asp:repeater id="Products" runat="server">
<headertemplate>
<table cellpadding="2" cellspacing="1" bgcolor="#666666" width="490">
<tr bgcolor="#ffffff">
<td width="300"><b>ProductName</b></td>
<td width="150"><b>QuantityPerUnit</b></td>
<td width="20"><b>UnitPrice</b></td>
<td width="20"><b>UnitsInStock</b></td>
</tr>
</headertemplate>
<itemtemplate>
<tr bgcolor="#ffffff">
<td width="300"><%# ((DataRowView) Container.DataItem)["ProductName"] %></td>
<td width="150"><%# ((DataRowView) Container.DataItem)["QuantityPerUnit"] %></td>
<td width="20"><%# DataBinder.Eval(Container.DataItem, "UnitPrice", "{0:c}") %></td>
<td width="20"><%# ((DataRowView) Container.DataItem)["UnitsInStock"] %></td>
</tr>
</itemtemplate>
<footertemplate>
</table>
</footertemplate>
</asp:repeater>
Once again, simple stuff, although there is one thing you might want to take note of; when I databind the 'UnitPrice' column I use the 'standard' approach as it allows for quick and simple string formatting. By adding "{0:c}" the output is formatted as currency.
Finally we'll just clean up before continuing on to the codebehind file:
</itemtemplate>
<separatortemplate>
<br/><br/>
</separatortemplate>
</asp:repeater>
</body>
</html>