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

100

Article

DisplayGridViewRowDataInjQueryDialogModalPopup.zip

This article explains how to show selected GridView row cell values inside a jQuery Modal Dialog in ASP.Net.

Go to Start, All Programs and open Microsoft Visual Studio 2013.
Now, click on File, then select New Project and click on Visual C#. Then select ASP.NET Web Application, Empty and press OK.
Provide the web application name and location as you wish. I named my web application DisplayGridViewRowDataInjQueryDialogModalPopup.
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.
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>
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. }
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>
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>
Now run the application and you can see it in your browser.
Now I am selecting EmpId 2. See, the empid 2 row cell values will be displayed in the jQuery UI Modal Dialog.

Up Next

Ebook Download

View all

Getting Started with ASP.NET 4.5 Web Forms and Visual Studio 2013

Read by 7.6k people

Download Now!

Learn

View all