MessageBox in ASP.NET using jQuery Impromptu

• Download sample application

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 should be, but I‘ll assure you next time it would be a lot better. So, if you find something improper, then for this time, pardon me.

In developing web applications, it is always very useful to show some nice alerts and popups to get some approvals or feedback from the 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 a lot of workaround for browser compatibility for AJAX.

Because of these issues, I decided to find some other ways to show the 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 a little complex, that is why I thought that there is a need for 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 per 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 are 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.

It is tested for almost every browser and Ipad as well.