Working with Asp.Net ListView and Asp.Net Ajax Update Panel

Question

Hello there, I hope this will be easy for someone to answer. First off I was trying to make a ListView bound to a DataPager and put in an ASP.NET UpdatePanel to make an AJAX-powered pager for the records from my database. I grabbed an UpdatePanel and I placed:

1. SqlDataSource
2. ListView - having ItemTemplate including one ImageButton and several other ASP.NET controls in it
3. DataPager

in the ContentTemplate. Assigning the DataPager ID to the AsyncPostbackTrigger in the UpdatePanel's trigger fields worked perfectly.

I also wanted to perform a full post-back in the ImageButton Click event. However, because the ImageButton is inside the ListView, the UpdataPanel causes a partial post-back. I tried adding the ImageButton as an UpdatePanel PostBackTrigger, but the UpdatePanel demands a control ID, and won't accept the ImageButton since it is inside the ListView.

How do I pass it a control ID for an element inside ItemTemplate of the ListView and successfully cause a full post back?

Here is my code:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate> 
        <asp:SqlDataSource ... ></asp:SqlDataSource>
        <asp:ListView ID="ListViewForAlbums" runat="server" >
            <ItemTemplate>
                <div class="album">
                    <asp:ImageButton ID="albumPhoto" class="albumPhotosStyle" runat="server" ImageUrl="<%# Bind('albumPhotoPath') %>" AlternateText="<%# Bind('album_id') %>" ToolTip="<%# Bind('albumDetails') %>" onclick="albumPhotos_Click"  />
                    <div class="albumInfoHolder">

                    ...

                    </div>
                </div> <!-- End Album -->
            </ItemTemplate>
            <EmptyDataTemplate>
                <p>No Albums Yet. Check Back Soon!</p>
            </EmptyDataTemplate>
        </asp:ListView>

        <asp:DataPager ID="DataPagerForAlbums" runat="server" PagedControlID="ListViewForAlbums" PageSize="3" >
            <Fields>
                <asp:NextPreviousPagerField ShowFirstPageButton="True" FirstPageText="&laquo" ShowNextPageButton="False"  ShowPreviousPageButton="false" />
                <asp:NumericPagerField />
                <asp:NextPreviousPagerField ShowLastPageButton="True" LastPageText="&raquo" ShowPreviousPageButton="False"  ShowNextPageButton="false" />
            </Fields>
        </asp:DataPager>
        </p>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DataPagerForAlbums" />
    </Triggers>
</asp:UpdatePanel> 

Answer 1

Use a ItemDataBound ListView's event to get ImageButton and register it as a postback control with ScriptManager's RegisterPostBackControl method.

Answer 2

You can use the ScriptManager to register the control as a postback control. Do something like this in the ItemDataBound event:

protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    ImageButton button = e.Item.FindControl("ImageButton1") as ImageButton;
    if (button != null)
    {
        ScriptManager.GetCurrent(Page).RegisterPostBackControl(button);            
    }
}