ASP.Net - Auto Close Message Box Control

There are dozen of ways for displaying messages in a web application developed in ASP.Net Web Forms. If Bootstrap is used, a generic bootstrap message template can be used. But what if we need a bit more enhanced message that could be terminated by itself after a given set of seconds.

The below way is practically easy for implementation and the control can be called, and message can be shown from code behind too.

1. First create the control ( Remember to reference JQuery in your project.)

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MessageBox.ascx.cs" Inherits="TRD.HealthCareWebsite.Controls.MessageBox" %>  
 <div id="<%= WrapperElementID %>" class="MessageBoxWrapper">  
   <asp:Panel ID="MessageBoxInterface" runat="server" CssClass="MessageBoxInterface" Visible="false" EnableViewState="false">  
     <script type="text/javascript">  
       $(document).ready(function() {  
         if(<%= AutoCloseTimeout %> > 0)  
             $('#<%= MessageBoxInterface.ClientID %>').delay(<%= AutoCloseTimeout %>).slideUp(300);  
         });  
     </script>  
     <asp:HyperLink ID="CloseButton" runat="server" Visible="false">  
       <asp:Image ID="CloseImage" Visible="false" runat="server" AlternateText="Hide Alert Message" ImageUrl="~/Images/MessageBox_close.png" />  
     </asp:HyperLink>  
     <p>  
       <asp:Literal ID="AlertMessage" runat="server"></asp:Literal>  
     </p>  
   </asp:Panel>  
 </div> 

2. The code behind

 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.UI;  
 using System.Web.UI.WebControls;  
 namespace TRD.HealthCareWebsite.Controls  
 {  
   public partial class MessageBox : System.Web.UI.UserControl  
   {  
     public bool ShowCloseButton { get; set; }  
     private int _AutoCloseTimeout;  
     public int AutoCloseTimeout  
     {  
       get  
       {  
         if (_AutoCloseTimeout <= 0)  
           _AutoCloseTimeout = 5000;  
         return _AutoCloseTimeout;  
       }  
       set { _AutoCloseTimeout = value; }  
     }  
     public string WrapperElementID { get; set; }  
     protected void Page_Load(object sender, EventArgs e)  
     {  
       if (String.IsNullOrEmpty(WrapperElementID))  
         WrapperElementID = "MessageBoxWrapper";  
       if (ShowCloseButton)  
         CloseButton.Attributes.Add("onclick",  
                       "document.getElementById('" + MessageBoxInterface.ClientID +  
                       "').style.display = 'none'");  
     }  
     public void ShowError(string message)  
     {  
       ShowError(message, AutoCloseTimeout);  
     }  
     public void ShowError(string message, int timeout)  
     {  
       Show(MessageType.Error, message, timeout);  
     }  
     public void ShowInfo(string message)  
     {  
       ShowInfo(message, AutoCloseTimeout);  
     }  
     public void ShowInfo(string message, int timeout)  
     {  
       Show(MessageType.Info, message, timeout);  
     }  
     public void ShowSuccess(string message)  
     {  
       ShowSuccess(message, AutoCloseTimeout);  
     }  
     public void ShowSuccess(string message, int timeout)  
     {  
       Show(MessageType.Success, message, timeout);  
     }  
     public void ShowWarning(string message)  
     {  
       ShowWarning(message, AutoCloseTimeout);  
     }  
     public void ShowWarning(string message, int timeout)  
     {  
       Show(MessageType.Warning, message, timeout);  
     }  
     private void Show(MessageType messageType, string message, int timeout)  
     {  
       AutoCloseTimeout = timeout;  
       CloseImage.Visible = ShowCloseButton;  
       CloseButton.Visible = ShowCloseButton;  
       AlertMessage.Text = message;  
       MessageBoxInterface.CssClass = MessageBoxInterface.CssClass + " " + messageType.ToString().ToLower() + "Msg";  
       MessageBoxInterface.Visible = true;  
     }  
     private enum MessageType  
     {  
       Error = 1,  
       Info = 2,  
       Success = 3,  
       Warning = 4  
     }  
   }  
 }  

3. Register the control to the page

 <%@ Register Src="~/Controls/MessageBox.ascx" TagPrefix="uc1" TagName="MessageBox" %>  

 <uc1:MessageBox runat="server" ID="mbLoginError" />  

4. Call it from code behind

 catch(FunctionalException ex)  
       {  
         mbLoginError.ShowError(GetLocalResourceObject(ex.Message).ToString());  
       }  

Note that the class "FunctionalException" is a custom error handling class.

Download the control here.