Flash message using Jquery

aspdotnetcodebook

In this article, I will show you how to flash message using Jquery. Let’s suppose you are posting some data and you want to flash a message that data is processed or something like that. Check out the following code snippet it is self-explanatory

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FlashMessage.aspx.cs" Inherits="FlashMessage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>

    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnInsert").click(function() {
                var name = $("#txtName").val();
                var age = $("#txtAge").val();
                $.ajax(
            {
                type: "POST",
                data: "{'name':'" + name + "',age:'" + age + "'}",
                dataType: "json",
                contentType: "application/json",
                url: "FlashMessage.aspx/InsertEmployee",
                success: function(response) {
                    $("#gridView").html(response.d);
                    $("#message").html("");
                    $("#message").html("Employee inserted successfully!").fadeIn("6000").fadeOut("2000");
                }
            });
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="gridView">
        </div>
        <table class="style1">
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Age
                </td>
                <td>
                    <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="btnInsert" value="Insert" />
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="message" style="background-color: #ffaa00; width: 200px; display: none">
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class FlashMessage : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {

  }
  private static string ConvertControlToHTML(Control source)
  {
      StringWriter sw = new StringWriter();
      HtmlTextWriter htw = new HtmlTextWriter(sw);
      source.RenderControl(htw);
      return sw.ToString();
  }
  [System.Web.Services.WebMethod]
  [System.Web.Script.Services.ScriptMethod]
  public static string InsertEmployee(string name, int age)
  {
      Employee emoloyeeObject = new Employee();
      emoloyeeObject.InsertEmployee(name, age);
      GridView gv = new GridView();
      gv.ShowHeader = true;
      gv.AutoGenerateColumns = true;
      gv.DataSource = HttpContext.Current.Session["emp"];
      gv.DataBind();
      return ConvertControlToHTML(gv);

  }
}

public class Employee
{

    public string Name { get; set; }
    public int Age { get; set; }

    public void InsertEmployee(string name, int age)
    {
         List<Employee> list = new List<Employee>();
         if (HttpContext.Current.Session["emp"] == null)
         {
             list.Add(new Employee() { Name = name, Age = age });
             HttpContext.Current.Session["emp"] = list;
         }
         else
         {
             list = HttpContext.Current.Session["emp"] as List<Employee> ;
             list.Add(new Employee() { Name = name, Age = age });
         }
    }
}

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru