JQuery message boxes with Great look’n feel for ASP.Net

Users who switch from Windows application to Asp.net web applications feels the heck of showing message box on web forms. So they have to use either Ajax Toolkit Modal popup extender or JavaScript alert function for message box. 

Here is the Solution for message box with great styles and with no more Extenders Coding.

What you have to do is you should have some JQuery library files from here.

Now you have to put the file in your project directory in say JavaScript folder. Now add the reference to these files to you page in same order as below where you want to show the Message box.

<script src="../../JavaScript/MsgBox/jquery.js" type="text/javascript"></script>
<link href="../../JavaScript/MsgBox/impromptu.css" rel="stylesheet" type="text/css" />
<script src="../../JavaScript/MsgBox/jquery-impromptu.2.6.min.js" type="text/javascript"></script>

Now at you code behind CS file creates a function:

public void showmsg(string str)
{
    string prompt =
    "<script>$(document).ready(function(){{$.prompt('{0}!',{1});}});</script>";
    string message = string.Format(prompt, str, "{ prefix: 'impromptu' }");
    // registering the JavaScript on the page and controls with postback
    this.Page.ClientScript.RegisterStartupScript(typeof(Page), "alert", message);
}

Now to show the message box you just call the function where ever you want it from your code behind:

For eg:

showmsg("Example1");


In case you are using Ajax Update panel the above function will not show the message box. So if you are using Ajax Update panel then change the Script registration Statement to the following:

Without Update Panel:

// registering the JavaScript on the page and controls with postback
this.Page.ClientScript.RegisterStartupScript(typeof(Page), "alert", message);
With Update panel:

//Registering the javascript on the page and controls with Ajax Callbac
ScriptManager.RegisterStartupScript(typeof(Page), "alert",message);

You can also change the Message box to Prompt box or even to Wizard Box with different Styling

How?? Just go to the Impromptu Home page and see the live examples and different types of Messages box using the same library.

This Tutorial was actually based on how to use JQuery message box with our asp.net pages.

Hope it helps to Newbies to JQuery and Asp.net....

Enjoy MsgBoxing...

Please do comments to keep this article live.....