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.