Home > Jquery in Asp.Net > MessageBox in ASP.Net using JQuery Impromptu.

MessageBox in ASP.Net using JQuery Impromptu.

I have been working in Asp.net for 3 years. But this is my first attempt to write a blog article. It wouldn’t be so good as it should be, but I‘ll to better next time.

In developing web applications it is always very useful to show some nice alerts and popups to get some approvals or feedbacks from user at runtime , e.g. in deleting a record you always use “Are you sure ,you want to delete this order ?” etc. So, Before Trent Richardson’ JQuery-Impromptu, I always used AJAX modalpopup to show windows like MessageBox in asp.net. But it was slow and also had to do work around much for browser compatibility for AJAX.

Because of these issues I decided to find some other ways to show user some nice looking message-box. When I was Goggling I found JQuery Impromptu by Trent Richardson. It is a very elegant library to use in any web application for popup. You can read more about this library on Trent blog.
Then I found a good article of Aron Goldenthal for using impromptu in asp.net. I took the idea to write the class from this article. It was little complex that is why I though the need of a class which is easier to use for anyone.

MessageBox is the core class which is responsible to display MessageBox on the browser.

It has the following properties;
Caption: Caption or heading of the MessageBox like Warning, Information, Error, etc.
Message: The text or the description of the MessageBox.
Buttons: Buttons to display on the MessageBox, you can add as many buttons as your requirement. It needs the name of the button and text. It has the following default button types; OK, CANCEL, YES and NO.
Focus: The Index of the button to set the focus at startup, default index is 0.
CallBackFunction: You can have your own custom javascript function to call whenever buttons on the MessageBox is fired. It is optional.

One thing I should mention here is that If you are using AJAX ModalPopup then uncomment the below lines in javascript.
$(“#jqibox”).css(‘position’,’absolute’);
$(“#jqibox”).css(‘z-index’,’10002′);

This is the MessageBox;

That is all for this time, I ‘ll come back soon with some enhancements.
Download Sample Application

Advertisements
  1. valentina
    March 31, 2012 at 12:03 pm

    Thank you for this control! One question…the box appear in the top of the page…how could I make it appear in the part of the page where the button is pressed?

    • April 2, 2012 at 11:12 am

      Thank you.
      Give top margin for the messageBox in css class. Add the margin property like div.jqi{margin-top:123px;

  2. September 11, 2012 at 8:50 am

    Yes Ajith. You can add as many buttons as you required. You can then handle the buttons’ events both on server and client side.

    • Ajith
      September 11, 2012 at 8:58 am

      I tried to make this box as modal, but i failed. Could you send me the code snippet to make this box modal.

      • September 11, 2012 at 2:48 pm

        If you need any sample of code then there is a link in the bottom of the article demonstrating how to use the Message class. But your requirement is some other than the sample then you can share a relevant scenario so that I can provide you the code.

  3. Ajith
    September 12, 2012 at 4:55 am

    I have used this control. Let me tell you, this is a very good control. But my issue is that i want this message box to work as a dialog box so that the system waits for a button click from the user. I am not able to achieve this. I tried modifying the code, but invain.
    So you could help me achieve this task.
    Thanks you very much

    • September 12, 2012 at 6:49 am

      You can use it on page load or anywhere to show a dialog as;
      CustomException ex= new CustomException("DialogBox' Caption", "Dialog Box Message");
      MessageBox messageBox = new MessageBox(ex, MessageBoxDefaultButtonEnum.OK);
      messageBox.Show(this);

  4. PRAKASH
    June 19, 2013 at 7:47 am

    i cant able to access the code can you please send the Class code alone

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s