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

 
   git clone https://github.com/toreaurstadboss/BlazorLiveReloadSample.git 
 

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:

FilewView.razor
 
 
 @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:

 
_Host.cshtml
   
 <link rel="stylesheet" href="~/lib/font-awesome/css/all.css" />
 

Now we have access to the Font Awesome icons.

Share this article on LinkedIn.