Display GridView Row details inside jQuery Dialog Modal Popup with MasterPage in ASP.Net

Hi Shahzad786,

Check this example. Now please take its reference and correct your code.

HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <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="customerId"></span>
        <br />
        <b>Name:</b> <span id="name"></span>
        <br />
        <b>Description:</b> <span id="description"></span>
    </div>
    <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" />
    <script type="text/javascript">
        $(document).on("click", "[id*=lnkView]", function () {
            $("[id*=customerId]").html($(".Id", $(this).closest("tr")).html());
            $("[id*=name]").html($(".Name", $(this).closest("tr")).html());
            $("[id*=description]").html($(".Description", $(this).closest("tr")).html());
            $("#dialog").dialog({
                title: "View Details",
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            return false;
        });
    </script>
</asp:Content>

Code

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

Screenshot