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.
- <div align="center">
- <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" runat="server" AutoGenerateColumns="false">
- <Columns>
- <asp:BoundField DataField="EmpId" ItemStyle-CssClass="EmpId" HeaderText="EmpId" />
- <asp:BoundField DataField="EmpName" ItemStyle-CssClass="EmpName" HeaderText="EmpName" />
- <asp:BoundField DataField="EmpSalary" ItemStyle-CssClass="EmpSalary" HeaderText="EmpSalary" />
- <asp:BoundField DataField="Dept" ItemStyle-CssClass="Dept" HeaderText="Department" />
- <asp:TemplateField>
- <ItemTemplate>
- <asp:LinkButton Text="View" ID="lnkView" runat="server" />
- </ItemTemplate>
- </asp:TemplateField>
- </Columns>
- </asp:GridView>
- <div id="dialog" style="display: none">
- <table>
- <tr>
- <td>EmpId</td>
- <td>
- <asp:Label ID="lblEmpId" runat="server"></asp:Label>
- </td>
- </tr>
- <tr>
- <td>EmpName</td>
- <td>
- <asp:Label ID="lblEmpName" runat="server"></asp:Label>
- </td>
- </tr>
- <tr>
- <td>EmpSalary</td>
- <td>
- <asp:Label ID="lblEmpSalary" runat="server"></asp:Label>
- </td>
- </tr>
- <tr>
- <td>Department</td>
- <td>
- <asp:Label ID="lblDept" runat="server"></asp:Label>
- </td>
- </tr>
- </table>
- </div>
- </div>
- Add the following code to the page load event of the WebForm1.aspx.cs page.
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!this.IsPostBack)
- {
- DataTable dt = new DataTable();
- dt.Columns.Add("EmpId");
- dt.Columns.Add("EmpName");
- dt.Columns.Add("EmpSalary");
- dt.Columns.Add("Dept");
- dt.Rows.Add(1, "JACKSON", 75000, "RESEARCH");
- dt.Rows.Add(2, "JOHNSON", 18000, "ACCOUNTING");
- dt.Rows.Add(3, "GRANT", 32000, "SALES");
- dt.Rows.Add(4, "ADAMS", 34000, "OPERATIONS");
- GridView1.DataSource = dt;
- GridView1.DataBind();
- }
- }
- 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.
- <head runat="server">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
- <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
- </head>
- Add another <script> tag between the <head> tag and write the following code in it.
- <script type="text/javascript">
- $(document).on("click", "[id*=lnkView]", function () {
- $("[id*=lblEmpId]").html($(".EmpId", $(this).closest("tr")).html());
- $("[id*=lblEmpName]").html($(".EmpName", $(this).closest("tr")).html());
- $("[id*=lblEmpSalary]").html($(".EmpSalary", $(this).closest("tr")).html());
- $("[id*=lblDept]").html($(".Dept", $(this).closest("tr")).html());
- $("#dialog").dialog({
- title: "View Employee Details",
- buttons: {
- Ok: function () {
- $(this).dialog('close');
- }
- },
- modal: true
- });
- return false;
- });
- </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.
![]()