Ajax – How to create UpdatePanel triggers dynamically

ajaxasp.netasp.net-ajaxupdatepanelvisual studio

I have an UpdatePanel in my default.aspx page and the UpdatePanel has asp placeholder, also I have an ascx control that is the navigation of the site and it is created dynamically based on the data in the database, each navigation item is an ImageButton, and my each loop in DataList has HiddenField value of the URL for each corresponded ascx control like Value="~/controls/somecontrol.ascx"

Here is what I want/need to do:
I need to create triggers dynamically for my UpdatePanel that is in default.aspx in my ascx navigation control, so what I am exactly looking to do is that my each navigation item that is an "ImageButton" to be a trigger for this UpdatePanel and when you click on it, it will reference the placeholder in UpdatePanel and load the control based on the NavigateUrl path and do placeholder.Controls.Add(mycontrol).

Default.aspx page:

 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:PlaceHolder ID="phMainHolder" runat="server"></asp:PlaceHolder>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Navigation ascx control:

<asp:DataList ID="dlnavigations" runat="server"  RepeatDirection="Horizontal" 
                onitemcommand="dlnavigations_ItemCommand" OnItemDataBound="dlnavigations_ItemDataBound">
                <ItemTemplate>                      
                    <asp:HiddenField ID="hfURL" Value='<%#Eval("strUrl")%>' runat="server" />     

                        <asp:ImageButton ID="imgTab" Width="20"   CommandArgument='<%#Eval("ID")%>'  
                            ImageUrl='<%#Eval("strIcon")%>' runat="server" />                        
                </ItemTemplate>
            </asp:DataList>


protected void dlnavigations_ItemCommand(object source, DataListCommandEventArgs e)
            {
                HiddenField hfURL = (HiddenField)e.Item.FindControl("hfURL");
                Control ctrl = LoadControl(hfURL.Value);
                myplaceholderinUpdatePanel.Controls.Clear();
                //here i need to reference my placeholder in UpdatePanel then
                myplaceholderinUpdatePanel.Controls.Add(ctrl);

            }

I am not very sure if this is really possible to do with UpdatePanel please any help appropriated, if i cant do it with UpdatePanel are there any other way of doing this same concept?

thank.

Best Answer

If i've understood your requirement correctly i would suggest another approach:

Set the UpdatePanel1's UpdateMode property to Conditional

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:PlaceHolder ID="phMainHolder" runat="server"></asp:PlaceHolder>
    </ContentTemplate>
</asp:UpdatePanel>

To clarify the event driven approach a bit, assume this is your UserControl's codebehind:

public partial class Navigation : System.Web.UI.UserControl
{
   public delegate void NavigationHandler(int ID);
    public event NavigationHandler Navigated;

    void LinkButton_Command(Object sender, CommandEventArgs e)
    {
        int ID=int.Parse(e.CommandArgument.ToString());
        Navigated(ID);
    }
}

And your page can handle this event in the following way:

protected void Page_Init(object sender, EventArgs e) {
    this.Navigation1.Navigated += UserNavigated;
}

protected void UserNavigated(int ID){
    //do whatever you need to do and then call...
    UpdatePanel1.Update();
}
Related Topic