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:
- the route /cointable will show the top 100 crypto currencies, using the API
- clicking the detail per each currency, the route /coinhistory will show a chart and historical data for selected currency
- the route /coingrid will show exactly the same info as 1) only in a Radzen Grid
Bonus:
The app has export excel capabilities, which can be achieved doing the following:
create wwwroot/js/DownloadExcel.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
<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
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);
}
Top comments (0)