AsyncPostBackTrigger Just flashing/flicking the UpdatePanel but not updating it

Question

I am trying UpdatePanel & AsyncPostBackTrigger on master pages through find control method but problem is when I click on button (UpdateButton) It just flash/flick (No Postback) the UpdatePanle but still it don't update or refresh the gridview (images) inside the updatePanel.

I have placed script Manger on the master page & an AJAX Update panel in a ContentPlaceHolder in the child page. Also, in another ContentPlaceholder there is an asp button (outside of the UpdatePanel ).

I want to refresh/reload the AJAX UpdatePanel with this asp button.

Thanks for suggestions.

Child Page Code :-

protected void Page_Load(object sender, EventArgs e)
 {
        ScriptManager ScriptManager1 = (ScriptManager)Master.FindControl("ScriptManager1");
        ContentPlaceHolder cph = (ContentPlaceHolder)Master.FindControl("cp_Button");
        Button btnRefresh = (Button)cph.FindControl("btnRefresh");
        ScriptManager1.RegisterAsyncPostBackControl(btnRefresh);
 }
 protected void btnRefresh_Click(object sender, EventArgs e)
 {
        UpdatePanel1.Update();

 }         


<%@ Page Title="" Language="C#" MasterPageFile="~/InnerMaster.master" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="A" Async="true" %>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1">
             <Columns>
                 <asp:TemplateField>
                     <ItemTemplate>
                        <asp:Image ID="img12" runat="server" Width="650px" Height="600" ToolTip="A" ImageUrl='<%# Page.ResolveUrl(string.Format("~/Cli/{0}", Eval("image"))) %>' />
                     </ItemTemplate>
                 </asp:TemplateField>
             </Columns>
           </asp:GridView>
         </ContentTemplate>
      </asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="cp_Button" Runat="Server">   
    <asp:Button ID ="btnRefresh" runat="server" onclick="btnRefresh_Click" Height="34" Width="110" Text="More Images" />
</asp:Content>

---

Hi updated code :- Now on click event whole pages is refreshed.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;


    namespace EProxy
    {
        public class EventProxy : Control, IPostBackEventHandler
        {
            public EventProxy()
            { }

            public void RaisePostBackEvent(string eventArgument)
            { }

            public event EventHandler<EventArgs> EventProxied;

            protected virtual void OnEventProxy(EventArgs e)
            {
                if (this.EventProxied != null)
                {
                    this.EventProxied(this, e);
                }
            }

            public void ProxyEvent(EventArgs e)
            {
                OnEventProxy(e);
            }
        }
    }

On Master Page Code (btn click):-

protected void btnRefresh_Click(object sender, EventArgs e)
    {
        ContentPlaceHolder cph = (ContentPlaceHolder)this.FindControl("MainContent");
        EventProxy eventProxy = (EventProxy)cph.FindControl("ProxyControl") as EventProxy;

        eventProxy.ProxyEvent(e);

    }

Web Config :-

<pages maintainScrollPositionOnPostBack="true"  enableViewStateMac="true">
  <controls>
    <add tagPrefix="it" namespace="EProxy" assembly="App_Code"/>
  </controls>
</pages>

Answer 1

The reason that it doesn't work is because it's not possible to use a master page control directly as an AsyncPostBackTrigger for a child page control. However, there is a workaround that works by means of a proxy.

First, you need to create the following class (Put it in a seperate .cs file with the same name as the class):

public class EventProxy : Control, IPostBackEventHandler
{
    public EventProxy()
    { }

    public void RaisePostBackEvent(string eventArgument)
    { }

    public event EventHandler<EventArgs> EventProxied;

    protected virtual void OnEventProxy(EventArgs e)
    {
        if (this.EventProxied != null)
        {
            this.EventProxied(this, e);
        }
    }

    public void ProxyEvent(EventArgs e)
    {
        OnEventProxy(e);
    }
}

This class is a control that will be used to proxy the click event from the master page to the child page in order to refresh the UpdatePanel.

After you created the control, add the following after your UpdatePanel:

<it:EventProxy runat="server" ID="ProxyControl" />

Next, you need to indicate to your website / web application what 'it:EventProxy' is. To do that you need indicate that it is a control by adding it to the <controls> tag in your web.config file:

<pages maintainScrollPositionOnPostBack="true" theme="Default" enableViewStateMac="true">
        <controls>
            <add tagPrefix="it" namespace="The namespace that you saved the EventProxy class in" assembly="Your Assembly name"/>
        </controls>
</pages>

In the above exmaple, set the value of the namespace attribute to the namespace of the EventProxy class, and set the value of the assembly attribute to your solution's name.

After you have done that, add the EventProxy control's EventProxied event as an AsyncPostBackTrigger to your UpdatePanel. Your markup should look something like the following:

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ProxyControl" EventName="EventProxied" />
        </Triggers>
    </asp:UpdatePanel>
    <it:EventProxy runat="server" ID="ProxyControl" />

Then, call the following inside of your master page's button (That will be used to refresh the child page UpdatePanel) click event:

protected void btnRefresh_Click(object sender, EventArgs e)
{
    EventProxy eventProxy = MasterPageContentPlaceHolder.FindControl("ProxyControl") as EventProxy;
    eventProxy.ProxyEvent(e);
}

That's it!

Now what will happen is when you click the button in the master page, it will proxy the event of that click to the child page's EventProxy Control, that will in turn cause the UpdatePanel to refresh since the EventProxy control is one of its AsyncPostBackTriggers.

Answer 2

Place your button in it's own updatePanel or in the same updatePanel that you want to update with that button. Once yo do that, the updatePanel will update without codebehind, the button click will call an async postback for all controls inside all update panels.