Monday, 28 December 2020

More fun with Blazor - creating a folder viewer in 10 minutes

   git clone 
Blazor is very easy to use! I spent 10 minutes to create a simple folder viewer here now.
First off, the Blazor razor component looks like this:
@inject IJSRuntime jsRuntime; <h3>FileView</h3> @foreach (var folder in folders) { var depthOfFolder = folder.Split('\\').Count(); <p style="cursor:pointer" @onclick="() => openFolder(folder)"> @for (int i = 0; i < depthOfFolder; i++) { <span style="margin-left:10px"></span> } <i style="color:orange;cursor:pointer" class="fa fa-folder" /> @folder </p> } @code { List<string> folders = Directory.GetDirectories("/").ToList(); private void openFolder(string folder) { jsRuntime.InvokeVoidAsync("log", folder); string[] subfolders = Directory.GetDirectories(folder); Console.WriteLine(folder); int folderIndex = folders.IndexOf(folder); folders.InsertRange(folderIndex, subfolders); } }
We add to the solution also Font-awesome via right click solution explorer and choose Add => Client-Side Library. Search for 'font-awesome' Choose Font Awesome and add all files to be added to the lib/font-awesome folder of wwwroot. Then at the bottom of _Host.cshtml we add:
<link rel="stylesheet" href="~/lib/font-awesome/css/all.css" />
Now we have access to the Font Awesome icons.
Share this article on LinkedIn.


  1. It is truly amazing how simple creating web pages becomes for .Net developers with Blazor since they can utilize the full .Net Framework at hand - the folder browse app here uses a component only 30 lines long. Blazor is like that - effortless to create stuff. Of course something more useful than a app that is similar to File Explorer can be crated - the point was to test more stuff out in Blazor!

  2. The Code Access Security (CAS) will take care of stopping access to folder the user running the browser should not access. You'll get built in .NET security features too