Ajax Update Panel in Nested Listview not working - asp.net

Question

I have an Ajax update panel inside a nested listview as shown below.
<%# Page Title="LV Ajax" Language="VB" MasterPageFile="~/MasterPages/SimpleMasterPage.master"
AutoEventWireup="false" CodeFile="LV Ajax.aspx.vb" Inherits="LV_Ajax" %>
ListView Ajax
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ListView ID="OuterListView" runat="server" DataSourceID="SqlDataSource1">
<EmptyDataTemplate>
No Data Available.
</EmptyDataTemplate>
<ItemTemplate>
<asp:Label ID="PhotoAlbumIdLabel" runat="server" Text='<%# Eval("PhotoAlbumId") %>'
Visible="false" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ListView ID="InnerListView" runat="server" DataSourceID="SqlDataSource2">
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
<ItemTemplate>
<br />
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' ToolTip='<%# Eval("ToolTip") %>'
Width="400px" Height="300px" />
<br />
</ItemTemplate>
<LayoutTemplate>
<div id="itemPlaceholderContainer" runat="server" style="">
<span runat="server" id="itemPlaceholder" />
</div>
<asp:DataPager ID="DataPager1" runat="server" PageSize="1">
<Fields>
<asp:NextPreviousPagerField FirstPageText="<<" ShowFirstPageButton="True" ShowNextPageButton="False"
PreviousPageText="&lt&nbsp" ShowPreviousPageButton="True" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField LastPageText=">>" ShowLastPageButton="True" NextPageText="&nbsp&gt"
ShowNextPageButton="True" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</span>
</LayoutTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:RenaissanceConnectionString1 %>"
SelectCommand="SELECT [ToolTip], [ImageUrl], [Description], [PhotoAlbumId], [SortOrder] FROM [Picture] WHERE ([PhotoAlbumId] = #PAId) ORDER BY [SortOrder]">
<SelectParameters>
<asp:ControlParameter ControlID="PhotoAlbumIdLabel" DefaultValue="0" Name="PAId"
PropertyName="Text" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<br />
</span>
</ItemTemplate>
</asp:ListView>
Unfortunately when I click the datapager buttons although the picture changes correctly, the browser displays the page from the top. If I remove the outer listview it works perfectly keeping its position on the page.
This was working correctly, so if you think the code is correct maybe you could suggest some other changes.
If there is any genius out there who can suggest a solution it would be appreciated.
Many thanks in anticipation.

Answer 1

Maybe if you add ChildrenAsTriggers="true and set UpdateMode to Conditional it will work for you.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">

Answer 2

Your <ASP:UpdatePanel> tag is missing its <Triggers> element.
I think that it should be something like
<asp:UpdatePanel ... >
<Triggers>
<AsyncPostBackTrigger ControlID='DataPager1'>
</Triggers>
<ContentTemplate> .....