Display file preview in jQuery modal popup from database path on ASP.Net GridView LinkButton Click using C# and VB.Net

doram
 
on Oct 28, 2021 08:18 AM
Sample_168961.zip
658 Views

I have a table where I am storing the file to NVARCHAR(MAX)

I have a page where I am displaying all files and now I would like to open a query model

where I would like to show any type of file txt/ png/j pge/ pdf/ excel content in a jquery modal.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Oct 29, 2021 05:07 AM
on Oct 29, 2021 05:24 AM

Hi Doram, 

 Please refer below Sample.

HTML

Default

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
    <Columns>
        <asp:BoundField DataField="Text" HeaderText="File Name" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="lnkView" Text="View" CommandArgument='<%# Eval("Text") %>' runat="server" OnClick="OnView"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>

    </Columns>
</asp:GridView>
<div id="dialog" style="display: none">
    <iframe src="Popup.aspx" width="350" height="320"></iframe>
</div>
<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">
    function ShowPopup() {
        $(function () {
            $("#dialog").dialog({
                title: "jQuery Dialog Popup",
                height: 400,
                width: 400,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    };
</script>

Popup

<asp:GridView runat="server" ID="displayExcel" />

Namespaces

C#

using System.Data;
using System.Data.OleDb;
using System.IO;

VB.Net

Imports System.IO
Imports System.Data
Imports System.Data.OleDb

Code

CS

Default

 

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string[] filePaths = Directory.GetFiles(Server.MapPath("~/Uploads/"));
        List<ListItem> files = new List<ListItem>();
        foreach (string filePath in filePaths)
        {
            files.Add(new ListItem(Path.GetFileName(filePath), filePath));
        }
        GridView1.DataSource = files;
        GridView1.DataBind();
    }
}

protected void OnView(object sender, EventArgs e)
{
    string filePath = (sender as LinkButton).CommandArgument;
    Session["FileName"] = filePath;
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}

Popup

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["FileName"] != null)
    {
        string filePath = Server.MapPath("~/Uploads/") + Session["FileName"];
        string fileExtension = Path.GetExtension(filePath);
        string fileName = Path.GetFileName(filePath);
        switch (fileExtension.ToLower())
        {
            case ".pdf":
                Response.ContentType = "Application/pdf";
                Response.WriteFile(filePath);
                Response.End();
                break;
            case ".jpg":
                Response.ContentType = "image/JPEG";
                Response.WriteFile(filePath);
                Response.End();
                break;
            case ".gif":
                Response.ContentType = "image/GIF";
                Response.WriteFile(filePath);
                Response.End();
                break;
            case ".xls":
                displayExcel.DataSource = writeExcelFile(filePath, "xls"); ;
                displayExcel.DataBind();
                break;
            case ".xlsx":
                displayExcel.DataSource = writeExcelFile(filePath, "xlsx"); ;
                displayExcel.DataBind();
                break;
            default:
                break;
        }
    }
}

private DataSet writeExcelFile(string filePath, string extension)
{
    System.Data.DataTable dtExcel = new System.Data.DataTable();
    string str = string.Empty;
    if (extension.ToLower() == "xls")
    {
        str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + filePath + ";Extended Properties='Excel 8.0;HDR=Yes'";
    }
    else if (extension.ToLower() == "xlsx")
    {
        str = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + filePath + ";Extended Properties='Excel 8.0;HDR=Yes'";
    }

    OleDbConnection con = new OleDbConnection(str);
    OleDbCommand cmdExcel = new OleDbCommand();
    cmdExcel.Connection = con;
    con.Open();
    dtExcel = con.GetOleDbSchemaTable(OleDbSchemaGuid.Tables, null);
    con.Close();
    con.Open();
    OleDbDataAdapter da = new OleDbDataAdapter();
    DataSet ds = new DataSet();
    string SheetName = dtExcel.Rows[0]["TABLE_NAME"].ToString();
    cmdExcel.CommandText = "SELECT * FROM [" + SheetName + "]";
    da.SelectCommand = cmdExcel;
    da.Fill(ds);
    con.Close();
    return ds;
}

VB.Net

Default

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/Uploads/"))
        Dim files As List(Of ListItem) = New List(Of ListItem)()

        For Each filePath As String In filePaths
            files.Add(New ListItem(Path.GetFileName(filePath), filePath))
        Next

        GridView1.DataSource = files
        GridView1.DataBind()
    End If
End Sub

Protected Sub OnView(ByVal sender As Object, ByVal e As EventArgs)
    Dim filePath As String = (TryCast(sender, LinkButton)).CommandArgument
    Session("FileName") = filePath
    ClientScript.RegisterStartupScript(Me.[GetType](), "Popup", "ShowPopup();", True)
End Sub

Popup

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Session("FileName") IsNot Nothing Then
        Dim filePath As String = Server.MapPath("~/Uploads/") + Session("FileName")
        Dim fileExtension As String = Path.GetExtension(filePath)
        Dim fileName As String = Path.GetFileName(filePath)

        Select Case fileExtension.ToLower()
            Case ".pdf"
                Response.ContentType = "Application/pdf"
                Response.WriteFile(filePath)
                Response.[End]()
            Case ".jpg"
                Response.ContentType = "image/JPEG"
                Response.WriteFile(filePath)
                Response.[End]()
            Case ".gif"
                Response.ContentType = "image/GIF"
                Response.WriteFile(filePath)
                Response.[End]()
            Case ".xls"
                displayExcel.DataSource = writeExcelFile(filePath, "xls")
                displayExcel.DataBind()
            Case ".xlsx"
                displayExcel.DataSource = writeExcelFile(filePath, "xlsx")
                displayExcel.DataBind()
            Case Else
        End Select
    End If
End Sub

Private Function writeExcelFile(ByVal filePath As String, ByVal extension As String) As DataSet
    Dim dtExcel As System.Data.DataTable = New System.Data.DataTable()
    Dim str As String = String.Empty

    If extension.ToLower() = "xls" Then
        str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & filePath & ";Extended Properties='Excel 8.0;HDR=Yes'"
    ElseIf extension.ToLower() = "xlsx" Then
        str = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" & filePath & ";Extended Properties='Excel 8.0;HDR=Yes'"
    End If

    Dim con As OleDbConnection = New OleDbConnection(str)
    Dim cmdExcel As OleDbCommand = New OleDbCommand()
    cmdExcel.Connection = con
    con.Open()
    dtExcel = con.GetOleDbSchemaTable(OleDbSchemaGuid.Tables, Nothing)
    con.Close()
    con.Open()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter()
    Dim ds As DataSet = New DataSet()
    Dim SheetName As String = dtExcel.Rows(0)("TABLE_NAME").ToString()
    cmdExcel.CommandText = "SELECT * FROM [" & SheetName & "]"
    da.SelectCommand = cmdExcel
    da.Fill(ds)
    con.Close()
    Return ds
End Function

Screenshot