Question

I have created an application server side that will create a pdf of a report when requested. Then the link of that report can then be sent back to the client.

My question is how do I hook this up to a button click event in my asp.net mvc website. So the scenario is:

1. User fills in a few boxes.
2. Clicks the generate report button.
3. A little loading feedback indicator is shown.
4. A request is sent to the server, the server then generates the PDF report and sends back a url link to the pdf that is being hosted on the server.
5. The pdf will then be shown in the users browser (maybe in a new window).

Is this possible and is there any examples around that show how to do it?

Thanks in advance

Answer 1

I’ve done something similar.
When the user clicks the button it send an ajax request to the server passing some data:

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: '<%=Url.Action("GenerateReport", "MyController")%>',
    data: { Param1: $('#Param1').val() , Param2: $('#Param2').val() },
    beforeSend: function(xhr) {
         $.blockUI({ message: '<h1> printing ...</h1>', css: { border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff'} });
    },
    success: function(result) {
        if (result.Success) {
           FetchPdfDocument('<%=Url.Action("GetPdfReport", "MyController", New With {.id = "/"})%>' + result.Guid);
    }
    else {
        alert("Problems!");
    }
    },
    complete: function() {
       $.unblockUI();
    },
    error: function(req, status, error) {
       alert(error);
    }
});

The controller writes the document on the disk and sends back a guid which is the name of the PDF document.

This is the other bit of javascript which opens the file creating an IFRAME:

function FetchPdfDocument(UrlToPdf)
     {
     $('#ifPdfReport').remove();
     $(document.body).append('<IFRAME id="ifPdfReport" style="display:none;">');
     $('iframe#ifPdfReport').attr('src', UrlToPdf);
     // $('#ifPdfReport').load(function () { });                    
     }

I’ve used jQuery BlockUI as loading feedback indicator.
Hope it helps.