Using MessageBox Control Outside UpdatePanel Control

Few days ago I wrote a simple demo about “Using ProudMonkey Controls with ASP.NET AJAX Update Panel”. One small problem is that if for some reasons you will place the MessageBox control outside UpdatePanel then you’ll notice that the MessageBox will not display properly in the page.

So if you were setting your html mark-up like this:

<%@ Register Assembly="AjaxControlToolkit" 
             Namespace="AjaxControlToolkit" 
             TagPrefix="asp" %>
<%@ Register Assembly="ProudMonkey.Common.Controls"
             Namespace="ProudMonkey.Common.Controls"
             Tagprefix="cc1" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <cc1:MessageBox ID="MessageBox1" runat="server"  />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server"
                            onclick="Button1_Click"
                             Text="Show Message" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

And calling the MessageBox at Button click event:

protected void Button1_Click(object sender, EventArgs e){
      MessageBox1.ShowError("Test ERROR Message!");
}

You will end up getting something like this in the page:

The reason why it happened because when you do a PostBack some of the attributes defined within MessageBox will not be loaded properly (e.g the src and style). To resolved the issue we can set up Triggers in the UpdatePanel to do postback. Here’s the sample demo below for your reference:

ASPX:

<%@ Register Assembly="AjaxControlToolkit"
             Namespace="AjaxControlToolkit" 
             TagPrefix="asp" %>
<%@ Register Assembly="ProudMonkey.Common.Controls"
             Namespace="ProudMonkey.Common.Controls"
             Tagprefix="cc1" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" >
        </asp:ToolkitScriptManager>
        <cc1:MessageBox ID="MessageBox1" runat="server"  />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server"
                            onclick="Button1_Click"
                            Text="Show Message" />
            </ContentTemplate>
           <Triggers>
                <asp:PostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel> 
    </form>
</body>
</html>

Code Behind:

protected void Button1_Click(object sender, EventArgs e){
     MessageBox1.ShowError("Test ERROR Message!");
}

Running the page will display the MessageBox properly. Here’s a sample screen shot below:

That’s it! I hope someone find this post useful.

Posted on Thursday, January 12, 2012 8:24 PM ASP.NET , ProudMonkey Controls | Back to top