Documentation v8.0.36

Preview Downloads Purchase
This documentation covers the Metronic  Blazor Server-side integration only.
The Blazor Webassembly is not supported by Metronic  at the moment.

Overview

This documentation will show how to make a basic integration between Metronic and Blazor Framework.

Requirements

  1. Download and install .NET SDK.
  2. Install Node.js, NPM, Yarn, Webpack dependacies as explained in Webpack Quick Start.

Create Blazor Application

  1. In your terminal, run the following command to create your Blazor  app:
    dotnet new blazorserver -o BlazorApp --no-https
    
  2. This command creates your new Blazor  app project and places it in a new directory called BlazorAppinside your current location. Navigate to the new BlazorAppdirectory created by the following command:
    cd BlazorApp
    

Setup theme folder

Our theme already contain webpack and gulp configuration which we can use to build assets for our Blazor app.

  1. We need fully copy /html/themefolder and paste it into a root of our Blazor app.
  2. Inside /html/themewe have /toolsfolder and demo folders, you can leave only demo folder which you will be using, the content of our html files will be placed into a different razor files so /{demo}/distfolder with .htmlfiles is not required for this integration.
  3. When you run gulp or webpack commands by default the output /assetsfolder is placed into /theme/{demo}/dist, in our theme we need to place it into /wwwrootfolder. We can easily change build output folder path in tools/gulp.config.jsand tools/webpack.config.js.
  4. To change the output path in webpack config we need to update distPath variable:
  5. …
    const distPath = demoPath + '../../../wwwroot';
    …
    
  6. To change it in gulp config we need to update dist property in gulp.config.jsand in gulp.config.json:
  7. …
    dist: ["../../wwwroot/assets"],
    …
    
  8. Theme folder is set up, to buld the assets you can follow Webpackor Gulpbuild docs.

Layout component

  1. Let’s fully copy the all content of body tag from /html/{demo}/dist/index.htmland paste it into /Shared/MainLayout.razor. Also we need to copy all body tag attributes and values (id, class, style) and paste them on body in /Shared/MainLayout.razor.
  2. Replace only a html code of the /Shared/MainLayout.razorfile, line below is required.

    @inherits LayoutComponentBase
    

  3. Copy all link tag from /html/{demo}/dist/index.htmlhead tag and paste them into a head tag in file /Pages/_Layout.cshtml
  4. Now we need to replace a content with @Body, which will allow us change a content of the page depending on route.
  5. ...
    <!--begin::Content-->
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            @Body
        </div>
        <!--end::Container-->
    </div>
    <!--end::Content-->
    ...
    
  6. Lets import the main theme dependencies inside /Shared/MainLayout.razorin OnAfterRenderAsync lifecycle hook.
  7. @inject IJSRuntime JS
    @inject NavigationManager MyNavigationManager
    
    @code {
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));
                await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));
    
            }
        }
    }
    

    Run Application:

    1. In your terminal, run the following command:
      dotnet watch run
      
    2. dotnet watch runcommand builds and startups the app, and then automatically rebuils and restarts the app whenever you make code changes. You can stop the app at any time by selecting Ctrl+C.
    3. Wait for the app to display that it's listening on http://localhost:5000  and for the browser to launch at that address.

    Explore

    Metronic Licenses

    License FAQs
    Regular License
    For single end product used by you or one client
    $ 39
    Extended License
    For single SaaS app with paying users
    $ 939
    Custom License
    Reach us for custom license offers.
    Buy Now
    Learn & Get Inspired

    Support at devs.keenthemes.com

    Join our developers community to find answer to your question and help others. FAQs
    Get Support
    Documentation & Videos
    From guides and video tutorials, to live demos and code examples to get started.
    Plugins & Components
    Check out our 300+ in-house components and customized 3rd-party plugins.
    Layout Builder
    Build your layout, preview it and export the HTML for server side integration.
    Metronic Downloads
    Download your prefered framework and demo with one click.
    What's New
    Latest features and improvements added with our users feedback in mind.
    Buy now