Home > ASP.NET, javascript, JQuery > Jquery notification after postback asp.net

Jquery notification after postback asp.net

September 16, 2011 Leave a comment Go to comments

Hi All,

I read in many forums that developers are facing problem to display Jquery notification message on page after posting back. This is very important in any website now a days to make GUI very attractive.

Here is simple tutorial which will help you to solve above issue.

I am using Jquery notification message plug-in for displaying message.

Below is code for aspx page

Default.aspx

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<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&#8221;

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 have just added one textbox and one button in HTML page below is code on button click event.

protected void btnSubmit_Click(object sender, EventArgs e)

{

RegisterJavascript(“You have entered” + txtFirstname.Text, “success”);

}

Before running it here is code for the function that we have called on button click.

/// <summary>

/// </summary>

/// <param name=”message”>Your message string</param>

/// <param name=”className”>Class name is use for what type of message it is like 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 am just displaying text of textbox in  notification message. You can write any message on the page.

You can also write images html tags inside the message. For more details how this library works visit home page.

Jquery library which is being used in this demo can be downloadable from below link.

http://plugins.jquery.com/project/showMessage

Download working source code of the demo Click here to download it.

Thanks

Categories: ASP.NET, javascript, JQuery Tags: , , , , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a comment