Simple Cryptocurrency App With Blazor Server Including Excel Export
Tags: dotnet, tutorial, blazor, csharp
Published: 2020-10-06 11:13:22

For some reason, I started to like developing with Blazor Server, mainly because the rapidity and simplicity of development. I tend to use some free component libraries to speed up development. I still want to mention that all my experience with Blazor Server is only on tutorial/experimental level.

*This is just an application to learn Blazor Server, and familiarize with Cryptocurrencies, it has no other purpose.*

**Prerequisites for this app:**
- basic Blazor Server (See my previous tutorials)
- install Radzen Components in your app see https://blazor.radzen.com/get-started
- using the C# wrapper for CoinPaprika Api (to get cryptocurrency info) https://github.com/MSiccDev/CoinpaprikaAPI

Code repository: https://github.com/zoltanhalasz/BlazorCoins

Application is live under: https://blazorcoins.zoltanhalasz.net/

**The app works the following way:**
1. the route /cointable will show the top 100 crypto currencies, using the API
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m767u2o83eao80pqfsk4.png)
2. clicking the detail per each currency, the route /coinhistory  will show a chart and historical data for selected currency
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mnpmg9y5u5g53r9d75qz.png)
3. the route /coingrid will show exactly the same info as 1) only in a Radzen Grid
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uzfvn01ja3ek8vwt806x.png)

**Bonus:**

The app has export excel capabilities, which can be achieved doing the following:

*create wwwroot/js/DownloadExcel.js*
```js
function saveAsExcel(fileName, byteContent) {
    var link = document.createElement('a');
    link.download = fileName;
    console.log(fileName);
    link.href = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' + byteContent;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
```
*include the file reference at the bottom of _Host.cshtml, just below the other scripts*
```
    <script src="/js/DownloadExcel.js"></script>
```

*install EPPlus, latest, via Nuget Packages*

*in page /cointable (or where you need to export from excel), insert the markup for a button*
```html
 <button class="btn btn-primary" @onclick="GenerateExcel">Download</button>
```

*include the following in the top of the page you want to use Excel Export:*
```
@inject IJSRuntime iJSRuntime;
```
*Write the handlers for GenerateExcel, in the code section of the page where you have the list that you need to export in Excel*
```csharp
private async Task DownloadExcel(IJSRuntime myJSRuntime)
{
        byte[] file;
        if (coinList == null) return;
        ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
        using (var package = new ExcelPackage())
        {
            var worksheet = package.Workbook.Worksheets.Add("Sheet1");
            worksheet.Cells.LoadFromCollection(coinList, true);
            package.Save();
            file = package.GetAsByteArray();
        }

        await myJSRuntime.InvokeAsync<List<CoinInfo>>("saveAsExcel", "CoinList.xlsx", Convert.ToBase64String(file));
    }

    private async Task GenerateExcel()
    {
        await DownloadExcel(iJSRuntime);
    }
```