Datagrid里套Datagrid的方法2

http://www.developer.com/net/article.php/10916_2224121_2

Another approach is to repeat an entire block of data. For example, if we define a relationship where the Customer has a list of contact information, for each customer we may want to show both the customer information and the nested, repeating contact information. Nesting a DataGrid inside of a DataList is a relatively low-impact way to achieve this result.

Figure 2 shows the results of nesting a DataGrid within our DataList. Before we talk about how to create this effect, let's take a moment to clear up some details. The first detail is that the DataGrid border was left in place to make it clear where the DataGrid was located. The second detail is that all of the contact information was intentionally initialized to the same value (e.g. Number=411 and Description=Information); displaying other values is simply a matter of modifying the relevant fields with code or user input. Finally, I used a strongly typed collection of customer objects and each Customer object contained a list of contact information. One could use any data structure that can be used as a DataSource for the DataList and DataGrid, such as a DataSet.

Click here for a larger image.

Figure 2: The nested DataGrid in the DataList. The DataGrid border was left in for clarity.

We already know how to create the ID, First Name, Last Name, and Picture columns; I re-used the code provided in Listing 1. The new part is the nested contact information. Let's talk about a convenient means of creating this effect.

To create the nested effect, do this:

1. Drop a DataGrid onto the Web Page containing the HTML table/DataList, but not intermixed with those controls.
2. Use the Properties window to modify the properties of the DataGrid. For example, set AutoGenerateColumns to False and define the (DataBindings) property as shown in Figure 3. (Basically, the DataSource property was set to DataBinder.Eval(Container.DataItem, "ContactInformationList") where the Container.DataItem will be a Customer object.)
3. Then, switch to the HTML view and add a new column to the ItemTemplate and SelectedItemTemplate using the data cell tag-pair <td></td>.
4. In the HTML, find the definition of the DataGrid—it will begin with the tag <DataGrid> and end with a matching </DataGrid>. Paste the DataGrid definition in between the new <td></td> pair defined in the ItemTemplate and SelectedItemTemplate.
5. Add the code that supplies the DataSource and calls DataBind in the code-behind, and you're ready to run the example.

Click here for a larger image.

Figure 3: Use the DataBindings dialog to define the DataSource for the DataGrid.

For your perusal, the ItemTemplate containing the DataGrid—now playing the role of template—is provided in Listing 2 and the complete implementation of the Customer and ContactInformation is provided without comment in Listing 3.

Listing 2: The revised ItemTemplate, including the nested DataGrid definition (highlighted), section from Listing 1.

1:    <ItemTemplate>
2:  <tr height="30px">
3:    <td>
4:      <asp:LinkButton id="Linkbutton2" CommandName="Select"
                        runat="server">
5:        <%# DataBinder.Eval(Container.DataItem, "ID") %>
          </asp:LinkButton></td>
6:    <td>
7:      <asp:Label id="Label6" runat="server">
8:      <%# DataBinder.Eval(Container.DataItem, "FirstName") %>
        </asp:Label></td>
9:    <td>
10:     <asp:Label id="Label7" runat="server">
11:       <%# DataBinder.Eval(Container.DataItem, "LastName") %>
          </asp:Label></td>
12:   <td>
13:     <asp:Label id="Label8" runat="server">
14:       <%# DataBinder.Eval(Container.DataItem, "Email") %>
          </asp:Label></td>
15:   <td>
16:     <asp:DataGrid id=DataGrid1
17:       DataSource=
18:       '<%# DataBinder.Eval(Container.DataItem,
                               "ContactInformationList") %>'
19:       runat="server" AutoGenerateColumns="False">
20:       <Columns>
21:         <asp:BoundColumn DataField="ID" ReadOnly="True" 
22:           HeaderText="ID"></asp:BoundColumn>
23:         <asp:BoundColumn DataField="Number"
                             HeaderText="Number">
            </asp:BoundColumn>
24:         <asp:BoundColumn DataField="Description"
25:           HeaderText="Description"></asp:BoundColumn>
26:       </Columns>
27:     </asp:DataGrid>
28:   </td>
29:   <td align="center" valign="center" rowspan="2">
30:     <asp:Image id="Image1" Height="60px" Width="40px"
31:       ImageUrl='<%# DataBinder.Eval(Container.DataItem,
                                        "Picture") %>'
32:       runat="server"></asp:Image>
33:   </td>
34: </tr>
35: <tr height="30px">
36:   <td></td>
37:   <td></td>
38:   <td></td>
39:   <td></td>
40: </tr>
41:   </ItemTemplate>

Listing 3: The strongly typed Customer and ContactInformation collections used for the samples.

Public Class CustomerList
  Inherits CollectionBase

  Public Shared Function GetCustomerList() As CustomerList
    Dim obj As CustomerList = New CustomerList
    obj.Add(New Customer(1, "Paul", "Kimmel", _
                            "pkimmel@softconcept.com", _
                            "~/Images/PaulKimmel.jpg"))
    obj.Add(New Customer(2, "Brad", "Jones", ""))
    obj.Add(New Customer(3, "Robert", "Golieb", ""))
    obj.Add(New Customer(4, "Geoff", "Caylor", ""))
    obj.Add(New Customer(5, "Joe 'Bilbo'", "Shook", ""))
    Return obj
  End Function

  Default Public Property Item(ByVal Index As Integer) As Customer
  Get
    Return CType(List(Index), Customer)
  End Get
  Set(ByVal Value As Customer)
    List(Index) = Value
  End Set
  End Property

  Public Function Add(ByVal Value As Customer) As Integer
    Return List.Add(Value)
  End Function

End Class

Public Class Customer
  Private FID As Integer
  Private FFirstName As String
  Private FLastName As String
  Private FEmail As String
  Private FPicture As String
  Private FContactInformationList As ContactInformationList

  Public Sub New()
  End Sub

  Public Sub New(ByVal ID As Integer, ByVal FirstName As String, _
    ByVal LastName As String, ByVal EMail As String, _
    Optional ByVal Picture As String = "~/Images/Unavailable.jpg")

    FID = ID
    FFirstName = FirstName
    FLastName = LastName
    FEmail = EMail
    FPicture = Picture

    FContactInformationList = _
     ContactInformationList.GetContactInformationList(ID)
  End Sub


  Public Property ID() As Integer
  Get
    Return FID
  End Get
  Set(ByVal Value As Integer)
    FID = Value
  End Set
  End Property

  Public Property FirstName() As String
  Get
    Return FFirstName
  End Get
  Set(ByVal Value As String)
    FFirstName = Value
  End Set
  End Property

  Public Property LastName() As String
  Get
    Return FLastName
  End Get
  Set(ByVal Value As String)
    FLastName = Value
  End Set
  End Property

  Public Property Email() As String
  Get
    Return FEmail
  End Get
  Set(ByVal Value As String)
    FEmail = Value
  End Set
  End Property

  Public Property Picture() As String
  Get
    Return FPicture
  End Get
  Set(ByVal Value As String)
    FPicture = Value
  End Set
  End Property

  Public ReadOnly Property ContactInformationList() _
         As ContactInformationList
  Get
    Return FContactInformationList
  End Get
  End Property

End Class

Public Class ContactInformationList
    Inherits CollectionBase

  Public Shared Function GetContactInformationList(ByVal ID _
         As Integer) As ContactInformationList
    Dim obj As ContactInformationList = New ContactInformationList
    obj.Add(New ContactInformation(ID, "411", "Information"))
    obj.Add(New ContactInformation(ID, "www.yahoo.com", _
                                   "People Search"))
    Return obj
  End Function

  Default Public Property Item(ByVal Index As Integer) _
          As ContactInformation
  Get
    Return CType(List(Index), ContactInformation)
  End Get
  Set(ByVal Value As ContactInformation)
    List(Index) = Value
  End Set
  End Property

  Public Function Add(ByVal Value As ContactInformation) As Integer
    Return List.Add(Value)
  End Function

End Class

Public Class ContactInformation
  Private FID As Integer
  Private FNumber As String
  Private FDescription As String

  Public Sub New(ByVal ID As Integer, ByVal Number As String, _
    ByVal Description As String)
      FID = ID
      FNumber = Number
      FDescription = Description
  End Sub

  Public Property ID() As Integer
  Get
    Return FID
  End Get
  Set(ByVal Value As Integer)
    FID = Value
  End Set
  End Property

  Public Property Number() As String
  Get
    Return FNumber
  End Get
  Set(ByVal Value As String)
    FNumber = Value
  End Set
  End Property

  Public Property Description() As String
  Get
    Return FDescription
  End Get
  Set(ByVal Value As String)
    FDescription = Value
  End Set
  End Property
End Class

It is worth noting that if we don't use the HTML table interspersed with the DataList, much, if not all, of the editing of the DataList and DataGrid can occur visually. As with a lot of programming, unfortunately, the most advanced things still have to be done by hand.

Templating with a UserControl

An excellent way to separate tasks and make managing the code-behind easier is to heavily employ UserControls. For example, what if we wanted to programmatically interact with the nested DataGrid? Unfortunately, DataGrid1 doesn't actually exist in the code-behind. When we cut the DataGrid from the page and pasted it in the template, we have a template definition for the grid, but each row creates a grid dynamically. Getting to those templated, dynamic grids is messy and time consuming. We have to implement events for the DataList and invoke FindControl or rely on the literal column position. This results in complicated code, dynamic binding of events, and slower performance; calling FindControl incurs some overhead.

There is a better way. If we place the DataGrid on its own UserControl, we can modify the definition of the DataGrid and add extra code at any time. By placing the UserControl containing the DataGrid in the DataList, we get the same visual effect as if we placed the grid in the DataList directly, yet any modifications to the separate UserControl-with-DataGrid are easier to effect and show up immediately in the DataList. The net benefit is that our DataList's HTML is much simpler, the same visual result can be affected, the code-behind for the DataGrid can be implemented at design time much more easily, and the UserControl can be used in other contexts. The DataList, then, simply devolves to a mechanism for repeating the template section.

There is a drawback using the DataList with a nested DataGrid approach: editing nested DataGrid seems to be broken. If you invoke an edit behavior on a DataGrid, your code will receive the Edit behavior but not subsequent events, such as Update. This is a problem. Fortunately, there is a solution and the clue resides in the role that our DataList has been relegated too in the last paragraph.