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