Unable to download the file while clicking on the datatable row (filling data from Database)

Yogeshmbd60

Hi Incredible Team,

We are Unable to download the file(which was in 'xls,xlsx,pdf' format) while clicking on the datatable row, while development we have kept the file on local system still it is not picking on row clicking with download (button).
Could you please assist us how we can download the file from Datatable row.

In Datatable we are showing following fields:

Also mentioned the backend and front code as below:

Front Code (Page: aspx)

 function ClickURL(OptionId) {
            //alert(OptionId);
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "WebService/FileVisibleService.asmx/FileVisiblity",
                data: { OptionId: OptionId },
                async: true,
                cache: false,

                success: function (data1) {
                    var datatableVariable = $('#FileVisivilityTable').DataTable({
                        data: data1,
                        columns: [
                            //{ 'data': 'ReportId' },
                            //{ 'data': 'ReportName' },
                            { 'data': 'FileName' },
                            //{ 'data': 'FileURL'},
                            { 'data': 'FileExtension' },
                            {
                                'data': 'ReportId',
                                'render': function (data, type, row, meta) { { return '<a onclick=OnClick("' + data + '")>Download</a>' } },
                                className: "center",

                            }
                        ]
                    });
                    //' + data + '
                    $('#example').on('click', 'a.editor_edit', function (e) {
                        e.preventDefault();

                        editor.edit($(this).closest('tr'), {
                            title: 'Edit record',
                            buttons: 'Update'
                        });
                    })

                    $('#FileVisivilityTable tfoot th').each(function () {
                        var placeHolderTitle = $('#FileVisivilityTable thead th').eq($(this).index()).text();
                        $(this).html('<input type="text" class="form-control input input-sm" placeholder = "Search ' + placeHolderTitle + '" />');
                    });
                    datatableVariable.columns().every(function () {
                        var column = this;
                        $(this.footer()).find('input').on('keyup change', function () {
                            column.search(this.value).draw();
                        });
                    });
                    $('.showHide').on('click', function () {
                        var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
                        tableColumn.visible(!tableColumn.visible());
                    });
                }
            });
        }

OnClick function call in DataTable

function OnClick(OptionId) {
            //$.ajax({
            //    type: "POST",
            //    dataType: "json",
            //    url: "FileDownload.aspx?OptionId=" + OptionId,
            //    //data: { OptionId: OptionId },
            //    success: function (data) {
            //        alert("hi");
            //    }
            //});
            alert("hi")
            var SendData = {OptionId: OptionId};
            $.ajax({
                type: "POST",
                url: "Default.aspx/FileUploadDown",
                data: JSON.stringify(SendData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert("data.d");
                },
                error: function (result) {
                    console.warn(result.statusText);
                }
            });

        }

<div id="GirdView" runat="server" visible="false" style="border: 1px solid black; margin-top: 15px; margin-right: 50px; margin-left: 50px; overflow: auto; overflow-x: auto; overflow-y: auto" class="container-fluid">
                                <div>
                                    <b class="label label-danger" style="padding: 8.5px">Click to Show or Hide Column:</b>
                                    <div class="btn-group btn-group-sm">
                                        <%--<a class="showHide btn btn-primary" data-columnindex="0">ReportId</a>--%>
                                        <a class="showHide btn btn-primary" data-columnindex="0">ReportName</a>
                                        <a class="showHide btn btn-primary" data-columnindex="1">File Extension</a>
                                        <%--<a class="showHide btn btn-primary" data-columnindex="1">FileName</a>
                                <a class="showHide btn btn-primary" data-columnindex="2">FileURL</a>--%>
                                    </div>
                                </div>
                                <br />
                                <table id="FileVisivilityTable" class="table table-responsive table-hover">
                                    <thead>
                                        <tr>
                                            <%-- <th>Report Id</th>--%>
                                            <%--<th>Parent Name</th>--%>
                                            <th>File Name</th>
                                            <th>File Extension</th>
                                            <th></th>

                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <%--<th>Report Id</th>--%>
                                            <%--<th>Parent Name</th>--%>
                                            <th>File Name</th>
                                            <th>File Extension</th>
                                            <th></th>

                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

Backend Code:

[System.Web.Services.WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static void FileUploadDown(int OptionId)
        {
            //FileUpload(Convert.ToInt32(OptionId));

           
            string FileName = "";
            string FilePath = "";
            DataTable dt = null;
            using (MtApplication objmt = new MtApplication())
            {
                dt = objmt.ReportsURL(OptionId);
            }
            foreach (DataRow row in dt.Rows)
            {
                FileName = Convert.ToString(row["FileName"]);
                FilePath = Convert.ToString(row["ReportURL"]);
            }
            //FileName = "Book.xlsx";
            if (FileName != "")
            {
                //  FilePath = @"C:\Report\" + FileName;
                if (System.IO.File.Exists(FilePath))
                {

                    HttpResponse Response = HttpContext.Current.Response;
                    Response.Clear();
                    Response.ClearHeaders();
                    Response.ClearContent();
                    Response.AddHeader("Content-Disposition", FileName);
                    Response.ContentType = "application/octet-stream";


                    //HttpContext.Current.Response.Clear();
                    //HttpContext.Current.Response.ContentType = "application/octet-stream";
                    //// Response.ContentType = "application/ms-excel";
                    //HttpContext.Current.Response.AppendHeader("Content-Disposition", "attachment; filename=" + FileName);
                    HttpContext.Current.Response.TransmitFile(FilePath);
                    //HttpContext.Current.Response.End();
                    HttpContext.Current.Response.Flush();
                }
              
            }

allan

Can you link to a page showing the issue please? Does the Ajax request for the file download get sent?

Allan