How to call UpdatePanel1.Update() method from another page in ASP.NET

Question

I have Default.aspx with several controls along with Uploadify Image upload control and i am call another file UploadImages.aspx File to upload image using jQuery, I upload images using general C# code and save image details in the database also.

HTML Code on Default.aspx PAGE

<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False"  UpdateMode="Conditional">
   <ContentTemplate>                                 
        <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" >
            <ItemTemplate>
                <br /><img src='http://test.kashmirsouq.com/ImageUploads/<%# Eval("ImageID") %>' width="100px" height="100px"   vspace="2" hspace="2" border="1" />
                <br /><asp:LinkButton ID="lnkBtnDeleteImage" CommandArgument='<%# Eval("sno") %>' CommandName="Delete" runat="server">
         Delete</asp:LinkButton>
        <br />
            </ItemTemplate>
        </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>" 
            SelectCommand="SELECT [sno], [ImageID] FROM [User_Images]">
        </asp:SqlDataSource>
 </ContentTemplate>
</asp:UpdatePanel> 

I want to use UpdatePanel1.Update() method To refresh the UpdatePanel1, But i dont know how to register updatePanel1 control in UploadImage.aspx page.

Please help me out with this My basic object is to show the image once it is upload without refreshing the page

Example of page on link removed as i got it working for security reason

Answer 1

Try to use uploadify's onAllComplete event to refresh your update panel from client-side code. For that purpose add onto the page button, add AsyncPostbackHandler for this button to updatepanel's triggers collection and fire click on this button programmatically in uploadify onAllComplete event handler:

$('#fuFiles').uploadify({
    onAllComplete: function (event, data) { $("#<%= HiddenButton.ClientID %>").click(); return true; },
    uploader: 'Scripts/uploadify.swf',
    script: 'FileUploads.aspx',
    cancelImg: 'Scripts/cancel.png',
    auto: 'true',
    multi: 'true',
    buttonText: 'Browse...',
    queueSizeLimit: 5,
    simUploadLimit: 2
});


<asp:Button runat="server" ID="HiddenButton" Style="display: none;" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="HiddenButton" />
            </Triggers>

Answer 2

UpdatePanel in ASP.NET WebForms can only be used to refresh parts of the page you're on by processing the same aspx file you came from. So an UpdatePanel in Default.aspx will always go back to Default.aspx. It can't get the output of another page like UploadImage.aspx at all.

You might be able to work around this by changing UploadImage.aspx to a usercontrol, and inlcude that in your updatepanel on the Default.aspx page.

Answer 3

I got it working with small changes made to your Code @Yuriy Rozhovetskiy as for some reason it was not working. Credit goes to @Yuriy Rozhovetskiy so i will mark his answer as correct, Below is working & tested version.

<script type="text/javascript">
    $(document).ready(function () {
        $('#fuFiles').uploadify({
            //'onAllComplete': function (event, data) { $("#<%= HiddenButton.ClientID %>").click(); return true; },
            'uploader': 'Scripts/uploadify.swf',
            'script': 'FileUploads.aspx',
            'cancelImg': 'Scripts/cancel.png',
            'auto': 'true',
            'multi': 'true',
            'fileExt': '*.jpg;*.gif;*.png',
            'buttonText': 'Browse...',
            'queueSizeLimit': 5,
            'simUploadLimit': 2,
            'onAllComplete': function (event, data) 
            {
                $("#<%= HiddenButton.ClientID %>").click();
                return true; 
            }
        });
    });
</script>

        <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" >
            <ItemTemplate>
                <br /><img src='http://test.kashmirsouq.com/ImageUploads/<%# Eval("ImageID") %>' width="100px" height="100px"   vspace="2" hspace="2" border="1" />
                <br /><asp:LinkButton ID="lnkBtnDeleteImage" CommandArgument='<%# Eval("sno") %>' CommandName="Delete" runat="server">
         Delete</asp:LinkButton>
        <br />
            </ItemTemplate>
        </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>" 
            SelectCommand="SELECT [sno], [ImageID] FROM [User_Images]">
        </asp:SqlDataSource>
 </ContentTemplate>
</asp:UpdatePanel> 
<asp:Button runat="server" ID="HiddenButton"  Style="display: none;" onclick="HiddenButton_Click" />

   <div id="fuFiles"></div>