AspNet Ajax MessageBox With Confirmation Property

Hello

As you know, MessageBox, I mean showing popup messages to users is not hard but some complicated issue in web applications. Besause there is not a “MessageBox.Show(…)” option in AspNet :) Insallah, at the end of this article we will have an AspNet Ajax messageBox with confirmation property.

To get a better idea about our purpose, here is the list of the features of the MessageBox that we will generate;

- The control should have a simple usage. We should show the message with such a single line of code.

- The control should be modal. I mean, user should not be able to do any other operation while the message is open.

- The control should support multiple messages. Multiple messages may be showed through one postback.

- The control should have different apperance according to the type of the message, whether it is an error message or just an information message.

- The control should have confirmation functionality.

- The control should be AJAX ready.

Now we know what we need and let’s analyze how it works.

The AspNet Ajax MessageBox will be a usercontrol and can be used by adding to the page or to another usercontrol. A simple drag and drop operation :)

First we need a message class. Message class is a simple class, having only 2 properties which are MessageText of string type and MessageType of enmMessageType enum type. enmMessageType has 4 items that are; Error, Success, Attention and Info.

The usercontrol has a method named AddMessage(). This method has 2 overloads.

public void AddMessage(string msgText, enmMessageType type){....}
public void AddMessage(string msgText, enmMessageType type, bool postPage, bool showCancelButton, string args){...}

And another important thing about this usercontrol is it is AJAX enabled. All the contents of the usercontrol is inside an UpdatePanel named udpMsj which has an UpdateMode of Conditional. And OnPreRender state of the usercontrol if any message added the UpdatePanel is updated by callinf the Update() method. By this way the content is refreshed only if it is needed.

I will not describe these methods and any other parts of the usercontrol any more because, instead I will show the usage of these methods and this will make things precise.

1. Simply Showing A Message 

protected void btnInfo_Click(object sender, EventArgs e)
{      
    uscMsgBox1.AddMessage("The user saved successfully but should be activated by an administrator within 3 days.", YaBu.MessageBox.uscMsgBox.enmMessageType.Info);
}

This will show the following message.

InfoMsg

Just by simply changing the second parameter of the AddMessage method which is YaBu.MessageBox.uscMsgBox.enmMessageType.Info. The message will have a different apperance as the followings.

 

When the MessageType set to ERROR

ErrorMsg

When the MessageType set to ATTENTION

AttentionMsg

When the MessageType set to SUCCESS

SuccessMsg

2. Show multiple messages at a time

protected void btnMultiple_Click(object sender, EventArgs e)
{
      uscMsgBox1.AddMessage("The user saved successfully.", YaBu.MessageBox.uscMsgBox.enmMessageType.Success);
      uscMsgBox1.AddMessage("The newly saved user account should be activated by an administrator within 3 days", YaBu.MessageBox.uscMsgBox.enmMessageType.Attention);
}

When the multiple messages added

MultipleMsgs

3. Show Confirmation Message

And for the last we can use it to get confirmation. But this is not as simple as the above ones :) Here is the code to get confirmation.

protected void Page_Load(object sender, EventArgs e)
{
      uscMsgBox1.MsgBoxAnswered += MessageAnswered;
}

protected void btnConfirm_Click(object sender, EventArgs e)
{
      uscMsgBox1.AddMessage("Do you confirm to save a new user?.", YaBu.MessageBox.uscMsgBox.enmMessageType.Attention, true, true, txtArg.Text);
}

public void MessageAnswered(object sender, YaBu.MessageBox.uscMsgBox.MsgBoxEventArgs e)
{
      if (e.Answer == YaBu.MessageBox.uscMsgBox.enmAnswer.OK)      
      {
          uscMsgBox1.AddMessage("You have just confirmed the transaction. The user saved successfully. You have entered " + txtArg.Text + " as argument.", YaBu.MessageBox.uscMsgBox.enmMessageType.Info);
      }
      else
      {
          uscMsgBox1.AddMessage("You have just cancelled the transaction.", YaBu.MessageBox.uscMsgBox.enmMessageType.Info);
      }
}

First messagebox for confirmation looks like;

Confirm1Msg

And the second one after the user’s answer looks like this;

Confirm2Msg

Thats all by myself, enjoy it :) By the way a simple application is attached to this article.

Good bye.

AjaxMessageBox

Leave a Reply

Your email address will not be published. Required fields are marked *


− 1 = eight

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>