Exporting The Razor WebGrid to Excel

jnweststrate · May 13th, 2014, 11:35 AM

Hello,

I have been working with Mike's Post regarding the Excel Export from The Razor Webmatrix Grid. The article is posted here for reference.

Everything is working exactly as expected (thanks Mike!), but I am now trying to pass variables into the iframe web page so I can restrict my Query based on a POST variable.

The jQuery code looks like this (where "excel" is the id of the img link in the referring page):

Code:

...
        $('#excel').on('click', function () {
            $('<iframe src="/GenerateExcel"></iframe>').appendTo('body').hide();
        });
...

And I'm looking for a URL like this:
...<iframe src="/GenerateExcel?USER=jsmith&TYPE=Analyst"></iframe>...

I believe the variables USER and TYPE need to be posted to jQuery, but I'm not sure how to pull them in. Here's my attempt so far, but I'm missing something:

Code:

...
        $('#excel').on('click', function () {
            var USER = tr.find('#USER').val();
            var TYPE = tr.find('#TYPE').val();
            $.post(
                  '<iframe src="/GenerateExcel"></iframe>',
                  {
                   USER: USER,
                   TYPE: TYPE
                   }
            ).appendTo('body').hide();
        });
...

Thanks for all you do!

Joel

Mike Brind · May 13th, 2014, 03:19 PM

Actually, all you should need to do is to add the querystring values to the url you create for the iframe:

Code:

$('#excel').on('click', function () {
    var user = tr.find('#USER').val();
    var type = tr.find('#TYPE').val();
    $('<iframe src="/GenerateExcel?user=" + user + "&amp;type=" + type + "></iframe>').appendTo('body').hide();
});

jnweststrate · May 13th, 2014, 05:36 PM

Thanks for the quick response Mike! Makes perfect sense.
If I use the <img> as you describe in the article referenced above, I believe i need to figure out a different way of using jQuery to pull in the URL variables.

The URL of the page where the <img> link is located is something like this:
.../WebPage.cshtml?USER=jsmith&TYPE=Analyst

so instead of
...
var user = tr.find('#USER').val();
var type = tr.find('#TYPE').val()
...

I believe I need to be using different jQuery syntax, perhaps with another function that retrieves the values from the URL. I apologize as I'm not as versed in jQuery as I should be, but I feel this is the right solution.

Thanks again for your help!
Joel

jnweststrate · May 13th, 2014, 09:22 PM

Thanks to Mike's article "Exporting The Razor WebGrid To Excel Using OleDb" and his guidance here, I was able to find a solution.

My objective was to export an excel file based on a Webmatrix Webgrid using the methods described in the article above. However, I needed to pass a variable through a URL Querystring to help me limit the results in the Excel export to a specific user.

The URL of the origination page, as mentioned above, looks like this:
.../WebPage.cshtml?USER=jsmith&TYPE=Analyst

I used this jQuery code to pass information on to the "GenerateExcel.cshtml" file:

Code:

/* Get URL QueryString Parameters*/
(function($) {
    $.QueryString = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

/* Pass request on to GenerateExcel file */
$(function () {
    $('#excel').on('hover', function () {
        $(this).css('cursor', 'pointer');
    });
    $('#excel').on('click', function () {
        var user = $.QueryString["USER"];
        var type = $.QueryString["TYPE"];
        $('<iframe src="/GenerateExcel?User=' + user + '&Type=' + type + '"></iframe>').appendTo('body').hide();
    });
});

Note the use of single and double quotes in the iframe URL.
Also, the jQuery that splits the URL Querystring was found at this StackOverflow post.

Using the above jQuery in tandem with Mike's code from the article mentioned above, I am now able to export an excel file using specific parameters defined in the URL Querystring.

Regards,
Joel