How to display jquery animated confirmation message in asp.net?


Hi
While working in one of my personal project, I used “displaying confirmation message using jquery”. It is very nice and easy to use.
Step1: Download the related jquery plugin and Write the HTML code like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title>Add New Customer</title>
<link href="Default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" defaultbutton="Save" defaultfocus="Name">
<asp:ScriptManager runat="server">
<Scripts>
<asp:ScriptReference Path="~/jquery-1.2.6.min.js" />
<asp:ScriptReference Path="~/jquery.blockUI.js" />
<asp:ScriptReference Path="~/Default.js" />
</Scripts>
</asp:ScriptManager>

<div id="EntryForm">
<label for="Name">Name:</label>
<asp:TextBox runat="server" ID="Name" />

<label for="Address">Address:</label>
<asp:TextBox runat="server" ID="Address" />

<label for="City">City:</label>
<asp:TextBox runat="server" ID="City" />

<label for="State">State:</label>
<asp:TextBox runat="server" ID="State" />

<label for="Zip">Zip:</label>
<asp:TextBox runat="server" ID="Zip" />

<asp:Button runat="server" ID="Save" OnClick="Save_Click"
Text="Add Customer" UseSubmitBehavior="false" />
</div>

<asp:UpdatePanel runat="server" ID="upConfirmation">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Save" />
</Triggers>
<ContentTemplate>
<asp:Panel runat="server" ID="ConfirmSave" Visible="false">
<h3><asp:Literal runat="server" ID="CustomerName" /> added</h3>

<a href="#" id="CloseConfirm">Close</a>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Step2:Write the code in code behind like this

using System;
using System.Web.UI;

public partial class _Default : System.Web.UI.Page
{
protected void Save_Click(object sender, EventArgs e)
{
// Save the customer to your data store here.
System.Threading.Thread.Sleep(2000);

// Display the confirmation.
ConfirmSave.Visible = true;

// You can custamize the confirmation.
CustomerName.Text = Name.Text;
}
}

Advertisements
Posted in Jquery. 1 Comment »

One Response to “How to display jquery animated confirmation message in asp.net?”

  1. Chandra Dev Says:

    You can download source code here. There you will also get Jquery Plugin
    http://cid-4b1f6c3e92f6522c.office.live.com/browse.aspx/.Public


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: