ModalPopupExtender to show a MessageBox

by Arnold Matusz 10 1 2009

Using Ajax in a web application makes a better user experience and if used well, it even improves performance! But it's not all advantages. With the change of a technology, of an approach we need to adjust our way of thinking and the way we apply our solutions for different task.

This might be a bit abstract, so I'll get specific about what I mean. As often met, when you click certain controls on a webpage, you expect to see an outcome, a result or a message as a response to your "request". What Ajax does is ... it replace only certain regions of your webpage. If that region isn't in the visible in the current scroll position of your page in the browser, you won't see the effect.

As an example: you have data in a gridview that spans over several page lengths, with a button at each row which when pressed displays some information about that row. Everything seems logical, except, where should I display the data so that the user won't need to scroll back and forth to see the actual result of the command.

To display a simple message to the user the ModalPopupExtender from the AjaxControlToolkit is perfectly suited. The ModalPopupExtender won't allow the user to click anywhere else except the Panel inside itself, where we could place an Button which hides the modal popup.

My idea is to implement this as a web user control which then is reusable on every page of your website.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="OKMessageBox.ascx.cs"
    Inherits="UserControls_OKMessageBox" %>
<ajax:ModalPopupExtender ID="mpext" runat="server" BackgroundCssClass="modalBackground"
    TargetControlID="pnlPopup" PopupControlID="pnlPopup">
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none;"
    DefaultButton="btnOk">
    <table width="100%">
        <tr class="topHandle">
            <td colspan="2" align="left" runat="server" id="tdCaption">
                <asp:Label ID="lblCaption" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td style="width: 60px" valign="middle" align="center">
                <asp:Image ID="imgInfo" runat="server" ImageUrl="/Images/Info-48x48.png" />
            </td>
            <td valign="middle" align="left">
                <asp:Label ID="lblMessage" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <asp:Button ID="btnOk" runat="server" Text="Ok" OnClick="btnOk_Click" />
            </td>
        </tr>
    </table>
</asp:Panel>

<script type="text/javascript">
        function fnClickOK(sender, e)
        {
            __doPostBack(sender,e);
        }
</script>

The fnClickOk javascript function will force the btnOk button to post back. (to actually achieve this we need to add a little piece of code in the Page_Load method of the user control.

    protected void Page_Load(object sender, EventArgs e)
    {
        btnOk.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnOk.UniqueID, "");
    }

This control works in a similar way to the Windows Forms MessageBox, I.E. you'll need to call a Show() method on the usercontrol with then in term will handle the logic to display the message as a "MessageBox". Here's the code to achieve this:

    public void ShowMessage(string Message)
    {
        lblMessage.Text = Message;
        lblCaption.Text = "";
        tdCaption.Visible = false;
        mpext.Show();
    }

    public void ShowMessage(string Message, string Caption)
    {
        lblMessage.Text = Message;
        lblCaption.Text = Caption;
        tdCaption.Visible = true;
        mpext.Show();
    }

    private void Hide()
    {
        lblMessage.Text = "";
        lblCaption.Text = "";
        mpext.Hide();
    }

Why are there 2 separate definitions for ShowMessage() I hear you asking, well ... I've created this control to display a simple message with or without a (similar to the windows forms approach).

I've also added an event model so that the event can be handled on any page when the user actually clicks the Ok button.

    public void btnOk_Click(object sender, EventArgs e)
    {
        OnOkButtonPressed(e);
    }

    public delegate void OkButtonPressedHandler(object sender, EventArgs args);
    public event OkButtonPressedHandler OkButtonPressed;
    protected virtual void OnOkButtonPressed(EventArgs e)
    {
        if (OkButtonPressed != null)
            OkButtonPressed(btnOk, e);
    }

To directly use this user control on any page on your website, you can register the control in your web.config file by adding the following inside the "controls" section of "pages" (in system.web).

    <add tagPrefix="uc" src="~/UserControls/OkMessageBox.ascx" tagName="OkMessageBox"/>

Here are some screenshots so you can see how it works.

ModalPopupExtender MessageBox

This is the simple messagebox without any caption! The following example demonstrates a long message text (and also includes a caption.

mpext2

The server side code needed to run the upper application is:

    protected void Page_Load(object sender, EventArgs e)
    {
        omb.OkButtonPressed += 
            new UserControls_OKMessageBox.OkButtonPressedHandler(omb_OkButtonPressed);
    }

    void omb_OkButtonPressed(object sender, EventArgs args)
    {
        lblStatus.Text = "Ok button pressed at: " + DateTime.Now.ToLongTimeString();
    }

    protected void btnFireOkMessage_Click(object sender, EventArgs e)
    {
        omb.ShowMessage(DateTime.Now.ToLongTimeString());
    }

    protected void btnFireOkMessageWithCaption_Click(object sender, EventArgs e)
    {
        omb.ShowMessage("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue urna in enim. 
Nulla fringilla sem sed odio. In convallis elementum pede. Donec aliquam malesuada
mauris. Morbi facilisis dui quis dolor.", "Message at: " + DateTime.Now.ToShortTimeString()); }

The needed server side markup is the following:

    <asp:UpdatePanel ID="upPnlPage" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnFireOkMessage" runat="server" OnClick="btnFireOkMessage_Click"
                Text="Show current server time" />
            <asp:Button ID="btnFireOkMessageWithCaption" runat="server" 
                Text="Show current server date with caption" 
                onclick="btnFireOkMessageWithCaption_Click" />
                <asp:Label ID="lblStatus" runat="server"></asp:Label>
            <uc:OkMessageBox ID="omb" runat="server" />            
        </ContentTemplate>
    </asp:UpdatePanel>

I hope you had fun reading this post and that is useful for your application. If anybody is interested in a messagebox with some other functionality (like Ok, Cancel with the convenient events which I think would be allot easier to use than the standard ConfirmButtonExtender) I'll gladly write another control for that, but anyway I would like to see what the public reaction is to my idea.

Download the source code and tell me what you think. OkMessageBox-2008.zip (.NET 3.5 SP1), OkMessageBox-2005.zip (.NET 2.0)

DZone it Digg it Submit to StumbleUpon Submit to Technorati Submit to reddit.com Submit to del.icio.us Submit to NewsVine Submit to Furl Submit to BlinkList

Tags: , , , ,

.NET | AJAX | ASP.NET | C# | Programming

Comments

1/10/2009 4:39:56 PM #

trackback

Trackback from DotNetKicks.com

ModalPopupExtender to show a MessageBox

DotNetKicks.com |

1/10/2009 4:59:50 PM #

trackback

Trackback from Web Development Community

ModalPopupExtender to show a MessageBox

Web Development Community |

3/2/2009 4:49:24 PM #

Danushka

Hi,
Is is possible to send a value back to the parent window using this techniqe. I used this method to show a gridview and I wanted to do is when a user select a value send it back to the parent window.

Danushka |

3/2/2009 7:00:09 PM #

Arnold Matusz

Hi,
Is is possible to send a value back to the parent window using this techniqe. I used this method to show a gridview and I wanted to do is when a user select a value send it back to the parent window.


Hi,

Using the ModalPopupExtender technique you can definitely pass back values to the calling window. You'll need to think about a way on how to achieve this.

But if you ask me if you can pass back some values with this "Showing a MessageBox with the ModalPopupExtender" to the calling window: THE ANSWER IS NO. The simple reason is that you don't capture any information on the modal popup. You only need to press the OK button to make it dissapear (and this will also fire an event if you have a handler for it, so you'll know that the user pressed the OK button).

If you wish you can contact me, so I see what you are exactly looking after, maybe I'll be able to help.

Arnold Matusz Romania |

5/9/2009 3:28:50 AM #

tzeni botsi

Very nice control indeed.
How would I programmatically call it from code behind without adding it to aspx?

VB.net
Can i write???
Dim omb as new OKMessageBox
omb.ShowMessage(...)

tzeni botsi Greece |

5/10/2009 9:53:26 PM #

Arnold Matusz

Hi

You can't instantiate a UserControl like that. This would only instanciate the code-behind without taking the actual markup from the ascx file into considerations.

But if you would like to use this from code-behind you could easily use the LoadControl() Method.

Hope this helps!

Arnold Matusz Romania |

6/12/2009 1:58:18 AM #

Neeraj Dayal

Excellent code. I was just looking for this.

Thanks Arnold for this awesome code.

Regards
Neeraj

Neeraj Dayal India |

6/30/2009 8:25:47 PM #

Chou

Thanks a lot Arnold, for this awesome post, it's help me a lot , but i have one issue:

i want to close the extender without post back.

Can u advice me...

Chou Qatar |

6/30/2009 8:57:53 PM #

Arnold Matusz

Hi Chou

I've sent you an email with a project where the usercontrol doesn't fire any postback.

Hope you like it.

Arnold Matusz Romania |

7/17/2009 5:34:15 AM #

prax79

tks for yuour great controll.... I'm going to use it in my current project.


Great control, and nice code...

prax79 Guatemala |

7/22/2009 3:39:37 AM #

María Paz

Thanks for this post. It's was very helpfull for me.

María Paz Chile |

8/11/2009 10:19:11 PM #

Palypower

This code is great for programmers new to ASP.NET.  I am grateful for your willingness to share it amounst the community.  Its going into my project to replace a less worthy approach.  Thanks

Palypower United Kingdom |

8/11/2009 10:50:50 PM #

Arnold Matusz

Hi Paly

Thanks allot for your comment. It's always very nice to receive such good feedback, it gives on more ambition to continue coming up with new stories to write about.

Have fun coding.

Arnold Matusz Romania |

12/8/2009 1:22:11 AM #

Roberto

Arnold, Thanks for your contribution! This control is very helpfull.

Roberto Costa Rica |

6/9/2010 2:59:34 PM #

pingback

Pingback from daxnet.wordpress.com

Pass Value from Modal Popup to Parent Page « Learning

daxnet.wordpress.com |