Display PDF in Modal Popup on ASP.Net GridView LinkButton click using jQuery

Hi paulrajmca,

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

HTML

<div>
    <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
        runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" />
            <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" />
            <asp:BoundField DataField="Description" ItemStyle-CssClass="Description" HeaderText="Description" />
            <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>
</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 rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" />
<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());
        var fileName = $(".Name", $(this).closest("tr")).html();
        $("#dialog").dialog({
            title: "View Details",
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            open: function () {
                var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"300px\" height=\"200px\">";
                object += "If you are unable to view file, you can download from <a href=\"{FileName}\">here</a>";
                object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
                object += "</object>";
                object = object.replace(/{FileName}/g, "Files/" + fileName);
                $("#dialog").html(object);
            },
            modal: true
        });
        return false;
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[3] { 
                        new System.Data.DataColumn("Id", typeof(int)),
                        new System.Data.DataColumn("Name", typeof(string)),
                        new System.Data.DataColumn("Description",typeof(string)) });
        dt.Rows.Add(1, "Chapter1.pdf", "Description 1");
        dt.Rows.Add(2, "Chapter2.pdf", "Description 2");
        dt.Rows.Add(3, "Chapter3.pdf", "Description 3");
        dt.Rows.Add(4, "Chapter4.pdf", "Description 4");
        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 System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn(2) {New System.Data.DataColumn("Id", GetType(Integer)), New System.Data.DataColumn("Name", GetType(String)), New System.Data.DataColumn("Description", GetType(String))})
        dt.Rows.Add(1, "Chapter1.pdf", "Description 1")
        dt.Rows.Add(2, "Chapter2.pdf", "Description 2")
        dt.Rows.Add(3, "Chapter3.pdf", "Description 3")
        dt.Rows.Add(4, "Chapter4.pdf", "Description 4")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Screenshot