Flash message using Jquery

aspdotnetcodebook


<%@ 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 });
         }
    }
}


{{Demo}}

3 comments:

  1. I was actually looking for this resource a few weeks back. Thanks for sharing with us your wisdom.This will absolutely going to help me in my projects .
    Once again great post. You seem to have a good understanding of these themes.When I entering your blog,I felt this . Come on and keep writting your blog will be more attractive. To Your Success!
    Classic Dresses
    Classic Bridesmaid Dresses
    Trumpet Wedding Dresses
    New Style Flower Girl Dresses
    Wedding Dresses with Sleeves

    ReplyDelete