JQuery Notification After Postback in ASP.NET

2011-09-16 About 300 words 2 minutes

Hi all,

I read in several forums that developers were struggling to show a jQuery notification message on a page after a postback. This matters a lot for making a website’s UI attractive nowadays.

Here’s a simple tutorial to solve that.

I’m using the jQuery showMessage notification plugin for displaying the message.

Here’s the code for the ASPX page, Default.aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Jquery Postback demo</title>
  <script src="JS/jquery.showMessage.js" type="text/javascript"></script>
  <script src="JS/jquery.showMessage.min.js" type="text/javascript"></script>
  <link href="CSS/style_msg.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    charset="utf-8"></script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="txtFirstname" runat="server" />
      <asp:Button ID="btnSubmit" runat="server" style="height: 26px" />
    </div>
  </form>
</body>
</html>

I’ve just added one textbox and one button to the page — here’s the code for the button click event:

protected void btnSubmit_Click(object sender, EventArgs e)
{
    RegisterJavascript("You have entered " + txtFirstname.Text, "success");
}

Before running it, here’s the function we called on the button click:

/// <summary>
/// </summary>
/// <param name="message">Your message string</param>
/// <param name="className">Class name used for the type of message, e.g. success, fail, etc.</param>
public void RegisterJavascript(string message, string className)
{
    string prompt = "<script>jQuery(function() {jQuery('body').showMessage({'thisMessage':['" + message + "'],'className':'" + className + "','displayNavigation':true,'autoClose':true}); });</script>";

    ClientScript.RegisterStartupScript(typeof(Page), "prompt", prompt);
}

I’m just displaying the textbox’s text in the notification message — you can put any message on the page. You can also include image HTML tags inside the message. For more details on how the library works, visit its home page.

The jQuery library used in this demo can be downloaded from here.

Download the working source code of the demo here.

Thanks