Blazor: A Generic App for displaying Sample Apps


This Blazor WASM app extends to previous functionality so that the samples hosted can be dynamically changed without republishing the app. Some cool Blazor functionality demonstrated.

A previous GitHub repository, djaus2/dotnet_iot_samples facilitated getting .NET Core IoT sample apps individually from the web rather than having to download the whole repository. The idea was that the Blazor web app could be hosted remotely and contain a copy of the dotnet/iot repository. Users on a resource poor device, such as the Raspberry Pi, could then use the client app to download individual sample apps project that demonstrate how to use the drivers contained in the Device Bindings packages implemented in that repository (IoT.Devices.Bindings package on Nuget). The dotnet_iot_samples app is currently published as an Azure Web App here. The hosted content by that app is fixed and tailored for the dotnet/iot repository. It only presents sample projects one folder below each of the Bindings drivers. The next quest was to create a more generic version of the app. Wouldn’t it be nice to have an app that can:

  • Upload any repository of multiple sample apps and present that.
    • As a zip file.
  • Be able to dynamically update or change the samples so presented without restarting or republishing the web app.
    • Select from a list of previously uploaded sets of samples
  • Upon upload or selection, the samples are recursively explored for C# projects and solutions.
    • Noting solution, project and source files therein.
    • Also noting Markdown and Image.
  • The client is then able to display the content so determined in a tree structure
  • The client can display individual project files, copy and download them.
  • The client can then zip up a project or solution folder and download it.

This has now been implemented and is available on GitHub as djaus2/GetListofSamples, subtitled: .NET C# Sample Projects Indexer. This has been implemented, as per the previous app, as a Blazor WASM app with ASP.NET Core web hosting and the Client is configured as PWA Blazor client which means it can be installed on the client. So the server can be hosted on a local or remote service and clients, say, students in a lab using RPis, can then browse the samples from the Pi, select one and then download it directly to the Pi. They then build and test the app.

Notes:

  • The samples content resides on the Server not the Client.
  • When the app recurses the folders it notes Markdown files as these are often ReadMe files.
  • Also it notes image files as these can be circuit diagrams for the samples.
  • The app as in the GitHub repository has no login requirements. It would probably be desirable to require a login for the uploads and samples selections for remote hosting.

Blazor Functionality

The app demonstrates a variety of Blazor functions which will be covered in subsequent blog posts. These were found from web searches, exploration of Blazor documentation, Blazor videos, Blazor Samples, as well as some trial and error (I mean analysis!). These functions include:

  • A Blazor Recursive Component for recursively displaying linked tree data.
    • The component calls itself to be displayed as sub-content for children
  • Content is displayed in a folding manner
    • Folder children visibility toggles when a folder is clicked
    • When its children are displayed, its siblings’ children are hidden
  • Display Markdown and Image content in the Client when uploaded from the server.
  • Download text files to client app and display
    • Can then copy to clipboard or download to client
  • Zip up a folder from server content and download to client
  • Select a local zip file on the client, upload a to the Server and expand.
    • There was a major bug fixed developed here for the given samples this was built upon. It does work here.
  • File selection on Client from files on Server
  • Spinners

The client app
The App showing the directory tree



The client app
The App showing a folder

 TopicSubtopic
<  Prev:   .NET Core
   
 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor How To
<  Prev:   Blazor