Here I am making a dependency of a child window on a parent and a parent window on a child. In other words when I open a child window (Modal window) then I will read some values from the parent window and will pass it on a modal window. And after performing operations on the child window, in ther words modal window, I will refresh the parent window with an updated database.

The following is my scenario.

I have an Employee Table and I am showing and adding a new employee from a screen. When adding a new employee I need to select a Manager (Project Leader) and project. And suppose I want to add a new project under the selected manager then I am opening a modal window and adding a new manager.

The following are my 2 tables:

1. Employee Table

table
Figure 1.

The following is the script of the Employee table:

  1. CREATETABLE [dbo].[Employee](
  2. [ID] [int] IDENTITY(1,1)NOTNULL,
  3. [Name] [varchar](50)NULL,
  4. [Email] [varchar](500)NULL,
  5. [Country] [varchar](50)NULL,
  6. [ProjectID] [int] NULL,
  7. [ManagerName] [varchar](50)NULL,
  8. CONSTRAINT [PK_Employee] PRIMARYKEYCLUSTERED
  9. (
  10. [ID] ASC
  11. )WITH (PAD_INDEX=OFF,STATISTICS_NORECOMPUTE=OFF,IGNORE_DUP_KEY=OFF,ALLOW_ROW_LOCKS=ON,ALLOW_PAGE_LOCKS=ON)ON [PRIMARY]
  12. )ON [PRIMARY]
  13. GO
2. Project Table

Project Table
Figure 2.

The following is the script of the Project table:
  1. CREATETABLE [dbo].[Project](
  2. [ProjectID] [int] IDENTITY(1,1)NOTNULL,
  3. [ProjectName] [varchar](50)NULL,
  4. [ProjectLeader] [varchar](50)NULL,
  5. CONSTRAINT [PK_Project] PRIMARYKEYCLUSTERED
  6. (
  7. [ProjectID] ASC
  8. )WITH (PAD_INDEX=OFF,STATISTICS_NORECOMPUTE=OFF,IGNORE_DUP_KEY=OFF,ALLOW_ROW_LOCKS=ON,ALLOW_PAGE_LOCKS=ON)ON [PRIMARY]
  9. )ON [PRIMARY]
  10. GO
Now create a new Visual Studio project and add a page to the Add New Employee and show all the Emoloyees.

Here add a jQuery reference with the following aspx code:
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="ManageEmployee.aspx.cs"Inherits="jQueryPopUp.ManageEmployee"EnableEventValidation="false"%>
  2. <!DOCTYPEhtml>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <headrunat="server">
  6. <title>jQuery Modal PopUp</title>
  7. <scriptsrc="Scripts/jquery-2.1.4.min.js">
  8. </script>
  9. <linkhref="R-ModalPopUp.css"rel="stylesheet"/>
  10. <scriptsrc="Scripts/jquery-ui.min.js">
  11. </script>
  12. <styletype="text/css">
  13. .auto-style1 {
  14. width: auto;
  15. position: relative;
  16. left: 20px;
  17. width: 100%;
  18. }
  20. </style>
  21. <scripttype="text/javascript">
  22. $(document).ready(function () {
  23. $("#ddlProject").append($("
  24. <option></option>").val('0').html("--Select Project--"));
  25. //Filling Manager Drop Down List
  26. $.ajax({
  27. type: "POST",
  28. contentType: "application/json; charset=utf-8",
  29. url: "ManageEmployee.aspx/BindManager",
  30. data: "{}",
  31. dataType: "json",
  32. success: function (data) {
  33. $("#ddlManager").append($("
  34. <option></option>").val('0').html("--Select Manager--"));
  35. $.each(data.d, function (key, value) {
  36. $("#ddlManager").append($("
  37. <option></option>").val(value.ManagerName).html(value.ManagerName));
  38. });
  39. },
  40. error: function (result) {
  41. alert("Error");
  42. }
  43. });
  46. $('#ddlManager').change(function () {
  47. varSelectedText = $(this).find(":selected").text();
  48. varSelectedValue = $(this).val();
  49. varJSONObject = { "ManagerID": SelectedText };
  51. varjsonData = JSON.stringify(JSONObject);
  52. $.ajax({
  53. type: "POST",
  54. contentType: "application/json; charset=utf-8",
  55. url: "ManageEmployee.aspx/BindManagerProject",
  56. data: jsonData,
  57. dataType: "json",
  58. success: function (data) {
  59. $('#ddlProject').empty();
  60. $("#ddlProject").append($("
  61. <option></option>").val('0').html("--Select Project--"));
  62. $.each(data.d, function (key, value) {
  63. $("#ddlProject").append($("
  64. <option></option>").val(value.ProjectID).html(value.ProjectName));
  65. });
  66. },
  67. error: function (result) {
  68. alert("Error");
  69. }
  70. });
  71. });
  73. $('#gvData').empty();
  74. $.ajax({
  75. type: "POST",
  76. contentType: "application/json; charset=utf-8",
  77. url: "ManageEmployee.aspx/BindEmployees",
  78. data: "{}",
  79. dataType: "json",
  80. success: function (result) {
  81. $("#gvData").append("
  82. <tr style='background-color:red; color:white; font-weight:bold;'>
  83. <td style='text-align:left;'>ID</td>
  84. <td style='text-align:left;'>Name</td>
  85. <td style='text-align:left;'>Email</td>
  86. <td style='text-align:left;'>Country</td>
  87. <td style='text-align:left;'>Project name</td>
  88. <td style='text-align:left;'>Manager Name</td>
  89. </tr>");
  90. for (var i = 0; i
  91. <result.d.length; i++) {
  92. if (i % 2 == 0) {
  93. $("#gvData").append("
  94. <tr style='background-color:#F5FBEF; font-family:Verdana; font-size:10pt ;'>
  95. <td style='text-align:left;'>" + result.d[i].ID + "</td>
  96. <td style='text-align:left;'>" + result.d[i].Name + "</td>
  97. <td style='text-align:left;'>" + result.d[i].Email + "</td>
  98. <td style='text-align:left;'>" + result.d[i].Country + "</td>
  99. <td style='text-align:left;'>" + result.d[i].ProjectID + "</td>
  100. <td style='text-align:left;'>" + result.d[i].ManagerName + "</td>
  101. </tr>");
  102. }
  103. else {
  104. $("#gvData").append("
  105. <tr style='background-color:skyblue; font-family:Verdana; font-size:10pt ;'>
  106. <td style='text-align:left;'>" + result.d[i].ID + "</td>
  107. <td style='text-align:left;'>" + result.d[i].Name + "</td>
  108. <td style='text-align:left;'>" + result.d[i].Email + "</td>
  109. <td style='text-align:left;'>" + result.d[i].Country + "</td>
  110. <td style='text-align:left;'>" + result.d[i].ProjectID + "</td>
  111. <td style='text-align:left;'>" + result.d[i].ManagerName + "</td>
  112. </tr>");
  114. }
  115. }
  116. },
  117. error: function (result) {
  118. alert("Error");
  119. }
  120. });
  123. $('#btnAddProject').click(function () {
  124. var id = '#dialog';
  126. varManagerName = $('#ddlManager').val();
  127. varManagerText = $('#ddlManager :selected').text();
  129. $("#lblManagerName").text(ManagerName);
  130. varmaskHeight = $(document).height();
  131. varmaskWidth = $(document).width();
  133. $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
  135. //transition effect
  136. $('#mask').fadeIn(1000);
  137. $('#mask').fadeTo("slow", 0.8);
  139. //Get the window height and width
  140. varwinH = $(window).height();
  141. varwinW = $(window).width();
  143. //Set the popup window to center
  144. $(id).css('top', winH / 2 - $(id).height() / 2);
  145. $(id).css('left', winW / 2 - $(id).width() / 2);
  147. //transition effect
  148. $(id).fadeIn(2000);
  150. returnfalse;
  151. //if close button is clicked
  153. });
  155. $('.window .close').click(function (e) {
  156. e.preventDefault();
  157. $('#mask').hide();
  158. $('.window').hide();
  159. });
  161. $('#btnUpdate').click(function (e) {
  163. var Manager = $('#lblManagerName').text();
  164. var Project = $('#txtProjectName').val();
  165. varJSONObject = { "Manager": Manager, "Project": Project };
  166. varjsonData = JSON.stringify(JSONObject);
  168. $.ajax({
  169. type: "POST",
  170. contentType: "application/json; charset=utf-8",
  171. url: "ManageEmployee.aspx/AddProjectWithManager",
  172. data: jsonData,
  173. dataType: "json",
  174. success: function (data) {
  175. },
  176. error: function (result) {
  177. alert("Error");
  178. }
  179. });
  181. varJSONObject = { "ManagerID": $("#lblManagerName").text() };
  183. varjsonData = JSON.stringify(JSONObject);
  184. $.ajax({
  185. type: "POST",
  186. contentType: "application/json; charset=utf-8",
  187. url: "ManageEmployee.aspx/BindManagerProject",
  188. data: jsonData,
  189. dataType: "json",
  190. success: function (data) {
  191. $('#ddlProject').empty();
  192. $("#ddlProject").append($("
  193. <option></option>").val('0').html("--Select Project--"));
  194. $.each(data.d, function (key, value) {
  195. $("#ddlProject").append($("
  196. <option></option>").val(value.ProjectID).html(value.ProjectName));
  197. });
  198. },
  199. error: function (result) {
  200. alert("Error");
  201. }
  202. });
  203. e.preventDefault();
  205. $('#mask').hide();
  206. $('.window').hide();
  207. });
  209. //Add Employee
  210. $('#btnAddEmployee').click(function (e) {
  211. debugger;
  212. varempName = $('#txtName').val();
  213. var email = $('#txtEmail').val();
  214. var country = $('#ddlCountry').val();
  215. var project = $('#ddlProject').val();
  216. var manager = $('#ddlManager').val();
  218. varJSONObject = { "Name": empName, "Email": email, "Country": country, "Project": project, "Manager": manager };
  219. varjsonData = JSON.stringify(JSONObject);
  221. $.ajax({
  222. type: "POST",
  223. contentType: "application/json; charset=utf-8",
  224. url: "ManageEmployee.aspx/AddNewEmployee",
  225. data: jsonData,
  226. dataType: "json",
  227. success: function (data) {
  228. },
  229. error: function (result) {
  230. alert("Error");
  231. }
  232. });
  234. $('#gvData').empty();
  235. $.ajax({
  236. type: "POST",
  237. contentType: "application/json; charset=utf-8",
  238. url: "ManageEmployee.aspx/BindEmployees",
  239. data: "{}",
  240. dataType: "json",
  241. success: function (result) {
  242. for (var i = 0; i
  243. <result.d.length; i++) {
  244. $("#gvData").append("
  245. <tr>
  246. <td>" + result.d[i].ID + "</td>
  247. <td>" + result.d[i].Name + "</td>
  248. <td>" + result.d[i].Email + "</td>
  249. <td>" + result.d[i].Country + "</td>
  250. <td>" + result.d[i].ProjectID + "</td>
  251. <td>" + result.d[i].ManagerName + "</td>
  252. </tr>");
  253. }
  254. },
  255. error: function (result) {
  256. alert("Error");
  257. }
  258. });
  260. });
  261. });
  263. </script>
  264. </head>
  265. <body>
  266. <formid="form1"runat="server">
  267. <div>
  268. <tablestyle="width: 100%; text-align: center; border: solid5pxred; background-color: yellow; vertical-align: top;">
  269. <tr>
  270. <td>
  271. <div>
  272. <fieldsetstyle="width: 99%;">
  273. <legendstyle="font-size: 20pt; color: red; font-family: Verdana">jQuery Modal Popup Show with (Parent - Child window) Value dependency
  274. </legend>
  275. <tablestyle="width: 100%;">
  276. <tr>
  277. <tdstyle="vertical-align: top; width: 20%;">
  278. <tablestyle="background-color: skyblue; width: 100%; text-align: left;">
  279. <tr>
  280. <tdcolspan="2"style="background-color: #DF0101; color: white; border: 1pxsolidred; font-weight:bold; padding-left: 5px;">Add New Employee
  281. </td>
  282. </tr>
  283. <tr>
  284. <tdstyle="text-align: left; padding-left: 5px;">
  285. <asp:LabelID="lblName"runat="server"Text="Name:"Width="80px">
  286. </asp:Label>
  287. </td>
  288. <tdstyle="text-align: left;">
  289. <asp:TextBoxID="txtName"runat="server">
  290. </asp:TextBox>
  291. </td>
  292. </tr>
  293. <tr>
  294. <tdstyle="text-align: left; padding-left: 5px;">
  295. <asp:LabelID="Label1"runat="server"Text="Email:"Width="80px">
  296. </asp:Label>
  297. </td>
  298. <tdstyle="text-align: left;">
  299. <asp:TextBoxID="txtEmail"runat="server">
  300. </asp:TextBox>
  301. </td>
  302. </tr>
  303. <tr>
  304. <tdstyle="text-align: left; padding-left: 5px;">
  305. <asp:LabelID="Label2"runat="server"Text="Country:"Width="80px">
  306. </asp:Label>
  307. </td>
  308. <tdstyle="text-align: left;">
  309. <asp:DropDownListID="ddlCountry"runat="server">
  310. <asp:ListItemText="India"Value="India">
  311. </asp:ListItem>
  312. <asp:ListItemText="USA"Value="USA">
  313. </asp:ListItem>
  314. <asp:ListItemText="South Africa"Value="South Africa">
  315. </asp:ListItem>
  316. <asp:ListItemText="Singapore"Value="Singapore">
  317. </asp:ListItem>
  318. </asp:DropDownList>
  319. </td>
  320. </tr>
  321. <tr>
  322. <tdstyle="text-align: left; padding-left: 5px;">
  323. <asp:LabelID="Label3"runat="server"Text="Manager:"Width="80px">
  324. </asp:Label>
  325. </td>
  326. <tdstyle="text-align: left;">
  327. <asp:DropDownListID="ddlManager"runat="server">
  328. </asp:DropDownList>
  329. </td>
  330. </tr>
  331. <tr>
  332. <tdstyle="text-align: left; padding-left: 5px;">
  333. <asp:LabelID="Label4"runat="server"Text="Project:"Width="80px">
  334. </asp:Label>
  335. </td>
  336. <tdstyle="text-align: left;">
  337. <asp:DropDownListID="ddlProject"runat="server">
  338. </asp:DropDownList>
  339. <br/>
  340. <inputid="btnAddProject"type="submit"value="Add Project"style="width: 100px;"class="btnbtn-info"/>
  341. </td>
  342. </tr>
  343. <tr>
  344. <td></td>
  345. <td>
  346. <inputid="btnAddEmployee"type="submit"value="Add Employee"style="width: 140px;"class="btnbtn-info"/>
  347. </td>
  348. </tr>
  349. </table>
  350. </td>
  351. <tdstyle="vertical-align: top; background-color: green; text-align: center;">
  352. <asp:GridViewID="gvData"runat="server"CellPadding="4"ShowHeaderWhenEmpty="True"BackColor="White"BorderColor="#CC9966"BorderStyle="None"Width="100%"BorderWidth="1px">
  353. <FooterStyleBackColor="#FFFFCC"ForeColor="#330099"/>
  354. <HeaderStyleBackColor="#990000"Font-Bold="True"ForeColor="#FFFFCC"/>
  355. <PagerStyleBackColor="#FFFFCC"ForeColor="#330099"HorizontalAlign="Center"/>
  356. <RowStyleBackColor="White"ForeColor="#330099"/>
  357. <SelectedRowStyleBackColor="#FFCC66"Font-Bold="True"ForeColor="#663399"/>
  358. <SortedAscendingCellStyleBackColor="#FEFCEB"/>
  359. <SortedAscendingHeaderStyleBackColor="#AF0101"/>
  360. <SortedDescendingCellStyleBackColor="#F6F0C0"/>
  361. <SortedDescendingHeaderStyleBackColor="#7E0000"/>
  362. </asp:GridView>
  363. </td>
  364. </tr>
  365. </table>
  366. </fieldset>
  367. </div>
  368. </td>
  369. </tr>
  370. </table>
  371. </div>
  372. <divid="boxes">
  373. <divid="mask">
  374. <divid="dialog"class="window">
  375. <divid="headerBorder">
  376. Add New Project #
  378. <divid="close"class="close">[X]
  379. </div>
  380. </div>
  381. <tableclass="auto-style1">
  382. <tr>
  383. <tdstyle="text-align: left;">Manager Name:
  384. </td>
  385. <td>
  386. <asp:LabelID="lblManagerName"runat="server">
  387. </asp:Label>
  388. </td>
  389. </tr>
  390. <tr>
  391. <tdstyle="text-align: left;">Project Name:
  392. </td>
  393. <td>
  394. <inputtype="text"style="width: 300px;"id="txtProjectName"/>
  395. </td>
  396. </tr>
  397. <tr>
  398. <td></td>
  399. </tr>
  400. <tr>
  401. <td></td>
  402. <td>
  403. <buttonid="btnUpdate">Submit
  404. </button>
  406. <inputtype="reset"/>
  407. </td>
  408. </tr>
  409. </table>
  410. </div>
  411. </div>
  412. </div>
  413. </form>
  414. </body>
  415. </html>
The following is the aspx.cs code:
  1. using System;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Data;
  4. usingSystem.Data.SqlClient;
  5. usingSystem.Linq;
  6. usingSystem.Web;
  7. usingSystem.Web.Services;
  8. usingSystem.Web.UI;
  9. usingSystem.Web.UI.WebControls;
  11. namespacejQueryPopUp {
  12. publicpartialclassManageEmployee: System.Web.UI.Page {
  13. protectedvoidPage_Load(object sender, EventArgs e) {
  14. if (!Page.IsPostBack) {
  15. BindGridWithDummyRow();
  16. }
  17. }
  19. publicvoidBindGridWithDummyRow() {
  20. DataTabledt = newDataTable();
  21. dt.Columns.Add("ID");
  22. dt.Columns.Add("Name");
  23. dt.Columns.Add("Email");
  24. dt.Columns.Add("Country");
  25. dt.Columns.Add("ProjectID");
  26. dt.Columns.Add("ManagerName");
  27. gvData.DataSource = dt;
  28. gvData.DataBind();
  29. }
  31. [WebMethod]
  32. publicstaticEmployee[] BindEmployees() {
  33. stringconnectionString = @
  34. "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
  35. DataTabledt = newDataTable();
  36. List < Employee > employeeList = newList < Employee > ();
  37. using(SqlConnection con = newSqlConnection(connectionString)) {
  38. using(SqlCommand command = newSqlCommand("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)) {
  39. con.Open();
  40. SqlDataAdapter da = newSqlDataAdapter(command);
  41. da.Fill(dt);
  42. foreach(DataRowdtrowindt.Rows) {
  43. Employeeemployee = newEmployee();
  44. employee.ID = Convert.ToInt32(dtrow["ID"].ToString());
  45. employee.Name = dtrow["Name"].ToString();
  46. employee.Email = dtrow["Email"].ToString();
  47. employee.Country = dtrow["Country"].ToString();
  48. employee.ProjectID = dtrow["ProjectName"].ToString();
  49. employee.ManagerName = dtrow["ManagerName"].ToString();
  50. employeeList.Add(employee);
  51. }
  52. }
  53. }
  54. returnemployeeList.ToArray();
  55. }
  57. [WebMethod]
  58. publicstaticEmployee[] BindManager() {
  59. stringconnectionString = @
  60. "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
  61. DataTabledt = newDataTable();
  62. List < Employee > employeeList = newList < Employee > ();
  63. using(SqlConnection con = newSqlConnection(connectionString)) {
  64. using(SqlCommand command = newSqlCommand("SELECT DISTINCT ProjectLeader from Project", con)) {
  65. con.Open();
  66. SqlDataAdapter da = newSqlDataAdapter(command);
  67. da.Fill(dt);
  68. foreach(DataRowdtrowindt.Rows) {
  69. Employeeemployee = newEmployee();
  70. employee.ManagerName = dtrow["ProjectLeader"].ToString();
  71. employeeList.Add(employee);
  72. }
  73. }
  74. }
  75. returnemployeeList.ToArray();
  76. }
  78. [WebMethod]
  79. publicstaticEmployee[] BindManagerProject(stringManagerID) {
  80. stringconnectionString = @
  81. "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
  82. DataTabledt = newDataTable();
  83. List < Employee > employeeList = newList < Employee > ();
  84. using(SqlConnection con = newSqlConnection(connectionString)) {
  85. using(SqlCommand command = newSqlCommand("SELECT ProjectID, ProjectName from Project WHERE ProjectLeader='" + ManagerID + "'", con)) {
  86. con.Open();
  87. SqlDataAdapter da = newSqlDataAdapter(command);
  88. da.Fill(dt);
  89. foreach(DataRowdtrowindt.Rows) {
  90. Employeeemployee = newEmployee();
  91. employee.ProjectID = dtrow["ProjectID"].ToString();
  92. employee.ProjectName = dtrow["ProjectName"].ToString();
  93. employeeList.Add(employee);
  94. }
  95. }
  96. }
  97. returnemployeeList.ToArray();
  98. }
  100. [WebMethod]
  101. publicstaticvoidAddProjectWithManager(string Manager, string Project) {
  102. stringconnectionString = @
  103. "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
  104. DataTabledt = newDataTable();
  105. List < Employee > employeeList = newList < Employee > ();
  106. using(SqlConnection con = newSqlConnection(connectionString)) {
  107. using(SqlCommand command = newSqlCommand("INSERT INTO Project (ProjectName, ProjectLeader) VALUES ('" + Project + "' , '" + Manager + "')", con)) {
  108. con.Open();
  109. SqlDataAdapter da = newSqlDataAdapter(command);
  110. da.Fill(dt);
  111. }
  112. }
  113. }
  115. [WebMethod]
  116. publicstaticvoidAddNewEmployee(string Name, string Email, string Country, string Project, string Manager) {
  117. stringconnectionString = @
  118. "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";
  119. DataTabledt = newDataTable();
  120. List < Employee > employeeList = newList < Employee > ();
  121. using(SqlConnection con = newSqlConnection(connectionString)) {
  122. using(SqlCommand command = newSqlCommand("INSERT INTO Employee (Name, Email, Country, ProjectID, ManagerName) VALUES ('" + Name + "' , '" + Email + "' , '" + Country + "' , '" + Project + "' , '" + Manager + "')", con)) {
  123. con.Open();
  124. SqlDataAdapter da = newSqlDataAdapter(command);
  125. da.Fill(dt);
  126. }
  127. }
  128. }
  129. }
  130. }
The following is the Employee class:
  1. using System;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  6. namespacejQueryPopUp {
  7. publicclassEmployee {
  8. publicint ID {
  9. get;
  10. set;
  11. }
  12. publicstring Name {
  13. get;
  14. set;
  15. }
  16. publicstring Email {
  17. get;
  18. set;
  19. }
  20. publicstring Country {
  21. get;
  22. set;
  23. }
  24. publicstringProjectID {
  25. get;
  26. set;
  27. }
  28. publicstringProjectName {
  29. get;
  30. set;
  31. }
  32. publicstringManagerName {
  33. get;
  34. set;
  35. }
  36. }
  37. }
Now run your application.

Here this screen will show the entire employee list and you can add a new employee from here:

employee from
Figure 3.

Now when adding a new employee we need to select a manager as in the following:

adding new employee
Figure 4.

On selecting a manager a Project drop down will fill:

manager
Figure 5.

If you want to add a new project under the selected manager then click on the Add Project button. You will see a child window showing the value from the parent window, Manager Name.

add new project
Figure 6.

Now add a new project and you will see this new project is showing in the project drop down. In other words after adding a project I am refresing the parent window with the current values in the database as in the following:

select project
Figure 7.

Now add an employee and it will show in the grid:

output
Figure 8.