locked
ModalPopupExtender called from UpdatePanel problem RRS feed

  • Question

  • User-1015656934 posted

    Hello.

    I'm having problem with calling modalPopupExtender control from updatePanel control.

    I have modal popup extender as a custom control MessageBox, which I can register on any webform or usercontrol, then call it from code behind any time I need and I also can put events on buttons on this MessageBox, which are handled on the webfrom/control, from which Im calling the messagebox.

    MessageBox.ascx

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="MessageBox.ascx.cs" Inherits="Controls_MessageBox_MessageBox" %>
    
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
        TargetControlID="Panel1"
        PopupControlID="Panel1"
        BackgroundCssClass="modalBackground"
        DropShadow="true" />
    
    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display: none;" Width="400px" DefaultButton="SeButton">
        <asp:Label ID="lblTitle" runat="server" CssClass="modalPopupTitle" style="font-family: Verdana; font-size: 15px; font-weight: bold;" Width="100%" Text="<% $ Resources:SystemMessage, String1 %>"></asp:Label>
        <br /><br />
        <asp:Table ID="tblTextArea" runat="server" Width="100%">
            <asp:TableRow >
                <asp:TableCell Width="34px" Height="32px">
                    <asp:Image ID="imgMessage" runat="server" Width="32px" Height="32px" />
                </asp:TableCell>
                <asp:TableCell Height="32px">
                    <asp:Panel ID="pnlMessage" runat="server" Width="350px">
                        <asp:Label ID="lblMessage" runat="server" style="font-family: Verdana; font-size: 14px;" CssClass="modalPopupText"></asp:Label>
                    </asp:Panel>
                </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow>
                <asp:TableCell ColumnSpan="2">
                    &nbsp;
                </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow HorizontalAlign="Center">
                <asp:TableCell ColumnSpan="2">
                    <asp:Button ID="aButton" runat="server" Text="aButton" OnClick="aButton_Click" Width="90px" />                
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </asp:Panel>
    
    <script type="text/javascript">
        function fnClickA(sender, e) {
            __doPostBack(sender, e);
        }
    </script>

    MessageBox.ascx.cs

    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;
    
    public partial class Controls_MessageBox_MessageBox : System.Web.UI.UserControl
    {
        #region system_methods
    
        protected void Page_Load(object sender, EventArgs e)
        {
            aButton.OnClientClick = String.Format("fnClickA('{0}','{1}')", aButton.UniqueID, "");
        }
    
        public void aButton_Click(object sender, EventArgs e)
        {
            OnaButtonPressed(e);
        }
    
        #endregion
    
        #region user_methods
    
        /// <summary>
        /// Show message on modal dialog.
        /// </summary>
        /// <param name="Message">Set string to show on dialog.</param>
        /// <param name="ImagePath">Set image path using GetPathOfMBImage from GlobalConstants class.</param>
        public void ShowMessage(String Message, String ImagePath)
        {
            lblMessage.Text = Message;
            imgMessage.ImageUrl = ImagePath;
            SetHeight(Message);
            ModalPopupExtender1.Show();
        }
    
        /// <summary>
        /// Set panel height and show/hide vertical scroolbar.
        /// </summary>
        /// <param name="Message">String to show on dialog.</param>
        private void SetHeight(String Message)
        {
            if (Message.Length > 700)
            {
                pnlMessage.Height = 420;
                pnlMessage.ScrollBars = ScrollBars.Vertical;
            }
            else
            {
                pnlMessage.ScrollBars = ScrollBars.None;
            }
        }
    
        /// <summary>
        /// Hide modal dialog and clear all text on it.
        /// </summary>
        public void HideMB()
        {
            lblMessage.Text = String.Empty;
            ModalPopupExtender1.Hide();
        }
    
        #endregion
    
        #region custom_event
    
        public delegate void aButtonPressedHandler(object sender, EventArgs args);
        public event aButtonPressedHandler aButtonPressed;
        protected virtual void OnaButtonPressed(EventArgs e)
        {
            if (aButtonPressed != null)
                aButtonPressed(VujeButton, e);
        }
    
        #endregion
    }

    The problem is, that I have a main page, which has a page control on it. Every sub-page on this page control is a custom user control. On one of this custom user control I'm calling this message box from code behind. I tried to putting this whole pagecontrol inside of Update panel, to not causing page refreshes everytime. But when I do, Im able to call MessageBox control isntance, but they appear not responding to the button events on them.

    Example of calling the message box from the control:

    customControl.ascx

    <%@ Register Src="~/Controls/MessageBox/MessageBox.ascx" TagName="OkMessageBox" TagPrefix="un" %>
    
    ... other code ...
    
    <un:OkMessageBox ID="okMB" runat="server" Visible="false" />

    customControl.ascx.cs

    ... some code ...
    
    protected void Page_Load(object sender, EventArgs e)
        {
            okMB.aButtonPressed += new Controls_MessageBox_MessageBox_aButtonPressedHandler.aButtonPressedHandler(okMB_aButtonPressed);
    
    ... other code ....
    }
    
    ... other code ...
    
    some method
    {
    okMB.Visible = true;
            okMB.ShowMessage("Text", "Path to img");
    
    }
    
    ... other code ....
    
    void okMB_aButtonPressed(object sender, EventArgs args)
        {
            ... some code ...
        }
    

    mainpage.aspx

    (script manager is on master page for thsi main page)
    
    ... some code ...
    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
    
    ... page control with custom control on every sub-page ....
    
    
        </ContentTemplate>
    </asp:UpdatePanel>
    
    ... other code ...
    
    
    

    The problem is, that the messagebox appears, but the button aButton event is not fired and no postback is done and whole page is practically dead and not responsive.

    Please, is there some workaround ?

    Or is it posible, to have this messagebox control and use it somehow FROM a UpdatePanel ?

    ( I was editing our existing code and left only one button there and renamed it to 'aButton', so if there are some typing errors, its not relevant).

    I'm thankfull for every suggestion.

    Thursday, January 28, 2016 8:28 AM

Answers

  • User61956409 posted

    Hi Lukino,

    The following simple sample works fine on my side, please refer to it.

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnshow" runat="server" Text="Show Modal" OnClick="btnshow_Click" />
            <uc1:myuc runat="server" ID="myuc" />
        </ContentTemplate>
    </asp:UpdatePanel>
    
    protected void btnshow_Click(object sender, EventArgs e)
    {
        ((ModalPopupExtender)myuc.FindControl("ModalPopupExtender1")).Show();
    }
    

    User Control

    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Panel1" PopupControlID="Panel1"></asp:ModalPopupExtender>
    <asp:Panel ID="Panel1" runat="server">
        Modal Content
                            <br />
        <asp:Button ID="aButton" runat="server" Text="aButton" OnClick="aButton_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </asp:Panel>
    
    <script>
        function fnClickA(sender, e) {
            __doPostBack(sender, e);
        }
    </script>
    
    protected void Page_Load(object sender, EventArgs e)
    {
        aButton.OnClientClick = String.Format("fnClickA('{0}','{1}')", aButton.UniqueID, "");
    }
    
    protected void aButton_Click(object sender, EventArgs e)
    {
        Label1.Text = "hello";
    }
    

    Best Regards,

    Fei Han






    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 29, 2016 4:00 AM

All replies

  • User61956409 posted

    Hi Lukino,

    The following simple sample works fine on my side, please refer to it.

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnshow" runat="server" Text="Show Modal" OnClick="btnshow_Click" />
            <uc1:myuc runat="server" ID="myuc" />
        </ContentTemplate>
    </asp:UpdatePanel>
    
    protected void btnshow_Click(object sender, EventArgs e)
    {
        ((ModalPopupExtender)myuc.FindControl("ModalPopupExtender1")).Show();
    }
    

    User Control

    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Panel1" PopupControlID="Panel1"></asp:ModalPopupExtender>
    <asp:Panel ID="Panel1" runat="server">
        Modal Content
                            <br />
        <asp:Button ID="aButton" runat="server" Text="aButton" OnClick="aButton_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </asp:Panel>
    
    <script>
        function fnClickA(sender, e) {
            __doPostBack(sender, e);
        }
    </script>
    
    protected void Page_Load(object sender, EventArgs e)
    {
        aButton.OnClientClick = String.Format("fnClickA('{0}','{1}')", aButton.UniqueID, "");
    }
    
    protected void aButton_Click(object sender, EventArgs e)
    {
        Label1.Text = "hello";
    }
    

    Best Regards,

    Fei Han






    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 29, 2016 4:00 AM
  • User-1015656934 posted

    Hello Fei and thank you A LOT for your answer.

    I will try to duplicate it first alone as your example then adding the hierarchical structure of our own project (its fairly large so its take time to reproduce something).

    It can take me few days because of current work load, but I will surely get back to you asap. Thank you again for your time and interest in my messed up problem :)

    Friday, January 29, 2016 1:25 PM