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>
Comments