数据列表中的ajax CollapsiblePanelExtender

时间:2014-04-14 14:32:48

标签: c# asp.net ajax

我正在创建一个数据列表,该列表将在可折叠面板中显示多个人员记录,并且每个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.当我点击1st dataitem面板时,所有面板都会展开。我是否需要TargetControlID的动态ID?

1 个答案:

答案 0 :(得分:0)

我解决了如下: 在datalist的ItemDataBound事件中,我只设置了可折叠面板,目标面板和折叠/展开控件的动态ID;并设置&#34; TargetControlID&#34;,&#34; CollapseControlId&#34;和&#34; ExpandControlId&#34; 我在这里给出了代码片段:

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