ASP.Net C# MessageBox

• Download CSharp_ASPMessageBox.zip - 9.13 KB
• Download the latest version here - www.cy2online.net

Website With MessageBox Interface

Introduction

In my last two articles titled "Creating A Custom Message Box", I described how to create a simple message box which could be used in desktop applications. In this article I will explain how to create a message box class in c# to use in web applications.

Background

Any web developer will tell you, if you want to display a message box to a user of a web application, you need to use the JavaScript alert() or the confirm() functions and these functions are great for displaying simple messages and getting responses. But they lack in many areas such as not being able to add different icons or buttons and visually they are not great to look at.

Solution

If you want a message box that looks good and you can add your own buttons as well as your own icons, then your only solution is to do it your self. But don't panic, its really not that difficult. By using a combination of JavaScript and CSS, you can create a message box which your users can response to.

Solution Explained

Page Dimmer
The first thing that you will need to do is make the page content unaccessible, by this I mean once your message box is displayed, your user will not be able to click on any navigations links on your page without acknowledging the message box. This is where the page dimmer comes in. The page dimmer is simply a div element with a fixed position. What this does is place a div element over your page content. If you were to set the background color of the div, then your page content will no longer be visible.

After placing the div on the page with a fixed position and assuming you have set a background color for the div, your page content will no longer be viewable, because they are placed behind the div as mentioned.

Rather than making the page go white or what ever color when the message box is shown, it would be nice if the background was semi transparent so that you can at least see the page content. If your not quite sure about what I mean by this, take a look at the screen shots above. Notice that the background is semi transparent and the page content is still viewable. This gives the impression that the page is dimmed. Thus the name Page Dimmer. Listing 1.1 below is a sample CSS code, which demonstrates how to make a div semi transparent with a fixed position. Note that the background of the page is set to black, with a transparency of 50, which is set as the opacity. If you test the code below, you will not get a sense that the div is partially transparent. It will just appear as though the page is grey. But bare with me, you will get the full effect when you get to turn the page dimmer on and off.

Listing 1.1

.page_dimmer 
{ 
position:fixed; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
background-color:#000000; 
filter:alpha(opacity=50); 
-moz-opacity:.50; 
opacity:.50; 
z-index:50; 
} 

Message Box
After creating a page dimmer, it's time to create the actual message box. The message box will consist of the title, message and OK button. The inner message box structure needs to be placed in a div. So you can design the layout of the message box however you like. Once you have designed and coded the inner message box structure such as where the title, message and OK button will appear, you need to place the code inside a div. This div needs to be centered on the screen and also fixed. It needs to be fixed so that if your page has scrollbars and the user scrolls down, then the message box should still appear in the same place, but the rest of the page content, which is displaying behind the page dimmer div should scroll up or down.

To position the div in the center of the screen, I used the CSS top, left and right properties with a percentage, this is not really centering the div, it just gives the illusion that the div is centered horizontally. The code for the message box CSS is listed below in Listing 1.2.

Listing 1.2

.msg_box_container 
{ 
position:fixed; 
background-color:#888888; 
border:1px solid #999999; 
z-index:50; 
left:20%; 
right:20%; 
top:20%; 
} 

Putting It All Together
At this point I should mentioned that the message box div should not be nested within the page dimmer div. The reason for this is because the page dimmer is semi transparent and anything placed inside the page dimmer div will also appear transparent. Listing 1.3 below shows the complete CSS and HTML for the message box.

Listing 1.3

<style> 
.page_dimmer 
{ 
position:fixed; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
background-color:#000000; 
filter:alpha(opacity=50); 
-moz-opacity:.50; 
opacity:.50; 
z-index:50; 
} 


.msg_box_container 
{ 
position:fixed; 
background-color:#888888; 
border:1px solid #999999; 
z-index:50; 
left:20%; 
right:20%; 
top:20%;" 
} 

</style> 

<div class="page_dimmer" id="pagedimmer"> </div> 
<div class="msg_box_container" id="msgbox"> 
<table width="100%"> 
<tr> 
<td colspan="2">[TITLE]</td> 
</tr> 
<tr> 
<td>[ICON]</td> 
<td>[MESSAGE]</td> 
</tr> 
<tr> 
<td colspan="2"><input type="Button" value="OK"></td> 
</tr> 
</table> 
</div> 

Save the above code and place some content just under the message box div.

The Code
Its now time to take a look at the scripting behind the OK button, which will be used to close the message box and remove the page dimmer. Before I present the JavaScript code, take a look at the code in listing 1.3 again. Take note, that both the page dimmer and message box div have an ID attribute. This is very important, as we will be using JavaScript DOM to get the div reference so that we can turn the visibility of the page dimmer and the message box div on and off. Listing 1.4 below show how to get a reference to the page dimmer and message box div (The Objects) by using the DOM getElementById() method.

Listing 1.4

document.getElementById('page_dimmer') 
document.getElementById('msgbox') 

The above code is fairly simple and doesn't actually do anything. The code below in listing 1.5 however shows how to set the visibility of each div to hidden.

Listing 1.5

document.getElementById('pagedimmer').style.visibility = 'hidden' 
document.getElementById('msgbox').style.visibility = 'hidden' 

Now that we have the code to set both divs to be hidden, its time to put all the code together, that is CSS, HTML and JavaScript. Listing 1.6 below is the complete code for the message box. You can save it and test the OK button.

Listing 1.6

<style> 
.page_dimmer 
{ 
position:fixed; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
background-color:#000000; 
filter:alpha(opacity=50); 
-moz-opacity:.50; 
opacity:.50; 
z-index:50; 
} 


.msg_box_container 
{ 
position:fixed; 
background-color:#888888; 
border:1px solid #999999; 
z-index:50; 
left:20%; 
right:20%; 
top:20%;" 
} 

</style> 

<div class="page_dimmer" id="pagedimmer"> </div> 
<div class="msg_box_container" id="msgbox"> 
<table width="100%"> 
<tr> 
<td colspan="2">[TITLE]</td> 
</tr> 
<tr> 
<td>[ICON]</td> 
<td>[MESSAGE]</td> 
</tr> 
<tr> 
<td colspan="2"><input type="Button" value="OK" 
   onClick="document.getElementById('pagedimmer').style.visibility = 'hidden'; 
          document.getElementById('msgbox').style.visibility = 'hidden'"></td> 
</tr> 
</table> 
</div> 

Notice the OnClick event in the input tag?

ASP.Net C# Custom Message Box
It is now time to develop a reusable message box class. Now that we know how to set up a message box, we can easily begin to develop a custom C# class to do away with all the hassle of having to write the code every time we want to use it. At this point many of you might have some ideas of how to develop the class your self. But rather than shooting off to write the code, stick around and read a little more.

The approach I have taken to develop the message box class is quite simple. The class consists of six public methods one of which returns a string. They are as follows:

public void SetTitle(string msg_title) 
public void SetIcon(string msg_icon) 
public void SetMessage(string msg_message) 
public void SetOKButton(string msg_button_class) 
public void AddButton(string msg_button) 
public string ReturnObject() 

The SetTitle() method simply sets the title of the message box. The SetIcon() method sets the icon to be used for the message box. It takes a string as an argument which is the file path of the image to be used as an icon. The SetMessage() method sets the message body of the message box. The SetOKButton() actually should not be a method but rather coded in as part of the message box, this is because every message box needs a button to close it. Hover ever in order to show the OK button on the attached sample, you need to call this method. You can remove it and code the OK button in directly. This method takes one argument, which is the CSS class to apply styling to the button. Next is the AddButton() method. This method is responsible for adding additional buttons to the message box, which when clicked will navigate to other pages.

Before you can call the AddButton() method, you need to first create an instance of a MessageBoxButton Class. This class simply returns a HTML button code. You set the onClick event of the button, which is basically navigating to another page by using the SetLocation() method of the MessageBoxButton class. You then return the HTML code using the ReturnObject() method and set it as the argument for the AddButton() method. You can create as many instances of the MessageBoxButton class to keep adding buttons to the message box. All you need to do is keep using the AddButton() method, which stores all the html code for each button in an ArrayList. Finally the ReturnObject() method for the MessageBox class returns the HTML code for the message box, including the page dimmer. All CSS is inline.

Templating
Finally, rather than hard coding the structure of the message box code into the MessageBox class, I decided to create a template file, which consists of the page dimmer and message box HTML code along with inline CSS. The template file contains markers which is used to insert the title, icon, message body and buttons. This approach of using a template allows you to design your own message box layout, giving it the appearance you want. All you have to do is make sure the markers are in the template.

The Constructor of the MessageBox class takes one argument, which is the file path of the message box template. Listing 1.7 below shows the contents of the template file.

Listing 1.7

<div style="position:fixed;height:100%;width:100%;top:0px;left:0px;
    background-color:#000000;filter:alpha(opacity=55);-moz-opacity:.55;opacity:.55;z-index:50;" 
    id="pagedimmer"> </div> 
<div style="position:fixed;background-color:#888888; border:1px solid #999999; z-index:50; left:20%; 
    right:20%; top:20%;" id="msgbox"> 
<div style="margin:5px;"> 
<table width="100%" style="background-color:#FFFFFF; border:1px solid #999999;"> 
<tr> 
<td colspan="2" style="font-family:tahoma; font-size:11px; font-weight:bold; 
    padding-left:5px; background-image: url(msg_title_1.jpg); color:#FFFFFF; height:22px;">[TITLE]</td> 
</tr> 
<tr> 
<td style="width:100px; text-align:center;">[ICON]</td> 
<td style="font-family:tahoma; font-size:11px;padding-left:5px;">[MESSAGE]</td> 
</tr> 
<tr> 
<td colspan="2" style="border-top:1px solid #CCCCCC; padding-top:5px;text-align:right;">[BUTTONS]</td> 
</tr> 
</table> 
</div> 
</div> 

The markers are highlighted in bold. Notice also the CSS for both the page dimmer and message box div's are contained in style tags.

Finally Listing 1.8 and Listing 1.9 below is the code for the MessageBox and MessageBoxButton class.

Listing 1.8 - MessageBox Class

using System;
using System.Collections;
using System.Text;
using System.IO;
using System.Web;
using System.Web.UI;

public class MessageBox

{
    private string strLine;
    private StringBuilder msgbox;
    private StreamReader readtemplte;
    private string msgbox_title = "";
    private string msgbox_icon = "";
    private string msgbox_message = "";
    private string msgbox_ok_button = "";
    private string msgbox_buttons = "";
    private ArrayList msgbox_button;

    public MessageBox(string tpl_path)
    {
        readtemplte = new StreamReader(tpl_path);
        msgbox = new StringBuilder();
        msgbox_button = new ArrayList();

        while ((strLine = readtemplte.ReadLine()) != null)
        {
            msgbox.Append(strLine);
        }
    }

    public void SetTitle(string msg_title)
    {
        this.msgbox_title = msg_title;
    }

    public void SetIcon(string msg_icon)
    {
        this.msgbox_icon = "<img src=\"" + msg_icon + "\">";
    }

    public void SetMessage(string msg_message)
    {
        this.msgbox_message = msg_message;
    }

    public void SetOKButton(string msg_button_class)

    {
        this.msgbox_ok_button = "<input type=\"button\" value=\"OK\" class=\""
        + msg_button_class + 
        "\" onClick=\"document.getElementById('pagedimmer').style.visibility = 'hidden';" 
        + "document.getElementById('msgbox').style.visibility = 'hidden';\">";
    }

    public void AddButton(string msg_button)
    {
        msgbox_button.Add(msg_button);
    }

    public string ReturnObject()
    {
        int i=0;
        while (i < msgbox_button.Count)
        {
            msgbox_buttons += msgbox_button[i] + " ";
            i++;
        }

        msgbox.Replace("[TITLE]", this.msgbox_title);
        msgbox.Replace("[ICON]", this.msgbox_icon);
        msgbox.Replace("[MESSAGE]", this.msgbox_message);
        msgbox.Replace("[BUTTONS]", msgbox_buttons + this.msgbox_ok_button);

        return msgbox.ToString();
    }

}

Listing 1.9 - MessageBoxButton Class

using System;
using System.Text;
using System.Web;
using System.Web.UI;

public class MessageBoxButton
{
    private string msg_button = "";

    public MessageBoxButton(string btnValue)
    {
        msg_button = "<input type=\"button\" value=\"" + btnValue + "\"";
    }

    public void SetClass(string btnClass)
    {
        msg_button += " class=\"" + btnClass + "\"";
    }

    public void SetLocation(string btnLocation)
    {
        msg_button += " onClick=\"window.location='" + btnLocation + "'\"";
    }

    public string ReturnObject()
    {
       return msg_button += ">";
    }

}

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 26 (Total in Forum: 26) (Refresh) FirstPrevNext

Namespace compliation error for MessageBoxButton trgalan 9:38 23 Jul '09   This complies and runs successfully on my local computer but I get the error when running from my Web site. Have I not added a namespace? Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. Compiler Error Message: CS0246: The type or namespace name 'MessageBoxButton' could not be found (are you missing a using directive or an assembly reference?) Source Error: Line 17: protected void Page_Load(object sender, EventArgs e) Line 18: { Line 19: MessageBoxButton btn1 = new MessageBoxButton("Google"); Line 20: btn1.SetLocation("http://www.google.com"); Line 21: btn1.SetClass("msg_button_class"); tr Sign In·View Thread·PermaLink XML Document cannot have multiple root level elements Marlin7 11:40 10 Jul '09   The tpl file is blocking the build/debug with the message in the subject line. Any tips to get around that? Marlin 7 Sign In·View Thread·PermaLink IsPostBack issue? belaqua84 13:47 22 May '09   Hi, I love this article, it is exactly the sort of thing I was looking to do. I'm having a problem with implementation though. I want to use this in an online application, and on the final page I intend to ask the client if they're sure they want to submit. However, there are no actions on our submit button, within Page_Load we check to see if Page.IsPostBack, and if it is send the user info to the DB. I tried adding submit_Onclick, but I think the PostBack is run first and you get sent to the next page before you reach submit_Onclick. So I tried moving if (Page.IsPostBack) within submit_Onlick but understandably an error was thrown. I am afraid that your nifty thing may just not work for me, but before I give up I was curious if you had any suggestions? Thanks! Sign In·View Thread·PermaLink in IE 6 its not working. Member 4551527 3:25 10 Feb '09   Can have any updates for IE6? Sign In·View Thread·PermaLink Buttons in pop up not working VLathi 17:04 29 Jan '09   HI, The pop up works great but the buttons , that is, Google , MSN and OK don't do anything. How can we capture which button user has clicked ? Thanks. Sign In·View Thread·PermaLink Re: Buttons in pop up not working Syed M Hussain 23:28 29 Jan '09   Hi VLathi Make sure you have javascript enabled on your browser. To find out which button was clicked, you will need to edit the onclick function to return the id of the button instead of navigating to a webpage. To to this you will need to give each button an id, this can be done in the messageboxbutton class. Hope that makes sense. www.cy2online.net Sign In·View Thread·PermaLink Re: Buttons in pop up not working VLathi 4:51 30 Jan '09   Hi, Do you mean add id to this method in messagebox class and then do something to capture that ID in onClick ? Can you give more details please or help with 1 sample addition to the code. I have added the message box seccessfully but cannot use unless I can have these buttons work. Thanks. public void SetOKButton(string msg_button_class) { this.msgbox_ok_button = "<input type=\"button\" value=\"OK\" class=\"" + msg_button_class + "\" onClick=\"document.getElementById('pagedimmer').style.visibility = 'hidden'; document.getElementById('msgbox').style.visibility = 'hidden';\">"; } Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: Buttons in pop up not working Syed M Hussain 7:51 30 Jan '09   Hi Modify the constructor to this. public MessageBoxButton(string btnValue, btnId)       {             msg_button = "<input type=\"button\" value=\"" + btnValue + "\" onclick=\"ButtonClick('" + btnId + "')\" ";       } Now create a javascript function ButtonClick function ButtonClick(btnid){ alert(btnid); } Let me know if this helps. Sign In·View Thread·PermaLink Not working in Internet Explorer 6.0 balajinadipilli 20:50 12 May '08   Hi.. Ur code is working fine in IE 7.0, but in IE 6.0 I have a problem. page dimmer is applied only at the top of the page. please help me out with it.. Thank U .. Balu Sign In·View Thread·PermaLink Re: Not working in Internet Explorer 6.0 Syed M Hussain 11:49 14 May '08   Hi Balu I dont have internet explorer 6 on my machine, but I will test it on a machine at work tommorrow. www.cy2online.net Sign In·View Thread·PermaLink Re: Not working in Internet Explorer 6.0 Grace Garcia 18:19 16 May '08   Hi! I got the same problem. Only the top portion is affected by page_dimmer. Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: Not working in Internet Explorer 6.0 Jeroenh 23:35 20 Nov '08   I have the problem here also in IE6. The message appeat at the top of the screen. In FF3 it works good Is there already an solution for this problem? Thx Sign In·View Thread·PermaLink Re: Not working in Internet Explorer 6.0 Syed M Hussain 2:30 21 Nov '08   Hi Jeroenh Unfortunately IE6 does not understand the CSS Position:fixed property. Currently I have no fix for IE6, It works in IE7. www.cy2online.net Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: Not working in Internet Explorer 6.0 aueu 7:13 8 Jan '09   sorry, but i have error on messageBox.cs in line 23 "readtemplte = new StreamReader(tpl_path);" why the file sending the app to folder c:/website2/msgbox.tpl to look for the "msgbox.tpl". i didn't manage to solve that. dy Sign In·View Thread·PermaLink Re: Not working in Internet Explorer 6.0 Syed M Hussain 7:40 8 Jan '09   Hi aueu For testing purposes I stored the template file in the C:\ drive. You will need to change it. www.cy2online.net Sign In·View Thread·PermaLink Version that works with VS2005 and .NET v2.0 Jon Lea 7:08 1 May '08   I'm still running VS2005 and .NET v2.0 - do you have a version of msgBox that can run under this configuration? Thanks. Jon. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Version that works with VS2005 and .NET v2.0 Syed M Hussain 7:39 1 May '08   Hi Jon Can you tell me what happens when you run the code? www.cy2online.net Sign In·View Thread·PermaLink Re: Version that works with VS2005 and .NET v2.0 Jon Lea 6:08 2 May '08   I get many of the following type error messages on a build/run: Error 1 C:\Development\AspMsgBox\Default.aspx: ASP.NET runtime error: Child nodes not allowed. (C:\Development\AspMsgBox\web.config line 78) C:\Development\AspMsgBox\Default.aspx 1 1 http://localhost/AspMsgBox/ Error 2 Validation (XHTML 1.0 Transitional): Element 'style' is missing required attribute 'type'. C:\Development\AspMsgBox\Default.aspx 8 6 http://localhost/AspMsgBox/ A Google search (http://forums.digitalpoint.com/showthread.php?t=698197) points to using .NET v3.5 while I'm using .NET v2.0. Thanks for the response. Jon. Sign In·View Thread·PermaLink 2.00/5 (1 vote) So cool But... barbod_blue 19:01 29 Apr '08   hi , your control is so cool , but it have some bugs! when i used it on Button-Click Event and click on button everything is ok, and messagebox show , but when i clicked and closed messagebox , and refresh the page , messagebox show again , i think u should write a code for hide and close it. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: So cool But... Syed M Hussain 23:26 29 Apr '08   barbod_blue Thank you for your reply, the sample is a simple example to show how to show a messagebox and hide it ans also add other buttons to it so that the user can navigate to other pages. I used a template approach so that developers can change the template as needed. www.cy2online.net Sign In·View Thread·PermaLink 1.00/5 (1 vote) Very nice gwisertal 22:51 28 Apr '08   Nice idea and implamation,I'll Save it for letter use, I wasnt aware to the tpl option Good job, Tal gaviser, gui and db developer Sign In·View Thread·PermaLink Re: Very nice Syed M Hussain 23:30 28 Apr '08   Hi gwisertal I added the templating option to allow developers to use their own message box template so it can be customized to their own look and feel. www.cy2online.net Sign In·View Thread·PermaLink Good art ericpxz 7:23 28 Apr '08   so good,this Class is very useful & I changed it into javascript class to fit my proj,thank you for your amazing article. Sign In·View Thread·PermaLink Re: Good art Syed M Hussain 7:28 28 Apr '08   Thank you for your response. I developed a php class and though I might make a c# class. I'm glad it came in use. www.cy2online.net Sign In·View Thread·PermaLink good idea felipesabino 4:07 28 Apr '08   Good idea to use a template to parse some html template into your page, but you should have used the "string.Format" method to replace the icons, and the message templates. I think it would be let your code more fancy. Felipe Sabino Sign In·View Thread·PermaLink

Last Visit: 16:17 23 Nov '09     Last Update: 16:17 23 Nov '09 12 Next »