October 25, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Messaging with Modal Windows in ASP.NET

  • September 12, 2007
  • By Michael Klaene
  • Send Email »
  • More Articles »

ASP.NET developers are always looking for ways to improve their user interfaces. In the past few years, numerous AJAX frameworks have emerged, allowing developers to create applications that look and feel like software you might find on the desktop. Microsoft has released its own Ajax framework for ASP.NET to make this task easier for developers. Many developers, however, are not in a position to introduce a new framework to existing applications. Instead, they might prefer to add their own code to improve one aspect of the interface as a particular need arises. This article demonstrates how developers can introduce one of the more popular features of desktop applications to their ASP.NET solutions: modal windows that convey user feedback. Providing feedback in this manner is very effective because modal windows effectively disable the rest of the application, thereby forcing the user to acknowledge the message. Modal windows are common throughout thick-client applications but they are challenging to implement in browser-based solutions. The approach described in this article will allow developers to implement this feature, without installing any new framework, and with only a small amount of code and markup.

The demonstration provided here assumes developers are using the 2.0 version of the .NET framework of higher because it utilizes an ASP.NET Master Page. However, applications based upon the 1.1 framework could still implement a similar approach, by placing the logic elsewhere, such as a UserControl.

The basic concept is this: Users interact with your application, retrieving data and modifying that data, and then the application provides feedback based upon their actions. ASP.NET has always provided numerous validation controls that are capable of displaying error messages on a web form. The downside to this approach is that the user might miss this information, even when the error message is presented in a different color. To remedy this, some developers prefer to use JavaScript alert windows. These alert windows can be useful, especially when they are made 'modal'. Having said that, support for modal alerts in JavaScript is problematic because of lack of consistency across browsers.

The solution presented here is a simple one. It consists of a Message class, a MessageProvider class to work with Message instances, and a Default.master (your Master Page) containing the code necessary to display messages to the user. Finally, the user will create their ASP.NET pages that will extend the Master Page to make use of the framework. The class that represents a system message, which you will appropriately call Message, has two properties: Text and Type. Text will contain the message that eventually will display to the user. Type is a property of type int that will contain one of the following values defined in the enum MsgType defined in the same class:

public enum MsgType
{
   INFORMATIONAL,
   WARNING,
   ERROR
}

The MessageProvider class is a Singleton that the application uses to manage Message instances. There is really not much to it in its present form. It contains a public property, called Messages, that will return a strongly typed collection of Message instances:

private IList<Message> msgs = new List<Message>();

public IList<Message> Messages
{
   get { return msgs; }
}

As mentioned previously, you utilize a ASP.NET 2.0 Master Page to display these messages. If you are unable to use a MasterPage, you could add this code in a UserControl. The key is that you will want to put the code somewhere that all of your pages can reuse. In the markup of the Default.master file, you declare an asp:Panel called "MessageContainer" that contains markup within a <div> tags. This panel's visibility will be toggled on when messages are ready to display. A <span> tag will be populated with message text and one of three different icons that accompany each of the three different message types. A single button is provided for the user to acknowledge the alert. There is some additional javaScript code needed, some of which is used to hide any dropdown lists that might be on the page (this is due to an Internet Explorer limitation that allows dropdowns to display through <div> tags even though they have a higher z-index.). The Default.master.cs file will implement a PreRender method that checks for messages and generates the markup to display them:

protected void Page_PreRender(object sender, EventArgs e)
{

   StringBuilder sb = new StringBuilder();
   string imgStr = null;

   sb.Append("<div style=\"width:530px;padding-left:10px;
              padding-right:10px;\">");

   if (MessageProvider.getInstance().Messages.Count > 0)
   {
      MessageContainer.Visible = true;
   }
   else
   {
      MessageContainer.Visible = false;
   }
   foreach (Message msg in MessageProvider.getInstance().Messages)
   {
      switch (msg.Type)
      {
         case (int)Message.MsgType.INFORMATIONAL:
            imgStr = "info.ico";
            break;
         case (int)Message.MsgType.WARNING:
            imgStr = "warning.ico";
            break;
         case (int)Message.MsgType.ERROR:
            imgStr = "error.ico";
            break;
        }
      sb.Append("<div style=\"valign=middle;float:left;\
                "<img src=\"" + imgStr + "\"<>/div<");
      sb.Append("<div style=\"valign:middle;text-align:left;\
                "<" + msg.Text + ">/div<>br/<");
   }
   sb.Append("</div>");
   MessageProvider.getInstance().Messages.Clear();
   this.spanMsg.InnerHtml = sb.ToString();
}




Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel