I have a GridView on my webpage. When a GridView row is clicked it redirects to another page and shows the details of that record in PDF format.
Currently, the GridView has records that are in pdf and word document formats. For the pdf format, it is working that when I click on a GridView row that has pdf record it redirects and shows the pdf in details on another page.
But this is not working with word document format (.docx). So my question is, is it possible to have pdf and word document(.docx) records in a GridView and click on any of the file format to redirect to another page and show the clicked record?
That is, regardless of the file format, when a GridView row is clicked, it should redirect to another page and show the record there
Here is the HTML and code
Sample test.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/recptStyle.css" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
<title>Receipt</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<nav id="sidebar">
<ul class="list-unstyled sidebar-header">
<li> <span class="step"><asp:Label ID="initia" Font-Names="Nunito" runat="server" Font-Bold="true" Text="" Font-Size="20pt"></asp:Label></span></li>
<li>
<asp:Label ID="named" runat="server" Font-Size="12pt" Text="" ForeColor="White" Font-Bold="true"></asp:Label>
</li>
<li>
<i class="fad fa-user" aria-hidden="true"></i>
<asp:Label ID="user" runat="server" Font-Size="10pt" Text="" ForeColor="White"></asp:Label>
</li>
</ul>
<ul class="nav navbar-nav list-unstyled components">
<li class="nav-item active">
<a class="nav-link" href="dashboard.aspx"><i class="fad fa-layer-group" aria-hidden="true"></i>Overview</a>
</li>
<li>
<a href="certificatepdoc.aspx">
<i class="fad fa-file-certificate" aria-hidden="true"></i>Invoice Template</a>
</li>
<li class="nav-item">
<a class="nav-link" href="idcardpdoc.aspx"><i class="fad fa-id-badge" aria-hidden="true"></i>Receipt Template</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gatepass.aspx">
<i class="fad fa-ticket" aria-hidden="true"></i>Ticket</a>
</li>
</ul>
<ul class="list-unstyled components">
<li class="nav-item" id="Li1" runat="server"><a href="log.aspx">
<i class="fad fa-folder" aria-hidden="true"></i>Records</a>
</li>
<li class="nav-item" id="Li2" runat="server"><a href="accountsettings.aspx">
<i class="fad fa-cog" aria-hidden="true"></i>Settings</a>
</li>
</ul>
</nav>
<div id="content">
<nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-bars"></i>
<span class="sr-only">Toggle Navigation</span>
</button>
<button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<hr />
<div>
<span>
<asp:Button ID="Button1" runat="server" Font-Size="11pt" Text="New Receipt" CssClass="btn btn-primary" BackColor="#f8dd08" ForeColor="#05214d" BorderColor="#f8dd08" OnClick="Button1_Click" />
</span>
</div>
<asp:Label ID="createby" runat="server" Text="Createdby"></asp:Label>
<div>
<br />
<div>
<label>Records</label>
</div>
<br />
<!---Gridview2 Start-->
<div class="line"></div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="container-fluid p-3 mb5 bg-white rounded" id="">
<div class="grid-corner2">
<div class="input-group">
<asp:TextBox ID="TextBox1" runat="server" placeholder="Receipt Name" CssClass="form-control" Font-Size="10pt"></asp:TextBox>
<div class="input-group-append">
<button id="search1" runat="server" class="btn btn-primary" backcolor="SteelBlue">
<i class="far fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
<asp:GridView ID="GridView2" runat="server" GridLines="None" DataKeyNames="Name" AllowPaging="true" HeaderStyle-ForeColor="#05214d" HeaderStyle-Font-Bold="false" HeaderStyle-Font-Size="11pt" Font-Size="10pt"
AutoGenerateColumns="false" OnSelectedIndexChanged="OnSelectedIndexChanged" OnRowDataBound="OnRowDataBound" HeaderStyle-HorizontalAlign="left" RowStyle-HorizontalAlign="Left" class="table" Width="100%">
<EmptyDataTemplate>
<div>
<hr />
<hr />
<asp:Label ID="labelTemp" runat="server" Font-Bold="true" Font-Size="12pt" Text="No Record"></asp:Label>
<hr />
<hr />
</div>
</EmptyDataTemplate>
<Columns>
<asp:BoundField DataField="Name" HeaderText="File Name" />
<asp:BoundField DataField="CreatedBy" HeaderText="Created By" />
<asp:BoundField DataField="CreatedDate" HeaderText="Date Created" />
</Columns>
</asp:GridView>
<div>
Showing Page
<asp:Label ID="labelindex" runat="server" Text="Label" />
of
<asp:Label ID="Pagetotal" runat="server" />
(<asp:Label ID="total" runat="server" />
Records)
<div class="dvPager">
<asp:Repeater ID="repeated" runat="server">
<ItemTemplate>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<br />
<br />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!--Grideview2 ends-->
<br />
</div>
</div>
</div>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
sample test 2.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<title> Details</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@200&display=swap');
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#page {
align-content: center;
text-align: center;
}
.contentt {
height: 100%;
margin-bottom: 18px;
overflow: hidden;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
position: relative;
}
.print {
margin: 0 auto;
}
.contentt Literal,
.contentt object,
.contentt embed .contentt ltEmbed {
height: 100% !important;
left: 0;
position: absolute;
top: 0;
width: 100% !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<div id="content">
<div class="container" id="centered">
<div class="form-horizontal">
<h1>Document Details</h1>
<hr />
<div id="pdf_container"></div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf_viewer.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "sample test 2.aspx/GetFile",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
LoadPdfFromBlob(r.d.Data);
},
error: function (r) {
alert(r.responseText);
}
});
});
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
var pdfDoc = null;
var scale = 1; //Set Scale for zooming PDF.
var resolution = 1; //Set Resolution to Adjust PDF clarity.
function LoadPdfFromBlob(blob) {
//Read PDF from BLOB.
pdfjsLib.getDocument({ data: blob }).promise.then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
//Reference the Container DIV.
var pdf_container = document.getElementById("pdf_container");
pdf_container.innerHTML = "";
pdf_container.style.display = "block";
//Loop and render all pages.
for (var i = 1; i <= pdfDoc.numPages; i++) {
RenderPage(pdf_container, i);
}
});
};
function RenderPage(pdf_container, num) {
pdfDoc.getPage(num).then(function (page) {
//Create Canvas element and append to the Container DIV.
var canvas = document.createElement('canvas');
canvas.id = 'pdf-' + num;
ctx = canvas.getContext('2d');
pdf_container.appendChild(canvas);
//Create and add empty DIV to add SPACE between pages.
var spacer = document.createElement("div");
spacer.style.height = "20px";
pdf_container.appendChild(spacer);
//Set the Canvas dimensions using ViewPort and Scale.
var viewport = page.getViewport({ scale: scale });
canvas.height = resolution * viewport.height;
canvas.width = resolution * viewport.width;
//Render the PDF page.
var renderContext = {
canvasContext: ctx,
viewport: viewport,
transform: [resolution, 0, 0, resolution, 0, 0]
};
page.render(renderContext);
});
};
</script>
</body>
</html>
sample test.aspx.cs
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView2, "Select$" + e.Row.RowIndex);
e.Row.Style.Add("cursor", "pointer");
e.Row.ToolTip = "View document.";
}
}
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView2.Rows)
{
if (row.RowIndex == GridView2.SelectedIndex)
{
int index = GridView2.SelectedIndex;
Session["RowIndex"] = GridView2.DataKeys[index].Value.ToString();
Response.Redirect("sample test 2.aspx");
}
}
}
sample test 2.aspx.cs
[WebMethod(EnableSession = true)]
public static object GetFile()
{
string fileName = String.Empty;
byte[] bytes = null;
string type = string.Empty;
using (SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\Dataregister.mdf;Integrated Security = True"))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM tablereceipt WHERE Name = @Name", con))
{
cmd.Parameters.AddWithValue("@Name", HttpContext.Current.Session["RowIndex"]);
con.Open();
using (SqlDataReader dr = cmd.ExecuteReader())
{
if (dr.Read())
{
fileName = dr["Name"].ToString();
bytes = (byte[])dr["image"];
type = dr["Contyp"].ToString();
}
}
con.Close();
}
}
return new { Name = fileName, Data = bytes, ConTyp = type };
}
