In this article I will explain with an example, how to display GridView Row details in jQuery UI Dialog Modal Popup in ASP.Net.
When View Button is clicked, the GridView Row is referenced and the values of each Column are fetched and displayed in jQuery UI Dialog Modal Popup in ASP.Net.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView with three BoundField columns and a TemplateField column and an HTML DIV which will be used to display the jQuery UI Dialog Modal Popup.
The ItemStyle-CssClass property for each BoundField columns has been set, so that using jQuery we can access the particular cell of the GridView Row.
There is a LinkButton inside the TemplateField column which will be used to display the GridView Row details in jQuery UI Dialog Modal Popup.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Description" ItemStyle-CssClass="Description" HeaderText="Description"
            ItemStyle-Width="150" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton Text="View" ID="lnkView" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<div id="dialog" style="display: none">
    <b>Id:</b> <span id="id"></span>
    <br />
    <b>Name:</b> <span id="name"></span>
    <br />
    <b>Description:</b> <span id="description"></span>
</div>
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the GridView control
Inside the Page Load event of the page, GridView is populated with a dynamic DataTable with some dummy data.
Note: You can learn more about this technique in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Description",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.");
        dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");
        dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.");
        dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)),
                            New DataColumn("Name", GetType(String)),
                            New DataColumn("Description", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.")
        dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.")
        dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.")
        dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Displaying GridView Row details in jQuery UI Dialog Modal Popup on LinkButton click
A jQuery click event handler is attached to the LinkButton. When the LinkButton is clicked, the values are fetched from the GridView cells of the selected row using their respective CSS class names and are set inside the HTML SPAN tag within the jQuery Dialog DIV.
Once the values are set the jQuery Dialog is displayed.
Note: You can learn more about jQuery Dialog in my article Simple jQuery Modal Popup Window Example in ASP.Net.
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).on("click", "[id*=lnkView]", function () {
        $("#id").html($(".Id", $(this).closest("tr")).html());
        $("#name").html($(".Name", $(this).closest("tr")).html());
        $("#description").html($(".Description", $(this).closest("tr")).html());
        $("#dialog").dialog({
            title: "View Details",
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
        return false;
    });
</script>
 
 
Screenshot
Display GridView Row details inside jQuery Dialog Modal Popup in ASP.Net
 
 
Demo
View Demo
 
 
Downloads