Post
Ask Question

ASP.Net jQuery and JSON Showing Modal Popup With (Parent - Child Window) Value Dependency

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. }  
  19.   
  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. });  
  44.   
  45.   
  46. $('#ddlManager').change(function () {  
  47. varSelectedText = $(this).find(":selected").text();  
  48. varSelectedValue = $(this).val();  
  49. varJSONObject = { "ManagerID": SelectedText };  
  50.   
  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. });  
  72.   
  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>");  
  113.   
  114. }  
  115. }  
  116. },  
  117. error: function (result) {  
  118. alert("Error");  
  119. }  
  120. });  
  121.   
  122.   
  123. $('#btnAddProject').click(function () {  
  124. var id = '#dialog';  
  125.   
  126. varManagerName = $('#ddlManager').val();  
  127. varManagerText = $('#ddlManager :selected').text();  
  128.   
  129. $("#lblManagerName").text(ManagerName);  
  130. varmaskHeight = $(document).height();  
  131. varmaskWidth = $(document).width();  
  132.   
  133. $('#mask').css({ 'width': maskWidth, 'height': maskHeight });  
  134.   
  135. //transition effect  
  136. $('#mask').fadeIn(1000);  
  137. $('#mask').fadeTo("slow", 0.8);  
  138.   
  139. //Get the window height and width  
  140. varwinH = $(window).height();  
  141. varwinW = $(window).width();  
  142.   
  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);  
  146.   
  147. //transition effect  
  148. $(id).fadeIn(2000);  
  149.   
  150. returnfalse;  
  151. //if close button is clicked  
  152.   
  153. });  
  154.   
  155. $('.window .close').click(function (e) {  
  156. e.preventDefault();  
  157. $('#mask').hide();  
  158. $('.window').hide();  
  159. });  
  160.   
  161. $('#btnUpdate').click(function (e) {  
  162.   
  163. var Manager = $('#lblManagerName').text();  
  164. var Project = $('#txtProjectName').val();  
  165. varJSONObject = { "Manager": Manager, "Project": Project };  
  166. varjsonData = JSON.stringify(JSONObject);  
  167.   
  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. });  
  180.   
  181. varJSONObject = { "ManagerID": $("#lblManagerName").text() };  
  182.   
  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();  
  204.   
  205. $('#mask').hide();  
  206. $('.window').hide();  
  207. });  
  208.   
  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();  
  217.   
  218. varJSONObject = { "Name": empName, "Email": email, "Country": country, "Project": project, "Manager": manager };  
  219. varjsonData = JSON.stringify(JSONObject);  
  220.   
  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. });  
  233.   
  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. });  
  259.   
  260. });  
  261. });  
  262.   
  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 #  
  377.   
  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>  
  405.    
  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;  
  10.   
  11. namespacejQueryPopUp {  
  12.     publicpartialclassManageEmployee: System.Web.UI.Page {  
  13.         protectedvoidPage_Load(object sender, EventArgs e) {  
  14.             if (!Page.IsPostBack) {  
  15.                 BindGridWithDummyRow();  
  16.             }  
  17.         }  
  18.   
  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.         }  
  30.   
  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.         }  
  56.   
  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.         }  
  77.   
  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.         }  
  99.   
  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.         }  
  114.   
  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;  
  5.   
  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.

 


Similar Articles