Post
Ask Question

Display Selected GridView Row Cell Values Inside jQuery Modal Dialog in ASP.NET

This article explains how to show selected GridView row cell values inside a jQuery Modal Dialog in ASP.Net.
  1. Go to Start, All Programs and open Microsoft Visual Studio 2013.

  2. Now, click on File, then select New Project and click on Visual C#. Then select ASP.NET Web Application, Empty and press OK.

  3. Provide the web application name and location as you wish. I named my web application DisplayGridViewRowDataInjQueryDialogModalPopup.

  4. Now the project will be opened. Right-click on the web application name, add a New Item and select Web Form. Then click on Add.

  5. Add the following code between the <form> tags of the WebForm1.aspx page.
    1. <div align="center">    
    2.         <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" runat="server" AutoGenerateColumns="false">    
    3.                 <Columns>    
    4.                     <asp:BoundField DataField="EmpId" ItemStyle-CssClass="EmpId" HeaderText="EmpId" />    
    5.                     <asp:BoundField DataField="EmpName" ItemStyle-CssClass="EmpName" HeaderText="EmpName" />    
    6.                     <asp:BoundField DataField="EmpSalary" ItemStyle-CssClass="EmpSalary" HeaderText="EmpSalary" />    
    7.                     <asp:BoundField DataField="Dept" ItemStyle-CssClass="Dept" HeaderText="Department" />    
    8.                     <asp:TemplateField>    
    9.                         <ItemTemplate>    
    10.                             <asp:LinkButton Text="View" ID="lnkView" runat="server" />    
    11.                         </ItemTemplate>    
    12.                     </asp:TemplateField>    
    13.                 </Columns>    
    14.             </asp:GridView>    
    15.             <div id="dialog" style="display: none">    
    16.                 <table>    
    17.                 <tr>    
    18.                     <td>EmpId</td>    
    19.                     <td>    
    20.                         <asp:Label ID="lblEmpId" runat="server"></asp:Label>    
    21.                     </td>    
    22.                 </tr>    
    23.                 <tr>    
    24.                     <td>EmpName</td>    
    25.                     <td>    
    26.                         <asp:Label ID="lblEmpName" runat="server"></asp:Label>    
    27.                     </td>    
    28.                 </tr>    
    29.                 <tr>    
    30.                     <td>EmpSalary</td>    
    31.                     <td>    
    32.                         <asp:Label ID="lblEmpSalary" runat="server"></asp:Label>    
    33.                     </td>    
    34.                 </tr>    
    35.                 <tr>    
    36.                     <td>Department</td>    
    37.                     <td>    
    38.                         <asp:Label ID="lblDept" runat="server"></asp:Label>    
    39.                     </td>    
    40.                 </tr>    
    41.             </table>    
    42.             </div>    
    43. </div>   
  6.  Add the following code to the page load event of the WebForm1.aspx.cs page.
    1. protected void Page_Load(object sender, EventArgs e)      
    2. {      
    3.     if (!this.IsPostBack)      
    4.     {      
    5.         DataTable dt = new DataTable();      
    6.         dt.Columns.Add("EmpId");      
    7.         dt.Columns.Add("EmpName");      
    8.         dt.Columns.Add("EmpSalary");      
    9.         dt.Columns.Add("Dept");      
    10.         dt.Rows.Add(1, "JACKSON", 75000, "RESEARCH");      
    11.         dt.Rows.Add(2, "JOHNSON", 18000, "ACCOUNTING");      
    12.         dt.Rows.Add(3, "GRANT", 32000, "SALES");      
    13.         dt.Rows.Add(4, "ADAMS", 34000, "OPERATIONS");      
    14.         GridView1.DataSource = dt;      
    15.         GridView1.DataBind();      
    16.     }      
    17. }    
  7.  Add a <script> tag between the <head> tag of the WebForm1.aspx page. You need to provide a reference for jQuery as in the following.
    1. <head runat="server">        
    2.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    3.     <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>    
    4.     <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />        
    5. </head>  
  8.  Add another <script> tag between the <head> tag and write the following code in it.
    1. <script type="text/javascript">    
    2.         $(document).on("click", "[id*=lnkView]", function () {    
    3.             $("[id*=lblEmpId]").html($(".EmpId", $(this).closest("tr")).html());    
    4.             $("[id*=lblEmpName]").html($(".EmpName", $(this).closest("tr")).html());    
    5.             $("[id*=lblEmpSalary]").html($(".EmpSalary", $(this).closest("tr")).html());    
    6.             $("[id*=lblDept]").html($(".Dept", $(this).closest("tr")).html());    
    7.             $("#dialog").dialog({    
    8.                 title: "View Employee Details",    
    9.                 buttons: {    
    10.                     Ok: function () {    
    11.                         $(this).dialog('close');    
    12.                     }    
    13.                 },    
    14.                 modal: true    
    15.             });    
    16.             return false;    
    17.         });    
    18. </script>   
  9. Now run the application and you can see it in your browser.
  10. Now I am selecting EmpId 2. See, the empid 2 row cell values will be displayed in the jQuery UI Modal Dialog. 



Similar Articles