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

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();
  }
}