Here in this article I am going to show how we can show
Modal popup window in ASP.NET using jQuery. Here I am making a dependency of
child window on parent and Parent window on child. Mean when I will open child
window (Modal popup) then I will read some values from Parent window and will
pass it on modal popup. And after performing operations on child window ie:
Modal popup I will refresh Parent window with updated Data Base.
Below is my Scenario:
I have an Employee Table and I am showing and adding a
new employee from a screen. While adding a new employee I need to select a
Manager (Project Leader) & Project.
And if suppose I want to add a new project under selected manager then I
am opening a modal popup and adding a new manager.
Below are my 2 tables:
1. Employee Table
Image 1.
Script
of Employee table:
CREATE TABLE [dbo].[Employee](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name]
[varchar](50) NULL,
[Email]
[varchar](500) NULL,
[Country]
[varchar](50) NULL,
[ProjectID]
[int] NULL,
[ManagerName]
[varchar](50) NULL,
CONSTRAINT [PK_Employee] PRIMARY
KEY 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
2. Project Table
Image 2.
Script
of Project Table:
CREATE TABLE [dbo].[Project](
[ProjectID]
[int] IDENTITY(1,1) NOT NULL,
[ProjectName]
[varchar](50) NULL,
[ProjectLeader]
[varchar](50) NULL,
CONSTRAINT [PK_Project] PRIMARY
KEY CLUSTERED
(
[ProjectID] 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
Now create a New Visual Studio Project and add a page to Add
New Employee and show all Emoloyee:
Here add jQuery reference: and do below aspx code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ManageEmployee.aspx.cs" Inherits="jQueryPopUp.ManageEmployee"
EnableEventValidation="false" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Modal PopUp</title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<link href="R-ModalPopUp.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 () {
$("#ddlProject").append($("<option></option>").val('0').html("--Select
Project--"));
//Filling Manager Drop Down List
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "ManageEmployee.aspx/BindManager",
data: "{}",
dataType: "json",
success: function (data) {
$("#ddlManager").append($("<option></option>").val('0').html("--Select
Manager--"));
$.each(data.d, function (key, value) {
$("#ddlManager").append($("<option></option>").val(value.ManagerName).html(value.ManagerName));
});
},
error: function (result) {
alert("Error");
}
});
$('#ddlManager').change(function () {
var SelectedText = $(this).find(":selected").text();
var SelectedValue = $(this).val();
var JSONObject = { "ManagerID": SelectedText };
var jsonData =
JSON.stringify(JSONObject);
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "ManageEmployee.aspx/BindManagerProject",
data: jsonData,
dataType: "json",
success: function (data) {
$('#ddlProject').empty();
$("#ddlProject").append($("<option></option>").val('0').html("--Select
Project--"));
$.each(data.d, function (key, value) {
$("#ddlProject").append($("<option></option>").val(value.ProjectID).html(value.ProjectName));
});
},
error: function (result) {
alert("Error");
}
});
});
$('#gvData').empty();
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "ManageEmployee.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");
}
});
$('#btnAddProject').click(function () {
var id = '#dialog';
var ManagerName = $('#ddlManager').val();
var ManagerText = $('#ddlManager
:selected').text();
$("#lblManagerName").text(ManagerName);
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);
return false;
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#btnUpdate').click(function (e) {
var Manager = $('#lblManagerName').text();
var Project = $('#txtProjectName').val();
var JSONObject = { "Manager": Manager, "Project": Project };
var jsonData =
JSON.stringify(JSONObject);
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "ManageEmployee.aspx/AddProjectWithManager",
data: jsonData,
dataType: "json",
success: function (data) {
},
error: function (result) {
alert("Error");
}
});
var JSONObject = { "ManagerID": $("#lblManagerName").text() };
var jsonData = JSON.stringify(JSONObject);
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "ManageEmployee.aspx/BindManagerProject",
data: jsonData,
dataType: "json",
success: function (data) {
$('#ddlProject').empty();
$("#ddlProject").append($("<option></option>").val('0').html("--Select
Project--"));
$.each(data.d, function (key, value) {
$("#ddlProject").append($("<option></option>").val(value.ProjectID).html(value.ProjectName));
});
},
error: function (result) {
alert("Error");
}
});
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//Add Employee
$('#btnAddEmployee').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: "ManageEmployee.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: "ManageEmployee.aspx/BindEmployees",
data: "{}",
dataType: "json",
success: function (result) {
for (var i = 0; i <
result.d.length; i++) {
$("#gvData").append("<tr><td>" + result.d[i].ID + "</td><td>" + result.d[i].Name
+ "</td>
<td>" + result.d[i].Email + "</td><td>" +
result.d[i].Country + "</td><td>" + result.d[i].ProjectID + "</td>
<td>" +
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: yellow; vertical-align: top;">
<tr>
<td>
<div>
<fieldset style="width: 99%;">
<legend style="font-size: 20pt; color: red; font-family: Verdana">
jQuery Modal Popup
Show with (Parent - Child window) Value dependency</legend>
<table style="width: 100%;">
<tr>
<td style="vertical-align: top; width: 20%;">
<table style="background-color: skyblue; width: 100%; text-align: left;">
<tr>
<td colspan="2" style="background-color: #DF0101; color: white;
border: 1px solid red; font-weight:bold; padding-left:px;">Add New Employee</td>
</tr>
<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: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:DropDownList>
<br />
<input id="btnAddProject" type="submit" value="Add
Project"
style="width: 100px;" class="btn
btn-info"
/>
</td>
</tr>
<tr>
<td></td>
<td>
<input id="btnAddEmployee" type="submit" value="Add
Employee"
style="width: 140px;" class="btn
btn-info"
/>
</td>
</tr>
</table>
</td>
<td style="vertical-align: top; background-color: green; text-align: center;">
<asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="True" BackColor="White"
borderColor="#CC9966" BorderStyle="None" Width="100%" BorderWidth="1px">
<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 Project #
<div id="close" class="close">[X]</div>
</div>
<table class="auto-style1">
<tr>
<td style="text-align: left;">Manager Name: </td>
<td>
<asp:Label ID="lblManagerName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td style="text-align: left;">Project Name: </td>
<td>
<input type="text" style="width: 300px;" id="txtProjectName" />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td>
<button id="btnUpdate">Submit</button>
<input type="reset" />
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
Now my aspx.cs code:
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 jQueryPopUp
{
public partial class ManageEmployee : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindGridWithDummyRow();
}
}
public void 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]
public static 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,
p.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]
public static Employee[] BindManager()
{
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
DISTINCT ProjectLeader from Project", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(command);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
Employee employee = new Employee();
employee.ManagerName =
dtrow["ProjectLeader"].ToString();
employeeList.Add(employee);
}
}
}
return employeeList.ToArray();
}
[WebMethod]
public static Employee[] BindManagerProject(string ManagerID)
{
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
ProjectID, ProjectName from Project WHERE ProjectLeader='" + ManagerID + "'", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(command);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
Employee employee = new Employee();
employee.ProjectID =
dtrow["ProjectID"].ToString();
employee.ProjectName =
dtrow["ProjectName"].ToString();
employeeList.Add(employee);
}
}
}
return employeeList.ToArray();
}
[WebMethod]
public static void AddProjectWithManager(string Manager, string Project) {
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
Project
(ProjectName, ProjectLeader) VALUES ('" + Project + "' , '" + Manager + "')", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(command);
da.Fill(dt);
}
}
}
[WebMethod]
public static void 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);
}
}
}
}
}
Here I added a new Employee class:
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
namespace jQueryPopUp
{
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Country { get; set; }
public string ProjectID { get; set; }
public string ProjectName { get; set; }
public string ManagerName { get; set; }
}
}
Now run your application:
Here this screen will show all employee list and you can add new
employee from here:
Image 3.
Now while adding nw employee Need to select manager:
Image 4.
On selecting manager Project drop down will fill:
Image 5.
If you want to add a new project under selected manager then
click on Add Project button: You will notice child window is showing value from
parent windoe ie: Manager Name.
Image 6.
Now add a new project and you will notice this newly added
project is showing in project drop down mean after adding project I am
refresing parent window with current values in Data Base:
Image 7.
Now add employee and it will show in grid:
Image 8