Skip to content

gusroitman/BlazorSyncDash

Repository files navigation

GitHub code size in bytes .Net Blazor

Hello! I´m Gustavo 👋

I made some Dashboard layouts examples using Blazor and Syncfusion library.

You need to follow this steps to install the library :

First we need to install this nuget packages

    <PackageReference Include="Syncfusion.Blazor.Charts" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.CircularGauge" Version="20.4.0.42" />
    <PackageReference Include="Syncfusion.Blazor.Diagram" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.Kanban" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.Layouts" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.Cards" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.LinearGauge" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.Maps" Version="20.4.0.42" />
    <PackageReference Include="Syncfusion.Blazor.Navigations" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.Grid" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.Themes" Version="20.4.0.41" />
    <PackageReference Include="Syncfusion.Blazor.DropDowns" Version="20.4.0.41" />

You will also need a valid License Key. Check the requeriments at Syncfusion.

Open ~/_Imports.razor file and import the Syncfusion.Blazor namespace.

@using Syncfusion.Blazor

For .NET 6 and .NET 7 app, open the ~/Program.cs file and register the Syncfusion Blazor Service.

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor; // <--- add this

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor(); // <--- add this

var app = builder.Build();
....

Add Style sheet at ~/Pages/_Layout.cshtml for .NET 6.

@using Syncfusion.Blazor
... ```

Add Script reference in ~/Pages/_Layout.cshtml for .NET 6.

<head>
    ...
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    <!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->
    <!--<script  src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"  type="text/javascript"></script>-->
</head>

Some screenshots :

This is an image

This is an image

This is an image

This is an image

This is an image

This is an image

If you have any questions feel free to ask. 🗯️

About

DashBoards Layouts examples for Blazor using SyncFusion components.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published