Post
Ask Question

Show Modal Popup Window Using jQuery

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

table design
Figure 1.

The following is the script of the 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] PRIMARYKEY CLUSTERED  
  9. (  
  10.    [ID] ASC  
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,  
  12. IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  13. ) ON [PRIMARY]  
  14. GO  

Currently the following is the data in my table:

data in my table
Figure 2.

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

The following is my aspx,
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryModalPopup.Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5. <head runat="server">  
  6.     <title>Modal Popup using jQuery</title>  
  7.     <script src="Scripts/jquery-2.1.4.min.js"></script>  
  8.     <link href="StyleSheet1.css" rel="stylesheet" />  
  9.     <script src="Scripts/jquery-ui.min.js"></script>  
  10.     <style type="text/css">  
  11.         .auto-style1 {  
  12.             width: auto;  
  13.             position: relative;  
  14.             left: 20px;  
  15.             width: 100%;  
  16.         }  
  17.     </style>  
  18.     <script type="text/javascript">  
  19.         $(document).ready(function() {  
  20.             $('#gvData').empty();  
  21.             $.ajax({  
  22.                 type: "POST",  
  23.                 contentType: "application/json; charset=utf-8",  
  24.                 url: "Default.aspx/BindEmployees",  
  25.                 data: "{}",  
  26.                 dataType: "json",  
  27.                 success: function(result) {  
  28.                     $("#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>");  
  29.                     for (var i = 0; i < result.d.length; i++) {  
  30.                         if (i % 2 == 0) {  
  31.                             $("#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>");  
  32.                         } else {  
  33.                             $("#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>");  
  34.                         }  
  35.                     }  
  36.                 },  
  37.                 error: function(result) {  
  38.                     alert("Error");  
  39.                 }  
  40.             });  
  41.             //Open Modal Popup  
  42.             $('#btnAddEmployee').click(function() {  
  43.                 var id = '#dialog';  
  44.                 var maskHeight = $(document).height();  
  45.                 var maskWidth = $(document).width();  
  46.                 $('#mask').css({  
  47.                     'width': maskWidth,  
  48.                     'height': maskHeight  
  49.                 });  
  50.                 $('#mask').fadeIn(1000);  
  51.                 $('#mask').fadeTo("slow", 0.8);  
  52.                 var winH = $(window).height();  
  53.                 var winW = $(window).width();  
  54.                 $(id).css('top', winH / 2 - $(id).height() / 2);  
  55.                 $(id).css('left', winW / 2 - $(id).width() / 2);  
  56.                 //transition effect  
  57.                 $(id).fadeIn(2000);  
  58.                 returnfalse;  
  59.             });  
  60.             $('.window .close').click(function(e) {  
  61.                 e.preventDefault();  
  62.                 $('#mask').hide();  
  63.                 $('.window').hide();  
  64.             });  
  65.             //Add New Employee  
  66.             //===========================================  
  67.             $('#btnSubmitEmployee').click(function(e) {  
  68.                 var empName = $('#txtName').val();  
  69.                 var email = $('#txtEmail').val();  
  70.                 var country = $('#ddlCountry').val();  
  71.                 var project = $('#ddlProject').val();  
  72.                 var manager = $('#ddlManager').val();  
  73.                 var JSONObject = {  
  74.                     "Name": empName,  
  75.                     "Email": email,  
  76.                     "Country": country,  
  77.                     "Project": project,  
  78.                     "Manager": manager  
  79.                 };  
  80.                 var jsonData = JSON.stringify(JSONObject);  
  81.                 $.ajax({  
  82.                     type: "POST",  
  83.                     contentType: "application/json; charset=utf-8",  
  84.                     url: "Default.aspx/AddNewEmployee",  
  85.                     data: jsonData,  
  86.                     dataType: "json",  
  87.                     success: function(data) {},  
  88.                     error: function(result) {  
  89.                         alert("Error");  
  90.                     }  
  91.                 });  
  92.                 $('#gvData').empty();  
  93.                 $.ajax({  
  94.                     type: "POST",  
  95.                     contentType: "application/json; charset=utf-8",  
  96.                     url: "Default.aspx/BindEmployees",  
  97.                     data: "{}",  
  98.                     dataType: "json",  
  99.                     success: function(result) {  
  100.                         $("#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>");  
  101.                         for (var i = 0; i < result.d.length; i++) {  
  102.                             if (i % 2 == 0) {  
  103.                                 $("#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>");  
  104.                             } else {  
  105.                                 $("#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>");  
  106.                             }  
  107.                         }  
  108.                     },  
  109.                     error: function(result) {  
  110.                         alert("Error");  
  111.                     }  
  112.                 });  
  113.             });  
  114.             //===========================================  
  115.         });  
  116.     </script>  
  117. </head>  
  118.   
  119. <body>  
  120.     <form id="form1" runat="server">  
  121.         <div>  
  122.             <table style="width: 100%; text-align: center; border: solid 5px red; background-color: blue; vertical-align: top;">  
  123.                 <tr>  
  124.                     <td>  
  125.                         <div>  
  126.                             <fieldset style="width: 99%;">  
  127.                                 <legend style="font-size: 20pt; color: white; font-family: Verdana">jQuery Modal Popup Show</legend>  
  128.                                 <table style="width: 100%;">  
  129.                                     <tr>  
  130.                                         <td>  
  131.                                             <input id="btnAddEmployee" type="submit" value="Add Employee" style="width: 140px;" class="btn btn-info" />  
  132.                                         </td>  
  133.                                     </tr>  
  134.                                     <tr>  
  135.                                         <td style="vertical-align: top; background-color: #9DD1F1; text-align: center;">  
  136.                                             <asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="True" BackColor="White" GridLines="Both" BorderColor="#CC9966" BorderStyle="None" Width="90%" BorderWidth="1px" HorizontalAlign="Center">  
  137.                                                 <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />  
  138.                                                 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />  
  139.                                                 <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />  
  140.                                                 <RowStyle BackColor="White" ForeColor="#330099" />  
  141.                                                 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />  
  142.                                                 <SortedAscendingCellStyle BackColor="#FEFCEB" />  
  143.                                                 <SortedAscendingHeaderStyle BackColor="#AF0101" />  
  144.                                                 <SortedDescendingCellStyle BackColor="#F6F0C0" />  
  145.                                                 <SortedDescendingHeaderStyle BackColor="#7E0000" />  
  146.                                             </asp:GridView>  
  147.                                         </td>  
  148.                                     </tr>  
  149.                                 </table>  
  150.                             </fieldset>  
  151.                         </div>  
  152.                     </td>  
  153.                 </tr>  
  154.             </table>  
  155.         </div>  
  156.         <div id="boxes">  
  157.             <div id="mask">  
  158.                 <div id="dialog" class="window">  
  159.                     <div id="headerBorder"> Add New Employee # <div id="close" class="close">[X]</div>  
  160.                     </div>  
  161.                     <table style="background-color: skyblue; width: 100%; text-align: left;">  
  162.                         <tr>  
  163.                             <td style="text-align: left; padding-left: 5px;">  
  164.                                 <asp:Label ID="lblName" runat="server" Text="Name:" Width="80px"></asp:Label>  
  165.                             </td>  
  166.                             <td style="text-align: left;">  
  167.                                 <asp:TextBox ID="txtName" runat="server"></asp:TextBox>  
  168.                             </td>  
  169.                         </tr>  
  170.                         <tr>  
  171.                             <td style="text-align: left; padding-left: 5px;">  
  172.                                 <asp:Label ID="Label1" runat="server" Text="Email:" Width="80px"></asp:Label>  
  173.                             </td>  
  174.                             <td style="text-align: left;">  
  175.                                 <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>  
  176.                             </td>  
  177.                         </tr>  
  178.                         <tr>  
  179.                             <td style="text-align: left; padding-left: 5px;">  
  180.                                 <asp:Label ID="Label2" runat="server" Text="Country:" Width="80px"></asp:Label>  
  181.                             </td>  
  182.                             <td style="text-align: left;">  
  183.                                 <asp:DropDownList ID="ddlCountry" runat="server">  
  184.                                     <asp:ListItem Text="India" Value="India"></asp:ListItem>  
  185.                                     <asp:ListItem Text="USA" Value="USA"></asp:ListItem>  
  186.                                     <asp:ListItem Text="South Africa" Value="South Africa"></asp:ListItem>  
  187.                                     <asp:ListItem Text="Singapore" Value="Singapore"></asp:ListItem>  
  188.                                 </asp:DropDownList>  
  189.                             </td>  
  190.                         </tr>  
  191.                         <tr>  
  192.                             <td style="text-align: left; padding-left: 5px;">  
  193.                                 <asp:Label ID="Label3" runat="server" Text="Manager:" Width="80px"></asp:Label>  
  194.                             </td>  
  195.                             <td style="text-align: left;">  
  196.                                 <asp:DropDownList ID="ddlManager" runat="server">  
  197.                                     <asp:ListItem Text="Shambhu Sharma" Value="Shambhu Sharma"></asp:ListItem>  
  198.                                     <asp:ListItem Text="Hemant Chopra" Value="Hemant Chopra"></asp:ListItem>  
  199.                                     <asp:ListItem Text="Mohit Kalra" Value="Mohit Kalra"></asp:ListItem>  
  200.                                     <asp:ListItem Text="Vishwa M Goswami" Value="Vishwa M Goswami"></asp:ListItem>  
  201.                                 </asp:DropDownList>  
  202.                             </td>  
  203.                         </tr>  
  204.                         <tr>  
  205.                             <td style="text-align: left; padding-left: 5px;">  
  206.                                 <asp:Label ID="Label4" runat="server" Text="Project:" Width="80px"></asp:Label>  
  207.                             </td>  
  208.                             <td style="text-align: left;">  
  209.                                 <asp:DropDownList ID="ddlProject" runat="server">  
  210.                                     <asp:ListItem Text="AMX" Value="1"></asp:ListItem>  
  211.                                     <asp:ListItem Text="HWN" Value="2"></asp:ListItem>  
  212.                                     <asp:ListItem Text="CSR" Value="3"></asp:ListItem>  
  213.                                     <asp:ListItem Text="RDS" Value="4"></asp:ListItem>  
  214.                                 </asp:DropDownList>  
  215.                             </td>  
  216.                         </tr>  
  217.                         <tr>  
  218.                             <td></td>  
  219.                             <td>  
  220.                                 <input id="btnSubmitEmployee" type="submit" value="Add Employee" style="width: 140px;" class="btn btn-info" />  
  221.                             </td>  
  222.                         </tr>  
  223.                     </table>  
  224.                 </div>  
  225.             </div>  
  226.         </div>  
  227.     </form>  
  228. </body>  
  229.   
  230. </html>  

Now my aspx.cs is,

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Data.SqlClient;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Services;  
  8. using System.Web.UI;  
  9. using System.Web.UI.WebControls;  
  10. namespace jQueryModalPopup {  
  11.     public partial class Default: System.Web.UI.Page {  
  12.         protectedvoid Page_Load(object sender, EventArgs e) {  
  13.             if (!Page.IsPostBack) {  
  14.                 BindGridWithDummyRow();  
  15.             }  
  16.         }  
  17.         publicvoid BindGridWithDummyRow() {  
  18.                 DataTable dt = new DataTable();  
  19.                 dt.Columns.Add("ID");  
  20.                 dt.Columns.Add("Name");  
  21.                 dt.Columns.Add("Email");  
  22.                 dt.Columns.Add("Country");  
  23.                 dt.Columns.Add("ProjectID");  
  24.                 dt.Columns.Add("ManagerName");  
  25.                 gvData.DataSource = dt;  
  26.                 gvData.DataBind();  
  27.             }  
  28.             [WebMethod]  
  29.         publicstatic Employee[] BindEmployees() {  
  30.                 string connectionString = @ "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";  
  31.                 DataTable dt = new DataTable();  
  32.                 List < Employee > employeeList = new List < Employee > ();  
  33.                 using(SqlConnection con = new SqlConnection(connectionString)) {  
  34.                     using(SqlCommand command = new SqlCommand("select e.ID, e.Name,e.Email,e.Country,ProjectName,e.ManagerName from Employee as e Inner join project as p on e.ProjectID=p.ProjectID", con)) {  
  35.                         con.Open();  
  36.                         SqlDataAdapter da = new SqlDataAdapter(command);  
  37.                         da.Fill(dt);  
  38.                         foreach(DataRow dtrow in dt.Rows) {  
  39.                             Employee employee = new Employee();  
  40.                             employee.ID = Convert.ToInt32(dtrow["ID"].ToString());  
  41.                             employee.Name = dtrow["Name"].ToString();  
  42.                             employee.Email = dtrow["Email"].ToString();  
  43.                             employee.Country = dtrow["Country"].ToString();  
  44.                             employee.ProjectID = dtrow["ProjectName"].ToString();  
  45.                             employee.ManagerName = dtrow["ManagerName"].ToString();  
  46.                             employeeList.Add(employee);  
  47.                         }  
  48.                     }  
  49.                 }  
  50.                 return employeeList.ToArray();  
  51.             }  
  52.             [WebMethod]  
  53.         publicstaticvoid AddNewEmployee(string Name, string Email, string Country, string Project, string Manager) {  
  54.             string connectionString = @ "Data Source=INDIA\MSSQLServer2k8; Initial Catalog= TestDB; Integrated Security=true;";  
  55.             DataTable dt = new DataTable();  
  56.             List < Employee > employeeList = new List < Employee > ();  
  57.             using(SqlConnection con = new SqlConnection(connectionString)) {  
  58.                 using(SqlCommand command = new SqlCommand("INSERT INTO Employee (Name, Email, Country, ProjectID, ManagerName) VALUES ('" + Name + "' , '" + Email + "' , '" + Country + "' , '" + Project + "' , '" + Manager + "')", con)) {  
  59.                     con.Open();  
  60.                     SqlDataAdapter da = new SqlDataAdapter(command);  
  61.                     da.Fill(dt);  
  62.                 }  
  63.             }  
  64.         }  
  65.     }  
  66. }  

Here I am using an Employee Class,

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace jQueryModalPopup {  
  6.     publicclass Employee {  
  7.         publicint ID {  
  8.             get;  
  9.             set;  
  10.         }  
  11.         publicstring Name {  
  12.             get;  
  13.             set;  
  14.         }  
  15.         publicstring Email {  
  16.             get;  
  17.             set;  
  18.         }  
  19.         publicstring Country {  
  20.             get;  
  21.             set;  
  22.         }  
  23.         publicstring ProjectID {  
  24.             get;  
  25.             set;  
  26.         }  
  27.         publicstring ProjectName {  
  28.             get;  
  29.             set;  
  30.         }  
  31.         publicstring ManagerName {  
  32.             get;  
  33.             set;  
  34.         }  
  35.     }  
  36. }  

code
Figure 3.

Now run your application to check.

run your application
Figure 4.

Click on the Add Employee button.

Add Employee button
Figure 5.

Enter values and click on the Add Employee button to save the information.

Add Employee button to save information
Figure 6.


Similar Articles