Skip to content

Latest commit

 

History

History
90 lines (69 loc) · 3.7 KB

README.md

File metadata and controls

90 lines (69 loc) · 3.7 KB

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. 🗯️