Export data as PDF Using JQuery In ASP.NET MVC

L A

Hello,

I'm actually following http://www.c-sharpcorner.com/article/basic-pdf-export-using-jquery-in-asp-net-mvc-razor/ article to bind data from controllers action to HTML table and then export data from HTML table to iTextSharp pdf viewer. Below i'm binding controllers action method data to html table.

@model List<ExportDataAsPDFAppl.Controllers.Employees>
@using (Html.BeginForm("exportPDF", "Home", FormMethod.Post))
{
<div>
<input type="hidden" name="gridHTML" />
<input type="submit" id="btnExportHTML" name="btnExportHTML" class="btn btn-success" value="Export Pdf" />
div>
<div id="tblEmpData">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>IDth>
<th>FirstNameth>
<th>LastNameth>
<th>Genderth>
<th>Salaryth>
tr>
thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.IDtd>
<td>@item.FirstNametd>
<td>@item.LastNametd>
<td>@item.Gendertd>
<td>@item.Salarytd>
tr>
}
tbody>
table>
div>
}

In btnExportHTML jQuery click function, hidden variable gridHTML is binded with HTML table.

"text/javascript">
$(document).ready(function () {
$('#btnExportHTML').click(function () {
debugger;
$("input[name='gridHTML']").val($("#tblEmpData").html());
});
});

But on export 'btnExportHTML' click, HTTP 404 error is raised.

Below is actionMethod for button click.

[HttpPost]
[ValidateInput(false)]
private FileResult exportPDF(string gridHTML)
{
StringReader reader = null;
Document pdfDoc = null;
PdfWriter write = null;
try
{
using (MemoryStream memorystream = new MemoryStream())
{
reader = new StringReader(gridHTML);
pdfDoc = new Document(PageSize.A4, 5f, 5f, 5f, 5f);
write = PdfWriter.GetInstance(pdfDoc, memorystream);
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(write, pdfDoc, reader);
pdfDoc.Close();
return File(memorystream.ToArray(), "application/pdf", Convert.ToString(DateTime.Now + ".pdf"));
}
}
finally
{
reader.Dispose();
pdfDoc.Dispose();
write.Dispose();
}
}

please let me know my mistake to solve this issue.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mythili Saravanana8y ago
can u convert pdf without any link
Ketan Hirapara8y ago
Yes,
Ajax call method must be a public to interct with client side ajax call.
L A8y ago
The access modifier of `exportPDF` makes the difference here. It worked when `private` is modified to `public`.
L A8y ago
Hey Ketan, I created and called jQuery AJAX function on button click but it did returned the same error 404 - The resource cannot be found.
"text/javascript">
    $(document).ready(function () {
        $('#btnExportHTML').click(function () {
            console.log($("#tblEmpData").html());
            debugger;
            $.ajax({
                url: "@Url.Action("exportPDF", "Home")",
                data: { gridHTML: $("#tblEmpData").html() },
                contentType: 'application/json;charset=utf-8',
                type: 'POST',
                success: function (data) {
                    console.log($("#tblEmpData").html());
                },
                error: function (err) {
                    console.error(err.responseText);
                }
            });
        });
    });

Can't figure out what's my mistake here.
Ketan Hirapara8y ago
Yes,

jquery ajax call.

on button click of jquery in document ready

Call

$.ajax({
url:'contollerPath/methodName',
data:{gridHTML:yourValue}, //For passing request parameter
contentType: 'application/json;charset=utf-8',
type="POST/GET",
success: function (data) {
console.log(data.d);
},
error: function (err) {
console.log(err.responseText);
}

})
L A8y ago
Hello ketan hirapara, thanks for your response, do youmean to use jQuery AJAX for button click.? I'm a beginner, so can please explain in detail an approach to solve this.
Ketan Hirapara8y ago
hi Learn Avid,

Just call exportPDF using ajax. with parameter gridHTML.