Blazor How To: WASM Http File Get - Client Request


Making parameterised Http Client Get requests to the Server for various Files types.

The previous posts have covered aspects of the Blazor WASM app for browsing Sample C# .NET Core Sample apps on the server. This post looks at using Http Get requests to get the file contents of a variety of types; text, image and Markdown.

The app uses unparameterised Get requests to get the list of Folder metainformation as a list of type FolderTree. Whilst this list is generated on the server at its startup, the client makes this Get request when the first page is initasilly rendered. The list is cached at this point on the client for future reference. There is an instance of this class for each folder within the target folders on the server annotating the files there in as well as the parent and child folders of the folder it represents. Each folder has a unique Id. Upon download, tHe Client app then interprets the list as a tree structure using the parent and child references. So a file on the server is specified by its folder Id and filename. When a file is selcted on the client, the folder Id and filename are submitted to the server to get the file contents back.

On the server, the NewtonSoft package is used to serialise the list into a Json string which is then passed back. Upon reception, the client then deserialises the string back into the list of FolderTree type. The list is presented on the client Index razor page in a recursive manner that reflects the tree relationship of the folder data. FolderTrees are a data parameter to the Client FolderTree Component and initially show as collapsed when first rendered. In that mode only the folder name shows. When clicked, the folder expands to show the lists of files present in the folder (on the server) and a list of the child folders as collapsed FolderTree components.

The File Types to be Downloaded

  • Solution File .sln
  • C# Project File .csproj
  • C# Source File .cs
  • Markdown File .md
  • Image files (various formats)
  • Zip files .zip (These are generated on request on the server.)

On the Index page a file can be selected for display by clicking on it, when its folder is expanded. This then causes a parameterised Http Get to be posted to the server to get the file contents. Note that all file contents, regardless of the file type, are sent back as text. The format of the parameter is flexible so that only one type of parameterised Get is sent. The server then interprets the file type from the parameter which determines the method for generating the text from the specified file contents.

See the folder functionality on the previous post: A Recursive Client Component- 1

Http Get Commands

The file Get parameter format is:
<Command>>~<FileName>~<FolderId
For eaxmple MARKDOWN~Readme.md~10
This means, a markdown file, named ReadMe.md in folder with Id 10.
Yes, the file type command could be inferred from the file extension, but the command format is used to send other commands the server, using the same parameterised Get request.

The Commands

  • GetFile or _default__
    • Just get the specified file within the Samples folders as text and return
  • Markdown (md)
    • Just get the file from the server.
    • Markdown formating occurs in a Client Component.
  • SampleProjectFile
    • Get a generic .NET Core C# project file. Includes GPIO and Bindings
  • Image
    • Covert the specified image file data to Base64String format and return
  • Zip
    • Zip up the specified subfolder of the Samples folder, using the supplied filename.
    • Convert to Base64String format and return.
  • GetListofZips
    • Get a tilde separated list of Samples zip files previously uploaded.
      • Uploaded Samples zip files are stored on the server. (This mechanism will be covered in another post).
    • These are used as a menu for selection for the next command.
  • Unzip
    • Unzip the selected previously uploaded Samples zip file and use that.
  • Reload
    • Rescan the current Samples folder on the server.

    Subsequent posts will cover the client rendering of the returned text. . Suffice to say, all returned content is text from the server to the client.

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