数据列表中的ajax CollapsiblePanelExtender

Question

我正在创建一个数据列表，其中将有多个人记录显示在一个可折叠的面板和iside，每个dataItem用户可以编辑记录等。

以下是我的代码

 <%@ Register TagName="CreateEditPerson" Src="~/ascx/create_edit_person.ascx" TagPrefix="WD" %>
<asp:DataList ID="dlPerson" runat="server" OnItemDataBound="dlPerson_OnItemDataBound">
        <ItemTemplate>
          <div class="personRow">
                <div class="personRowHeader" id="divEditPerson">
                      <div class="lastNameColumn">
                           <asp:Label ID="lblLastName" runat="server"></asp:Label    </div>  
                      <div class="firstNameColumn">
                            <asp:Label ID="lblFirstName" runat="server"></asp:Label>
                      </div>
                      <div class="editColumn">
                            <asp:Image ID="imgExpandImage" runat="server" Class="divSearchLabel" meta:resourcekey="imgExpandImage" />
                            <asp:Label ID="lblEditPerson" runat="server" meta:resourcekey="lblEditPerson"></asp:Label>
                      </div>
                      <div style="clear: both">
                 </div>
            </div>
            <ajaxToolkit:CollapsiblePanelExtender ID="cpPerson" runat="server" meta:resourcekey="cpPerson"
                    Collapsed="true" TargetControlID="pnlpersonEdit" CollapseControlID="divEditPerson"
                    ExpandControlID="divEditPerson" TextLabelID="lblEditPerson" CollapsedSize="0"
                    ScrollContents="false" SuppressPostBack="True" ImageControlID="imgExpandImage">
                    </ajaxToolkit:CollapsiblePanelExtender>
                    <asp:Panel ID="pnlpersonEdit" runat="server">
                        <div class="product_technical_details">
                            <WD:CreateEditPerson ID="createEditPerson1" runat="server" />
                        </div>
                    </asp:Panel>
                </div>
            </ItemTemplate>
</asp:DataList>

我的问题是，1.当我点击第一个数据项面板时，所有面板都会展开。我需要TargetControlID的动态id吗？

Answer 1

我解决了以下问题:在datalist的ItemDataBound事件上，我只是设置了可折叠面板、目标面板和折叠/展开控件的动态ID；并设置了"TargetControlID“、"CollapseControlId”和"ExpandControlId“--我在这里给出了代码片段：

protected void dlPerson_OnItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        //Find the controls in the Item Template
        Panel pnlPersonEdit = e.Item.FindControlRecursive("pnlPersonEdit") as Panel;
        CollapsiblePanelExtender cpPersonEdit =
            e.Item.FindControlRecursive("cpPersonEdit") as CollapsiblePanelExtender;

        //This panel was a div previously "divEditPerson" I have changed it to panel
        Panel pnlEditPersonHead = e.Item.FindControlRecursive("pnlEditPersonHead") as Panel;

        //Some object from db
        PersonObject personObject = e.Item.DataItem as PersonObject;

        //Set Id of the collapsed/expanded panel from unique key
        pnlEditPersonHead.ID += personObject.CrmddressId.ToString();

        //Set Id of the target panel from unique key
        pnlPersonEdit.ID += personObject.CrmddressId.ToString();

        //simillarly set Id of the collapsible panel extender
        cpPersonEdit.ID += personObject.CrmddressId.ToString();

        //Now set the TargetControlID, CollapseControlID and ExpandControlID 
        cpPersonEdit.TargetControlID = pnlPersonEdit.ID;
        cpPersonEdit.CollapseControlID = pnlEditPersonHead.ID;
        cpPersonEdit.ExpandControlID = pnlEditPersonHead.ID;
      }
}