How to fire an event of a page in Async mode a button inside an UpdatePanel inside a UserControl?

Question

EDITED...

I got an ASP.NET Button inside an UpdatePanel, inside a UserControl.

I want to make the IMAGE visible by CLICKing on the UserControl’s Button (btnSubmit).

Using the following js function I’m able to do it in normal postback mode, but it’s not working in Async mode.

The question is, how can I do this in an Async mode or what’s the best way to do this?

User Control (Categories):

<asp:UpdatePanel ID="upItems" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="btnSubmitPostBack();"/>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

ASP.NET Page

<script>
    function btnSubmitPostBack() {
        __doPostBack('<%= btnDoSomething.ClientID %>', '');
    }
</script>

<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
            <uc1:Categories ID="Categories1" runat="server" CatRootName="Products" />
            <asp:Button ID="btnDoSomething" CssClass="hidden" runat="server" Text=" Do Something" OnClick=" btnDoSomething_Click" />
             <asp:Image ID="Image1" runat="server" Visible="false" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnDoSomething" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

protected void btnDoSomething_Click(object sender, EventArgs e)
{
    Image1.Visible = true;
    up.Update();
}

Thanks for your attention and help in advance!

Answer 1

OK here we go :( Just compiled and ran this successfully) and I think that's the right way to do it: ( the key here is to find the other user control and drill inside it for your control to update:

You user control code :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Categories.ascx.cs" Inherits="WebApplication1.Categories" %>

<asp:UpdatePanel ID="upItems" runat=*emphasized text*"server" UpdateMode="Conditional">
    <ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"/>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

User control code behind:

 protected void btnSubmit_Click(object sender, EventArgs e)
        {
            UpdatePanel ImageUpdatePanel = (UpdatePanel)this.Parent.FindControl("up");

            Image _img = (Image)ImageUpdatePanel.FindControl("Image1");

            _img.Visible = true;
            //Updating UpdatePanel
            ImageUpdatePanel.Update();
        }

and then your page code

    <asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
            <uc1:Categories ID="Categories1" runat="server" CatRootName="Products" />
            <asp:Button ID="btnDoSomething" CssClass="hidden" runat="server" Text=" Do Something"/>
             <asp:Image ID="Image1" runat="server" Visible="false" ImageUrl="~/Images/heroAccent.png" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnDoSomething" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

this is 100% working solution, if u need I can send u the code too :)