Master/Detail help needed for ASP.NET newbie. (screenshot too) - asp.net

Question

I'm just beinning basic data driven ASP.NET webforms design. I have the first part of a form working, but I don't know what to do next.
Please see this screenshot of what I have created so far: http://www.twitpic.com/2gnmr
I need help knowing what kind of HTML element to use in the master list, and what event/trigger on that element to use to fire off the "get child records for this selected item" sequence?
Also, is a ListView even the correct way to present the master list? At this time, I'm not trying to provide any editing features; I'll get to that later, I guess.
Should I use some other ASP.NET data control rather than hand-coding a listview like I am doing?
I don't want to see an actual "Select" link item beside each Customer Name (that looks goofy). I want the Customer Name to be the link to click on.
So, you can see in my code below that I have a ListView to present a list of CustomersWithOpenOrders. But, it's just a static list, so how do I make the Company Name label clickable, and what else will I need to make it fire back to some code-behind to fetch the child records. I already have a code-behind method to get child records for a passed-in CustomerNumber into a DataTable, and I think I would know how to bind that to a grid or listview for child records, but I do not know how to pass the CustomerNumber from the master ListView to the method from the UI form.
<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<table cellpadding="2" border="0" ID="tbl1" runat="server">
<tr id="Tr1" runat="server" class="lvHeader">
<th id="Th1" runat="server">Customer</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td>
<asp:Label ID="label2" class="FirstLine" runat="server" Text='<%# Eval("company") %>' />
<br />
<div class="SecondLine">
<asp:Label ID="labelCustNo" runat="server" Text='<%# Eval("custno") %>'/>
<asp:Label runat="server" Text='Ph: '></asp:Label>
<asp:Label ID="label3" runat="server" Text='<% # Eval("phone") %>' />
</div>
</td>
</tr>
</ItemTemplate>
</asp:ListView>

Answer 1

I personally haven't found a case where the ListView can't solve my needs. If you want to create a customer selection style list you can use a link button for binding.
<asp:ListView runat="server" id="CustomersList" ItemCommand="CustomersList_ItemCommand">
<LayoutTemplate>
<table cellpadding="2" border="0" ID="tbl1" runat="server">
<tr id="Tr1" runat="server" class="lvHeader">
<th id="Th1" runat="server">Customer</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td>
<asp:LinkButton ID="link1" class="FirstLine" runat="server" Text='<%# Eval("company") %>' CommandName="Select" />
<br />
<div class="SecondLine">
<asp:Label ID="labelCustNo" runat="server" Text='<%# Eval("custno") %>'/>
<asp:Label runat="server" Text='Ph: '></asp:Label>
<asp:Label ID="label3" runat="server" Text='<% # Eval("phone") %>' />
</div>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:ListView runat="server" ID="OrderList">
<!-- Child Rows implementation -->
</asp:ListView>
Then you would need to bind the event to the ListView.ItemCommand.
protected void CustomersList_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName = "Select")
{
if (e.Item.ItemType != ListViewItemType.DataItem) return;
var dataItem = e.Item as ListViewDataItem;
if (dataItem == null) return;
var customer = dataItem.DataItem as Customer;
if (customer == null) return;
this.OrdersList.DataSource = GetChildRecords(customer.ID);
this.OrdersList.DataBind();
}
}