Blazor: A Recursive Client Folde Component - 2


The previous post described the functionality of Bazor Component called FolderTree for displaying folder information. This post covers the code for the component and a page that hosts it.

Summary

The Blazor Client Component is for presenting data collected on the Blazor Server about a samples apps. Th einformation is gleaned from scanning the folders on the server. The Component diaplays a file folder name, and lists of certain file types contained therein on the serever. It also lists the folder’s subfolders as the same component. In that way the component reflects the recursive nature of file folders, which are initially closed but can be toggled open. The host page that uses it jsut wraps it in a table.

The Component Razor Page

@if (Folder == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @if (Folder.Depth == 0)
    {
        @Folder.Name
    }
    else
    {
        @Folder.Name
        @if (Folder.IsVisible)
        {
            @if (Folder.Solutions.Count != 0)
            {
                <ZipComponent FolderId=@Folder.Id />
            }
            @if (Folder.Projects.Count != 0)
            {
                // Button to go to folder
            }
        }
    }

    @if (Folder.IsVisible)
    {
        @if (Folder.Depth > 0)
        {
            @foreach (string solution in Folder.SolutionNames){
                @solution
            }
            @foreach (string project in Folder.Projects){
                @project
            }
            @foreach (string csFileName in Folder.CSFileNames){
                @csFileName
            }
            @foreach (string readme in Folder.ReadMes){
                @readMe
            }
            @foreach (string image in Folder.Images){}
                @image
            }
        }
        @foreach (var f in Folder.Children)
        {
            // The recursive inclusion of sub-components for subfolders
            <FolderComponent folderId=f IsViz=@IsViz />
        }
    }
}

@code
{
    [Parameter]
    bool IsViz {get;set;}=false;
    [Parameter]
    int folderId {get;set;}

    FolderTree Folder {get; set;} = null;

    protected override async Task OnInitializedAsync()
    {
        // Get the Folder from the folder list[folderId].
    }
}

** An ouline of the FolderTree Component Razor page.**

Note that these items are actually encased in a table on the hosting page and are encased here in tr and td Html tags.. Also the @Folder.Name is actually incased in a button for folder toggling. Other such items are also buttons for other fuctions such as file downloads, zips etc etc.

Razor Page for displaying the Component

A page to display the tree, as an index in brief is:
(Note that it has the table openning and closing tags, not the component.)

@using Client.Components
@inject SamplesClient _SamplesClient

    @if (RootFolder.FolderName[0] == '!')
    {
        <p>@RootFolder.FolderName!</p>
    }
    else
    {
        <table border="0">
            <FolderComponent folder=@RootFolder.Id IsViz="false" />
        </table>
    }
}

@code {
    private FolderTree RootFolder = null;

    protected override async Task OnInitializedAsync()
    {
        // Make sure that the list of folders has been downloaded 
        //   .. to the SamplesClient service
        // Set the RootFolder to the first element in that list.
    } 
}
 TopicSubtopic
   
 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor How To
<  Prev:   Blazor