Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

ModalPopupExtender to Show a MessageBox

0.00/5 (No votes)
18 Sep 2009 1  
ModalPopupExtender to show a custom MessageBox using AJAX.

Introduction

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 tasks.

Using the Code

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 replaces only certain regions of your webpage. If that region isn't in the visible region 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 AJAX Control Toolkit is perfectly suited. The ModalPopupExtender won't allow the user to click anywhere else except the panel inside itself, where we could place a button which hides the modal popup.

User Control Code

<%@ 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" />
                <asp:Button ID="btnOk1" runat="server" 
                   Text="Ok1" OnClick="btnOk1_Click" 
                   Visible="false" />
            </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 User Control, which then 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 two separate definitions for ShowMessage() I hear you asking. Well ... I've created this control to display a simple message with or without a caption (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"/>

Images

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

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

The server side code needed to run the top 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("Test ", "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>

Points of Interest

I hope you had fun reading this post and that it is useful for your application. If anybody is interested in a message box with some other functionality (like OK, Cancel with convenient events which I think would be alot 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.

This way, you can put all your ASP controls inside a User Control, and I have tried it with grids, images, buttons, text controls, and also with database operations... if you need more help, please let me know by mail or write comments on it. Here is my email ID: patelarpank@gmail.com.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here