Tuesday 25 September 2012

How to Create PDF report in ASP.NET MVC3

Follow these steps to generate an actual report from your web application:

  1. Create a controller that derives from PdfViewController.
  2. Create a view that generates the HTML which should be translated to a PDF report.
  3. Create an action on a controller which calls the ViewPDF method on the PdfViewController.
  4. Create a link to trigger the action on the controller.


Below, these steps are described in more detail.


Create a view that should be translated to a report. This could be an existing view or a new view specially for reporting. I usually create a new view as it lets me control the HTML markup for the report. As stated earlier, the report generator does not support all the HTML markup. In the demo project, this is the PrintDemo view.
Below, the PrintDemo view from the demo project is shown. As can be seen, this is just a simple ASP.NET Razor view with a table and some rows. It uses a strongly typed model but that is not necessary. A tip when trying to design your report is to add borders to your table or div. Using these borders, when looking at the generated PDF, you can clearly see the start and end of the areas of your report.
@model MyMVCProject.Models.Customer

<br />
<table cellpadding="3" cellspacing="3">
    <tr border="1" bgcolor="#777777" color="#ffffff">
        <td>Customer Name</td>
        <td>Email</td>
        <td>Phone </td>
    </tr>
    @foreach (var items in Model)
    {
        <tr border="1">
            <td>@items.CustomerName</td>
            <td>@items.Email</td>
            <td>@items.Phone</td>
        </tr>
    }
</table>

 

 

Create an action which calls the ViewPDF method

 

The PdfViewController class from which your controller derives contains a ViewPDF method. This method has the following signature:
protected ActionResult ShowPdf(string pageTitle, string viewName, object model)

 

This methods generates the HTML view and converts it into a PDF report and sends this PDF as a binary stream back to the client. This means that when the client has a PDF plug-in installed, the PDF is shown inside the browser.
From an action inside your controller, this method should be called to generate the report and send it to the client. The following action from the demo application generates the PDF. "Customer report" is the title of the report, "PrintDemo is the name of the view, and the model is returned by the CreateCustomerList() which as its name implies generates a dummy list with customers.

public ActionResult PrintCustomersList()
{
   return this.ViewPdf("Pdf title", "CustomerView",Customermodel);
}
The last step is to create a link on a page that calls this action to actually print the report.

Trigger the action on the controller

A simple method to create a link to trigger the action on the controller is by using an ActionLink. This link calls the action that we defined on the controller.
@Html.ActionLink("Print customers", "PrintCustomers", null,  new { target = "_blank" })

4 comments:

  1. http://stephenwalther.com/

    ReplyDelete
  2. @Html.TextBoxFor(model => model.Organization.OrganizationName, new { maxlength = 50 })

    ReplyDelete
  3. mvc-3-razor-textbox-max-length

    ReplyDelete
  4. jquery and @Html.Label



    $('label[for=Name]').html('*');

    ReplyDelete