Blazor Admin Dashboard

Elegantly Simple Blazor Admin Dashboard in WebAssembly

This is an Admin Dashboard for Blazor that is #elegantlysimple with the following key design principles:

  • Simplicity
    The dashboard is simple, easy to use and good enough for most people.
  • Minimal Dependencies
    The dashboard is developed with minimal reference to external libraries, frameworks and other dependencies. Wherever possible, it utilizes the underlying programming language in a plain vanilla manner without employing complex techniques.
  • Adaptable
    The dashboard, being simple with minimal dependencies, allows it to be adaptable and flexible. Whenever the platform or framework changes, it will be easy to adapt the dashboard to keep it current and up to date.
  • Elegant as in easy to understand and change
    The source code is structured to be easy to understand, compile, change, extend or port.

Source Code

  • GitHub - Blazor Admin Dashboard
    • How to run the admin dashboard?

      1. Clone the Blazor Admin Dashboard.

      git clone

      2. Clone the Blazor Charts Library.

      git clone

      3. Clone the Blazor Sparkline Library.

      git clone

      4. Go to the Blazord-Dashboard/Blazord-Dashboard folder. With the dotnet CLI, run the following command:

      dotnet run

      5. Launch your browser and access http://localhost:5000/dashboardZ.

      The XYZ of using the Blazor Admin Dashboard

      The repository contains a project with 3 sets of files, namely X, Y and Z. The details of these files are described below:

      • X - This is the template generated by the "dotnet new blazorwasm" command. As we will need to repeatedly upgrade the dashboard to the latest version of Blazor, the X template is the easiest for us to work with. It helps us find the changes required by the default template.
      • Y - The default template contains a lot of starting code that is already useful for starting a front end project. The Y template focuses on changes in the file index.razor, specifically the content of our dashboard. Some of our project members argued that this may be all we need in the future because it enables us to adapt to the changes introduces by Blazor. If Microsoft provides a very complete shell, we will just need to bring our index.razor code over.

      • Z -This include changes to the files MainLayout.razor and NavMenu.razor for creating a reponsive side bar. The design is to keep it #elegantlysimple so that we can easily adapt to changes in the future.

      How to use the X, Y or Z files?


      To use X :

      Copy AppX.razor to App.razor.

      Copy indexX.html to index.html.

      dotnet run


      To use Y :

      Copy AppY.razor to App.razor.

      Copy indexY.html to index.html.

      dotnet run


      To use Z :

      Copy AppZ.razor to App.razor.

      Copy indexZ.html to index.html.

      dotnet run


      Page Source | Content Update Date - 4/6/2020 | Language Vetting - Feb 28,2020