6
Answers

Export data as PDF Using JQuery In ASP.NET MVC

Learn Avid

Learn Avid

7y
394
1
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.
  1. @model List<ExportDataAsPDFAppl.Controllers.Employees>  
  2. @using (Html.BeginForm("exportPDF", "Home", FormMethod.Post))  
  3. {  
  4.     <div>  
  5.         <input type="hidden" name="gridHTML" />  
  6.         <input type="submit" id="btnExportHTML" name="btnExportHTML" class="btn btn-success" value="Export Pdf" />  
  7.     </div>  
  8.     <div id="tblEmpData">  
  9.         <table class="table table-striped table-condensed">  
  10.             <thead>  
  11.                 <tr>  
  12.                     <th>ID</th>  
  13.                     <th>FirstName</th>  
  14.                     <th>LastName</th>  
  15.                     <th>Gender</th>  
  16.                     <th>Salary</th>  
  17.                 </tr>  
  18.             </thead>  
  19.             <tbody>  
  20.                 @foreach (var item in Model)  
  21.                 {  
  22.                     <tr>  
  23.                         <td>@item.ID</td>  
  24.                         <td>@item.FirstName</td>  
  25.                         <td>@item.LastName</td>  
  26.                         <td>@item.Gender</td>  
  27.                         <td>@item.Salary</td>  
  28.                     </tr>  
  29.                 }  
  30.             </tbody>  
  31.         </table>  
  32.     </div>  
  33. }
In btnExportHTML jQuery click function, hidden variable gridHTML is binded with HTML table.
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $('#btnExportHTML').click(function () {  
  4.             debugger;  
  5.             $("input[name='gridHTML']").val($("#tblEmpData").html());  
  6.         });  
  7.     });  
  8. </script>  
But on export 'btnExportHTML' click, HTTP 404 error is raised.
Below is actionMethod for button click.
  1. [HttpPost]  
  2. [ValidateInput(false)]  
  3. private FileResult exportPDF(string gridHTML)  
  4. {  
  5.     StringReader reader = null;  
  6.     Document pdfDoc = null;  
  7.     PdfWriter write = null;  
  8.     try  
  9.     {  
  10.         using (MemoryStream memorystream = new MemoryStream())  
  11.         {  
  12.             reader = new StringReader(gridHTML);  
  13.             pdfDoc = new Document(PageSize.A4, 5f, 5f, 5f, 5f);  
  14.             write = PdfWriter.GetInstance(pdfDoc, memorystream);  
  15.             pdfDoc.Open();  
  16.             XMLWorkerHelper.GetInstance().ParseXHtml(write, pdfDoc, reader);  
  17.             pdfDoc.Close();  
  18.             return File(memorystream.ToArray(), "application/pdf", Convert.ToString(DateTime.Now + ".pdf"));  
  19.         }  
  20.   
  21.     }  
  22.     finally  
  23.     {  
  24.         reader.Dispose();  
  25.         pdfDoc.Dispose();  
  26.         write.Dispose();  
  27.     }  
  28. }  
please let me know my mistake to solve this issue.
Answers (6)
0
ketan hirapara

ketan hirapara

NA 360 374 7y
Yes,
Ajax call method must be a public to interct with client side ajax call. 
0
Learn Avid

Learn Avid

NA 101 4.7k 7y
The access modifier of `exportPDF` makes the difference here. It worked when `private` is modified to `public`.
0
Learn Avid

Learn Avid

NA 101 4.7k 7y
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.
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $('#btnExportHTML').click(function () {  
  4.             console.log($("#tblEmpData").html());  
  5.             debugger;  
  6.             $.ajax({  
  7.                 url: "@Url.Action("exportPDF", "Home")",  
  8.                 data: { gridHTML: $("#tblEmpData").html() },  
  9.                 contentType: 'application/json;charset=utf-8',  
  10.                 type: 'POST',  
  11.                 success: function (data) {  
  12.                     console.log($("#tblEmpData").html());  
  13.                 },  
  14.                 error: function (err) {  
  15.                     console.error(err.responseText);  
  16.                 }  
  17.             });  
  18.         });  
  19.     });  
  20. </script>  
Can't figure out what's my mistake here.
0
ketan hirapara

ketan hirapara

NA 360 374 7y
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);
}
})
0
Learn Avid

Learn Avid

NA 101 4.7k 7y
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.
0
ketan hirapara

ketan hirapara

NA 360 374 7y
hi Learn Avid,
 
Just call exportPDF using ajax. with parameter gridHTML.