Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

ASP Dot NET jQuery-JSON - Showing Modal Popup with Parent - Child window Value dependency

Article:
Viewed:  1263 
Posted On:  7/10/2015 9:11:12 PM 
How we can show modal popup window in asp.net using jQuery JSON ? 

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

1.png

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

2.png

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>
                                &nbsp;<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:

 

3.png

 

Image 3.

 

Now while adding nw employee Need to select manager:

 

4.png

 

Image 4.

 

On selecting manager Project drop down will fill:

 

 

5.png

 

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.

 

6.png

 

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:

 

7.png

 

Image 7.

 

Now add employee and it will show in grid:

 

8.png

 

Image 8

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us