AppStd/DbFirst
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate DevExpress Web Dashboard into API and Blazor

Browse Source 
Added DevExpress Dashboard to ASP.NET Core API and both Blazor WASM/Server frontends. Configured dashboard storage, sample data source, and API endpoint. Updated Blazor projects with dashboard packages, styles, and a new dashboard page. Navigation and configuration updated to support dashboard integration.
This commit is contained in:
OlgunR
2026-02-02 09:01:08 +01:00
parent 0532cbb329
commit 38baf9f749
18 changed files with 135 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
DbFirst.API/Controllers/DefaultDashboardController.cs Normal file
View File

@@ -0,0 +1,14 @@
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb;
using Microsoft.AspNetCore.DataProtection;
namespace BlazorDashboardApp.Server
{
public class DefaultDashboardController : DashboardController
{
public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider? dataProtectionProvider = null)
: base(configurator, dataProtectionProvider)
{
}
}
}

4
DbFirst.API/Data/Dashboards/DefaultDashboard.xml Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<Dashboard CurrencyCulture="de-DE" RequestParameters="false">
<Title Text="Default Dashboard" />
</Dashboard>

5
DbFirst.API/DbFirst.API.csproj
View File

@@ -9,6 +9,7 @@
<ItemGroup>
<PackageReference Include="AutoMapper" Version="12.0.1" />
<PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="12.0.1" />
<PackageReference Include="DevExpress.AspNetCore.Dashboard" Version="25.2.3" />
<PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.22" />
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.22" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.22">
@@ -25,4 +26,8 @@
<ProjectReference Include="..\DbFirst.Infrastructure\DbFirst.Infrastructure.csproj" />
</ItemGroup>
<ItemGroup>
<Folder Include="Data\Dashboards\" />
</ItemGroup>
</Project>

35
DbFirst.API/Program.cs
View File

@@ -4,6 +4,11 @@ using DbFirst.Application.Repositories;
using DbFirst.Domain;
using DbFirst.Infrastructure;
using DbFirst.Infrastructure.Repositories;
using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
var builder = WebApplication.CreateBuilder(args);
@@ -44,6 +49,33 @@ builder.Services.AddApplication();
builder.Services.AddScoped<ICatalogRepository, CatalogRepository>();
builder.Services.AddDevExpressControls();
builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
var dashboardsPath = Path.Combine(builder.Environment.ContentRootPath, "Data", "Dashboards");
Directory.CreateDirectory(dashboardsPath);
var defaultDashboardPath = Path.Combine(dashboardsPath, "DefaultDashboard.xml");
if (!File.Exists(defaultDashboardPath))
{
var defaultDashboard = new Dashboard();
defaultDashboard.Title.Text = "Default Dashboard";
defaultDashboard.SaveToXml(defaultDashboardPath);
}
DashboardConfigurator configurator = new DashboardConfigurator();
// Register Dashboard Storage
configurator.SetDashboardStorage(new DashboardFileStorage(dashboardsPath));
// Create a sample JSON data source
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
jsonDataSourceUrl.JsonSource = new UriJsonSource(
new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
jsonDataSourceUrl.RootElement = "Customers";
dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
configurator.SetDataSourceStorage(dataSourceStorage);
return configurator;
});
var app = builder.Build();
// Configure the HTTP request pipeline.
@@ -55,10 +87,13 @@ if (app.Environment.IsDevelopment())
app.UseMiddleware<ExceptionHandlingMiddleware>();
app.UseDevExpressControls();
app.UseHttpsRedirection();
app.UseCors();
app.UseAuthorization();
app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
app.MapControllers();
app.Run();

3
DbFirst.BlazorWasm/App.razor
View File

@@ -4,7 +4,8 @@
• Der Router-Komponent in App.razor entscheidet, welche Blazor-Komponente basierend auf der URL geladen wird.
kurz: Steuert die Navigation und das Rendering der Blazor-Komponenten.
*@
@DxResourceManager.RegisterTheme(Themes.Fluent)
@DxResourceManager.RegisterScripts()
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

5
DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
View File

@@ -7,9 +7,12 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="DevExpress.Blazor" Version="25.2.3" />
<PackageReference Include="DevExpress.Blazor.Dashboard" Version="25.2.3" />
<PackageReference Include="DevExpress.Blazor.Themes" Version="25.2.3" />
<PackageReference Include="DevExpress.Blazor.Themes.Fluent" Version="25.2.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.22" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.22" PrivateAssets="all" />
<PackageReference Include="DevExpress.Blazor" Version="24.1.*" />
</ItemGroup>
<ItemGroup>

5
DbFirst.BlazorWasm/Layout/NavMenu.razor
View File

@@ -21,6 +21,11 @@
<span class="bi bi-collection-nav-menu" aria-hidden="true"></span> Catalogs
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="dashboard">
<span class="oi oi-list-rich" aria-hidden="true"></span> Web Dashboard
</NavLink>
</div>
</nav>
</div>

12
DbFirst.BlazorWasm/Pages/Dashboard.razor Normal file
View File

@@ -0,0 +1,12 @@
@page "/dashboard"
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
<DxDashboard Endpoint="@DashboardEndpoint" style="width: 100%; height: 800px;">
</DxDashboard>
@code {
private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
}
@* <DxDashboard Endpoint="api/dashboard" WorkingMode="WorkingMode.ViewerOnly" style="width: 100%; height: 800px;">
</DxDashboard> *@

2
DbFirst.BlazorWasm/_Imports.razor
View File

@@ -11,3 +11,5 @@
@using DbFirst.BlazorWasm.Models
@using DbFirst.BlazorWasm.Services
@using DevExpress.Blazor
@using DevExpress.DashboardBlazor
@using DevExpress.DashboardWeb

10
DbFirst.BlazorWasm/wwwroot/index.html
View File

@@ -17,6 +17,16 @@
<base href="/" />
<!-- Stylesheets für DevExpress und Bootstrap -->
<link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/icons.css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

12
DbFirst.BlazorWebApp/Components/App.razor
View File

@@ -5,6 +5,18 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
@DxResourceManager.RegisterTheme(Themes.Fluent)
@DxResourceManager.RegisterScripts()
<link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="DbFirst.BlazorWebApp.styles.css" />

5
DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
View File

@@ -25,6 +25,11 @@
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="dashboard">
<span class="oi oi-list-rich" aria-hidden="true"></span> Web Dashboard
</NavLink>
</div>
</nav>
</div>

12
DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor Normal file
View File

@@ -0,0 +1,12 @@
@page "/dashboard"
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
<DxDashboard Endpoint="@DashboardEndpoint" style="width: 100%; height: 800px;">
</DxDashboard>
@code {
private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
}
@* <DxDashboard Endpoint="api/dashboard" WorkingMode="WorkingMode.ViewerOnly" style="width: 100%; height: 800px;">
</DxDashboard> *@

3
DbFirst.BlazorWebApp/Components/_Imports.razor
View File

@@ -8,3 +8,6 @@
@using Microsoft.JSInterop
@using DbFirst.BlazorWebApp
@using DbFirst.BlazorWebApp.Components
@using DevExpress.Blazor
@using DevExpress.DashboardBlazor
@using DevExpress.DashboardWeb

5
DbFirst.BlazorWebApp/DbFirst.BlazorWebApp.csproj
View File

@@ -7,7 +7,10 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="DevExpress.Blazor" Version="25.1.3" />
<PackageReference Include="DevExpress.Blazor" Version="25.2.3" />
<PackageReference Include="DevExpress.Blazor.Dashboard" Version="25.2.3" />
<PackageReference Include="DevExpress.Blazor.Themes" Version="25.2.3" />
<PackageReference Include="DevExpress.Blazor.Themes.Fluent" Version="25.2.3" />
</ItemGroup>
</Project>

3
DbFirst.BlazorWebApp/Program.cs
View File

@@ -1,4 +1,5 @@
using DbFirst.BlazorWebApp.Components;
using DevExpress.Blazor;
var builder = WebApplication.CreateBuilder(args);
@@ -6,6 +7,8 @@ var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddDevExpressBlazor();
var app = builder.Build();
// Configure the HTTP request pipeline.

3
DbFirst.BlazorWebApp/appsettings.Development.json
View File

@@ -4,5 +4,6 @@
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
}
},
"ApiBaseUrl": "https://localhost:7204/"
}

1
DbFirst.BlazorWebApp/appsettings.json
View File

@@ -5,5 +5,6 @@
"Microsoft.AspNetCore": "Warning"
}
},
"ApiBaseUrl": "https://localhost:7204/",
"AllowedHosts": "*"
}