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