Solved

ModalPopupExtender not working from code behind

Posted on 2014-03-10
14
892 Views
Last Modified: 2014-03-20
Hi all,

I have a modalpopup extender which I want to use to show any errors which occur during some ajax transitions on a ASPX page.

Now I am testing and causing it to error (so the .cs code displayed is firing).

However, the modalpopup is not appearing? Am I doing somehting wron here?

   
 <asp:ModalPopupExtender ID="ErrorModalPopupExtender" TargetControlID="btnDummy" PopupControlID="ModalPanel" runat="server" BackgroundCssClass="modal" DropShadow="true" />
    <asp:Panel ID="ModalPanel" runat="server" BackColor="Aqua">
        <asp:ErrorPopup ID="ErrorUserControl" runat="server" />
    </asp:Panel>
    <asp:Button ID="btnDummy" runat="server" Text="Button" style="display:none" />

Open in new window


                ErrorUserControl.ErrorMessage = "Error trying to load " + controlPath;
                ErrorUserControl.ErrorDump = ex.Message;
                ErrorModalPopupExtender.Show();

Open in new window

0
Comment
Question by:flynny
  • 7
  • 4
14 Comments
 
LVL 18

Assisted Solution

by:Jerry Miller
Jerry Miller earned 250 total points
ID: 39917610
I don't think that the ModalPopup has to be in an UpdatePanel, but the example that I use is in one.

<asp:UpdatePanel ID="upMBdataEntry" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
  <Triggers><asp:AsyncPostBackTrigger ControlID="btnMBdataEntryOk" EventName="Click"  /></Triggers>
    <ContentTemplate>
    <asp:Panel ID="pnlMBdataEntry" runat="server" BackColor="White" BorderColor="Black"  ScrollBars="Vertical"
  BorderStyle="Solid" BorderWidth="1" Width="90%" >
    <uc2:MBUpload runat="server" ID="ucMBdataupload" />
    <br /><br />
  <asp:Button  CssClass="button"  Text="Submit" runat="server" ID="btnMBdataEntryOk" UseSubmitBehavior="false"
  CausesValidation="true" OnClick="btnMBdataEntryOk_Click" />
  <asp:Button ID="btnMBdataEntryCancel" Text="Cancel" runat="server" CssClass="button" CausesValidation="false" OnClick="btnMBdataEntryCancel_Click" />
  <asp:Button ID="btnMBdataEntryTargetControl" Text="test" style="display:none;" runat="server" />
    <br /><br />
     
   <ajaxToolkit:ModalPopupExtender ID="mpMBdataEntry" runat="server" TargetControlID="btnMBdataEntryTargetControl" PopupControlID="pnlMBdataEntry"
   BehaviorID="UserWarningModalPopUp" BackgroundCssClass="modalBackground"/></asp:Panel>
 
  </ContentTemplate></asp:UpdatePanel>

When you step through the code, it is hitting the breakpoint in this spot?

ErrorUserControl.ErrorMessage = "Error trying to load " + controlPath;
ErrorUserControl.ErrorDump = ex.Message;
ErrorModalPopupExtender.Show();
0
 

Author Comment

by:flynny
ID: 39917619
Hi,

Thanks for the code.

The modalpopup isn't in an update panel.

However the click even i trigger the .show() from is bubbling an event from an ascx page.

I have breakpoint setup so the .show() is firing, its just that the popup is not appearing?

am I doing something wrong there?
0
 
LVL 18

Expert Comment

by:Jerry Miller
ID: 39917649
The only thing that I see different in my code from yours beside the UpdatePanel is that my TargetControl button is within the panel (ModalPanel) for the pop-up and yours is not. Though I am not sure that would make a difference.
0
 

Author Comment

by:flynny
ID: 39917755
Just tried adding it inside the ModalPanel and this has made no difference.

Any ideas?
0
 

Author Comment

by:flynny
ID: 39917836
I wonder whether or not it is because I am running the server code through AJAX and not initiating a full refresh of the page..

The user fills in a form (held in n ascx file).

The form is held inside an update panel. When the user submits the form, it inserts to the DB, sends an email and loads the next ascx page in the update panel.

Now because the page itself is not being refreshed, I thought it maybe because the page is not being refreshed. So I tried adding to the update panel itself.

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate> 
            <asp:PlaceHolder ID="PlaceHolderPageContent" runat="server"></asp:PlaceHolder>

            <asp:Panel ID="ModalPanel" runat="server" BackColor="Aqua">
            </asp:Panel>
        </ContentTemplate>

    </asp:UpdatePanel>

Open in new window


        if (File.Exists(BASE_PATH + nextPage))
        {
            LastLoadedControl = BASE_PATH + nextPage;
            LoadUserControl();
        }
        else
        {
            usercontrols_ErrorPopup ErrorUserControl = new usercontrols_ErrorPopup();
            ErrorUserControl.ErrorMessage = "Error trying to load " + nextPage;
            ModalPanel.Controls.Add(ErrorUserControl);
            ModalPanel.Visible = true;
        }

Open in new window


however this does not work either?
0
 
LVL 18

Expert Comment

by:Jerry Miller
ID: 39918077
My user control does not have an UpdatePanel in it. I am doing something similar in mine. I have a pop-up user control where the user enters data and it loads into a database.

Are you loading the next control inside the previous one or the original page?

I would use the UpdatePanel on the main page and load / unload the controls within it, if that is possible.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:flynny
ID: 39919880
Hi thanks for the reply.

In my .ASPX file I have my Update panel. I also have the modalpopup in the ASPX.

The update panel loads the relevent user control.

When a click of a button is detected I bubble the event back to the ASPX page to process.

So the click event is fired in the ASCX usercontrol, bubbles the event back (once all processes have ben completed) and passes the next usercontrol to load.

As this point if an error is detected I want to invoke the modalpopup which uses an error.ascx usercontrol to display the error.
0
 
LVL 18

Expert Comment

by:Jerry Miller
ID: 39920383
I do not see anything that you are doing wrong. I am going to request attention on this question and see if we can get someone else involved that will see what we are missing.
0
 
LVL 26

Accepted Solution

by:
Alan Warren earned 250 total points
ID: 39928599
Hi flynny,

Not sure about the user control, which appears to be some sort of upload functionality, possibly ajax asynchronous file upload.

Try moving <uc2:MBUpload runat="server" ID="ucMBdataupload" /> outside of the update panel, then on upload complete you can force a databind on the update panel if need be.

upMBdataEntry.databind()

It would nice if that did the trick, but if not ...

Are the events of the controls in your user control exposed to the local page in which the user control is instantiated?

Here's a small user control that exposes some additional custom properties for a hyperlink
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="hyperlink.ascx.vb" Inherits="_hyperlink" %>
<asp:HyperLink 
    ID="HyperLink1" 
    runat="server" 
    Text="" 
    NavigateUrl="~/"
    ImageUrl="" 
    ></asp:HyperLink>

Open in new window

And the code behind (VB)
Imports System.ComponentModel


Partial Class _hyperlink

    Inherits System.Web.UI.UserControl

    Private mstrRel As String = ""
    Private mstrRev As String = ""
    Private mstrOnClick As String = ""

    ' ----------------------------------------------
    ' Inherited Properties
    ' ----------------------------------------------
    <BindableAttribute(True)> _
    Public Property Text() As String
        Get
            Return HyperLink1.Text
        End Get
        Set(ByVal value As String)
            HyperLink1.Text = value
        End Set
    End Property


    <BindableAttribute(True)> _
    Public Property NavigateUrl() As String
        Get
            Return HyperLink1.NavigateUrl
        End Get
        Set(ByVal value As String)
            HyperLink1.NavigateUrl = value
        End Set
    End Property


    <BindableAttribute(True)> _
    Public Property ImageUrl() As String
        Get
            Return HyperLink1.ImageUrl
        End Get
        Set(ByVal value As String)
            HyperLink1.ImageUrl = value
        End Set
    End Property


    <BindableAttribute(True)> _
    Public Property ToolTip() As String

        Get
            Return HyperLink1.ToolTip
        End Get
        Set(ByVal value As String)
            HyperLink1.ToolTip = value
        End Set
    End Property


    <BindableAttribute(True)> _
    Public Property Target() As String
        Get
            Return HyperLink1.Target
        End Get
        Set(ByVal value As String)
            HyperLink1.Target = value
        End Set
    End Property


    <BindableAttribute(True)> _
    Public Property CssClass() As String
        Get
            Return HyperLink1.CssClass
        End Get
        Set(ByVal value As String)
            HyperLink1.CssClass = value
        End Set
    End Property


    <ThemeableAttribute(False)> _
    Public Property BackColor() As System.Drawing.Color
        Get
            Return HyperLink1.BackColor
        End Get
        Set(ByVal Value As System.Drawing.Color)
            HyperLink1.BackColor = Value
        End Set
    End Property


    <ThemeableAttribute(False)> _
    Public Property ForeColor() As System.Drawing.Color
        Get
            Return HyperLink1.ForeColor
        End Get
        Set(ByVal Value As System.Drawing.Color)
            HyperLink1.ForeColor = Value
        End Set
    End Property


    <BindableAttribute(False)> _
    Public Property Bold() As Boolean
        Get
            Return HyperLink1.Font.Bold
        End Get
        Set(ByVal Value As Boolean)
            HyperLink1.Font.Bold = Value
        End Set
    End Property


    ' ----------------------------------------------
    ' Custom properties
    ' ----------------------------------------------
    <BindableAttribute(True)> _
    <Description("Sets or returns the relationship between the current document and the target URL")> _
    <developer("Alan Warren", "1")> _
    Public Property rel() As String
        Get
            Return mstrRel
        End Get
        Set(ByVal value As String)
            mstrRel = value
        End Set
    End Property


    <BindableAttribute(True)> _
    <Description("Sets or returns the relationship between the target URL and the current document")> _
    <developer("Alan Warren", "1")> _
    Public Property rev() As String
        Get
            Return mstrRev
        End Get
        Set(ByVal value As String)
            mstrRev = value
        End Set
    End Property


    <BindableAttribute(True)> _
    <Description("Sets or returns the OnClick event for this control. Insert inline javascript here.")> _
    <developer("Alan Warren", "1")> _
    Public Property onclick() As String
        ' Set the onclick event to run some javascript: 
        ' eg... "javascript:return hs.expand(this)"
        Get
            Return mstrOnClick
        End Get
        Set(ByVal value As String)
            mstrOnClick = value
        End Set
    End Property


    ' ----------------------------------------------
    ' Protected Events
    ' ----------------------------------------------
    Protected Sub HyperLink1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles HyperLink1.Load

        On Error GoTo ReportError

        Dim strErrMsg As String = ""

        Me.HyperLink1.Attributes.Add("rel", mstrRel)

        Me.HyperLink1.Attributes.Add("rev", mstrRev)

        Me.HyperLink1.Attributes.Add("onclick", mstrOnClick)


ExitProcedure:
        On Error Resume Next
        Exit Sub

ReportError:

        strErrMsg = "Error in ~/controls/hyperlink.ascx.vb_HyperLink1_Load()" _
          & vbCr & "Error number " & CStr(Err.Number) _
          & " was generated by " & Err.Source _
          & vbCr & vbCr & Err.Description


        Resume ExitProcedure

    End Sub


End Class

Open in new window

It's an old bit of code, not used it for some time, but that's how I got around exposing the events of a user control and the controls within it.

Respectfully yours,
Alan
0
 

Author Comment

by:flynny
ID: 39936595
Hi Alan,

First of all thank you for looking at this.

I think you were looking at the code which jmiller supplied, as the usercontrol is a simple text page.

Ok, One think with the modalpopupextender I can see (from firebug) is that the page will always present. As this is a Error popup I was hoping to only add this if an error were to be detected.

Therefore would it not make more sense to do the following (please tell me if i am wrong).

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate> 
            <asp:PlaceHolder ID="PlaceHolderPageContent" runat="server"></asp:PlaceHolder>

            <asp:Panel ID="ModalPanel" runat="server" BackColor="Aqua" Visible="false">
            </asp:Panel>

        </ContentTemplate>

    </asp:UpdatePanel>

Open in new window


As the panel does not appear in the HTML at run time.

Then when the AJAX update is called do the following;

usercontrols_ErrorPopup ErrorUserControl = new usercontrols_ErrorPopup() { ErrorMessage = "Error trying to load " + nextPage };
            ModalPanel.Controls.Add(ErrorUserControl);
            ModalPanel.Visible = true;
            ModalPanel.CssClass = "modal";
            UpdatePanel1.Update();

Open in new window


Which would load and appeand to the panel and then only add the usercontrol if needed.

However, I have tried this and the control doesnt appear?? As it is not a full postback (due to the fact it is an AJAX call) could this be the issue? If so how do I work around it?
0
 

Author Comment

by:flynny
ID: 39936827
Hi Guys,

I've located the problem. It was due tot he way I was loading the control to the panel. For completion heres the working code

            usercontrols_ErrorPopup ErrorUserControl = (usercontrols_ErrorPopup)Page.LoadControl("~/usercontrols/ErrorPopup.ascx");
            ErrorUserControl.ErrorMessage = "Error trying to load " + nextPage;

Open in new window


its been a long day, sorry I should have seen this :)
0
 

Author Closing Comment

by:flynny
ID: 39941791
Thanks for the help and responses guys.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now