Show Modal Popup Window Using jQuery

The following is my data table from which I am reading records and will add data by reading from a modal popup window,

Figure 1.

The following is the script of the table,

CREATETABLE [dbo].[Employee](
[ID] [int] IDENTITY(1,1) NOTNULL,
[Name] [varchar](50) NULL,
[Email] [varchar](500) NULL,
[Country] [varchar](50) NULL,
[ProjectID] [int] NULL,
[ManagerName] [varchar](50) NULL,
CONSTRAINT [PK_Employee] PRIMARYKEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Currently the following is the data in my table:

Figure 2.

Here I am filling in my Grid View using jQuery JSON. Now create a new Visual Studio solution and add a jQuery reference.

The following is my aspx,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryModalPopup.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Modal Popup using jQuery</title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
<script src="Scripts/jquery-ui.min.js"></script>
<style type="text/css">
.auto-style1 {
width: auto;
position: relative;
left: 20px;
width: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#gvData').empty();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindEmployees",
data: "{}",
dataType: "json",
success: function(result) {
$("#gvData").append("<tr style='background-color:red; color:white; font-weight:bold;'><td style='text-align:left;'>ID</td><td style='text-align:left;'>Name</td><td style='text-align:left;'>Email</td><td style='text-align:left;'>Country</td><td style='text-align:left;'>Project name</td><td style='text-align:left;'>Manager Name</td></tr>");
for (var i = 0; i < result.d.length; i++) {
if (i % 2 == 0) {
$("#gvData").append("<tr style='background-color:#F5FBEF; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");
} else {
$("#gvData").append("<tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");
}
}
},
error: function(result) {
alert("Error");
}
});
//Open Modal Popup
$('#btnAddEmployee').click(function() {
var id = '#dialog';
var maskHeight = $(document).height();
var maskWidth = $(document).width();
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
returnfalse;
});
$('.window .close').click(function(e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//Add New Employee
//===========================================
$('#btnSubmitEmployee').click(function(e) {
var empName = $('#txtName').val();
var email = $('#txtEmail').val();
var country = $('#ddlCountry').val();
var project = $('#ddlProject').val();
var manager = $('#ddlManager').val();
var JSONObject = {
"Name": empName,
"Email": email,
"Country": country,
"Project": project,
"Manager": manager
};
var jsonData = JSON.stringify(JSONObject);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/AddNewEmployee",
data: jsonData,
dataType: "json",
success: function(data) {},
error: function(result) {
alert("Error");
}
});
$('#gvData').empty();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindEmployees",
data: "{}",
dataType: "json",
success: function(result) {
$("#gvData").append("<tr style='background-color:red; color:white; font-weight:bold;'><td style='text-align:left;'>ID</td><td style='text-align:left;'>Name</td><td style='text-align:left;'>Email</td><td style='text-align:left;'>Country</td><td style='text-align:left;'>Project name</td><td style='text-align:left;'>Manager Name</td></tr>");
for (var i = 0; i < result.d.length; i++) {
if (i % 2 == 0) {
$("#gvData").append("<tr style='background-color:#F5FBEF; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");
} else {
$("#gvData").append("<tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'><td style='text-align:left;'>" + result.d[i].ID + "</td><td style='text-align:left;'>" + result.d[i].Name + "</td><td style='text-align:left;'>" + result.d[i].Email + "</td><td style='text-align:left;'>" + result.d[i].Country + "</td><td style='text-align:left;'>" + result.d[i].ProjectID + "</td><td style='text-align:left;'>" + result.d[i].ManagerName + "</td></tr>");
}
}
},
error: function(result) {
alert("Error");
}
});
});
//===========================================
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 100%; text-align: center; border: solid 5px red; background-color: blue; vertical-align: top;">
<tr>
<td>
<div>
<fieldset style="width: 99%;">
<legend style="font-size: 20pt; color: white; font-family: Verdana">jQuery Modal Popup Show</legend>
<table style="width: 100%;">
<tr>
<td>
<input id="btnAddEmployee" type="submit" value="Add Employee" style="width: 140px;" class="btn btn-info" />
</td>
</tr>
<tr>
<td style="vertical-align: top; background-color: #9DD1F1; text-align: center;">
<asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="True" BackColor="White" GridLines="Both" BorderColor="#CC9966" BorderStyle="None" Width="90%" BorderWidth="1px" HorizontalAlign="Center">
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#330099" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<SortedAscendingCellStyle BackColor="#FEFCEB" />
<SortedAscendingHeaderStyle BackColor="#AF0101" />
<SortedDescendingCellStyle BackColor="#F6F0C0" />
<SortedDescendingHeaderStyle BackColor="#7E0000" />
</asp:GridView>
</td>
</tr>
</table>
</fieldset>
</div>
</td>
</tr>
</table>
</div>
<div id="boxes">
<div id="mask">
<div id="dialog" class="window">
<div id="headerBorder"> Add New Employee # <div id="close" class="close">[X]</div>
</div>
<table style="background-color: skyblue; width: 100%; text-align: left;">
<tr>
<td style="text-align: left; padding-left: 5px;">
<asp:Label ID="lblName" runat="server" Text="Name:" Width="80px"></asp:Label>
</td>
<td style="text-align: left;">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;">
<asp:Label ID="Label1" runat="server" Text="Email:" Width="80px"></asp:Label>
</td>
<td style="text-align: left;">
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;">
<asp:Label ID="Label2" runat="server" Text="Country:" Width="80px"></asp:Label>
</td>
<td style="text-align: left;">
<asp:DropDownList ID="ddlCountry" runat="server">
<asp:ListItem Text="India" Value="India"></asp:ListItem>
<asp:ListItem Text="USA" Value="USA"></asp:ListItem>
<asp:ListItem Text="South Africa" Value="South Africa"></asp:ListItem>
<asp:ListItem Text="Singapore" Value="Singapore"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;">
<asp:Label ID="Label3" runat="server" Text="Manager:" Width="80px"></asp:Label>
</td>
<td style="text-align: left;">
<asp:DropDownList ID="ddlManager" runat="server">
<asp:ListItem Text="Shambhu Sharma" Value="Shambhu Sharma"></asp:ListItem>
<asp:ListItem Text="Hemant Chopra" Value="Hemant Chopra"></asp:ListItem>
<asp:ListItem Text="Mohit Kalra" Value="Mohit Kalra"></asp:ListItem>
<asp:ListItem Text="Vishwa M Goswami" Value="Vishwa M Goswami"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 5px;">
<asp:Label ID="Label4" runat="server" Text="Project:" Width="80px"></asp:Label>
</td>
<td style="text-align: left;">
<asp:DropDownList ID="ddlProject" runat="server">
<asp:ListItem Text="AMX" Value="1"></asp:ListItem>
<asp:ListItem Text="HWN" Value="2"></asp:ListItem>
<asp:ListItem Text="CSR" Value="3"></asp:ListItem>
<asp:ListItem Text="RDS" Value="4"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td></td>
<td>
<input id="btnSubmitEmployee" type="submit" value="Add Employee" style="width: 140px;" class="btn btn-info" />
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>

Now my aspx.cs is,

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace jQueryModalPopup {
public partial class Default: System.Web.UI.Page {
protectedvoid Page_Load(object sender, EventArgs e) {
if (!Page.IsPostBack) {
BindGridWithDummyRow();
}
}
publicvoid BindGridWithDummyRow() {
DataTable dt = new DataTable();
dt.Columns.Add("ID");
dt.Columns.Add("Name");
dt.Columns.Add("Email");
dt.Columns.Add("Country");
dt.Columns.Add("ProjectID");
dt.Columns.Add("ManagerName");
gvData.DataSource = dt;
gvData.DataBind();
}
[WebMethod]
publicstatic Employee[] BindEmployees() {
string connectionString = @ "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
DataTable dt = new DataTable();
List < Employee > employeeList = new List < Employee > ();
using(SqlConnection con = new SqlConnection(connectionString)) {
using(SqlCommand command = new SqlCommand("select e.ID, e.Name,e.Email,e.Country,ProjectName,e.ManagerName from Employee as e Inner join project as p on e.ProjectID=p.ProjectID", con)) {
con.Open();
SqlDataAdapter da = new SqlDataAdapter(command);
da.Fill(dt);
foreach(DataRow dtrow in dt.Rows) {
Employee employee = new Employee();
employee.ID = Convert.ToInt32(dtrow["ID"].ToString());
employee.Name = dtrow["Name"].ToString();
employee.Email = dtrow["Email"].ToString();
employee.Country = dtrow["Country"].ToString();
employee.ProjectID = dtrow["ProjectName"].ToString();
employee.ManagerName = dtrow["ManagerName"].ToString();
employeeList.Add(employee);
}
}
}
return employeeList.ToArray();
}
[WebMethod]
publicstaticvoid AddNewEmployee(string Name, string Email, string Country, string Project, string Manager) {
string connectionString = @ "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
DataTable dt = new DataTable();
List < Employee > employeeList = new List < Employee > ();
using(SqlConnection con = new SqlConnection(connectionString)) {
using(SqlCommand command = new SqlCommand("INSERT INTO Employee (Name, Email, Country, ProjectID, ManagerName) VALUES ('" + Name + "' , '" + Email + "' , '" + Country + "' , '" + Project + "' , '" + Manager + "')", con)) {
con.Open();
SqlDataAdapter da = new SqlDataAdapter(command);
da.Fill(dt);
}
}
}
}
}