The example shows how to switch between database connections from the Web Dashboard UI. To implement conditional logic for the Web Dashboard Control, pass custom headers from the client to the server.
To switch between databases from the UI, add buttons corresponding to databases to the Designer Toolbar. Use the preparing event to customize the existing items in the Designer Toolbar. When a button is clicked, a custom header with the corresponding database name (nwind/nwind2) is passed with the fetchRemoteService.headers option. After that, the DashboardControl.reloadData method is called to reload the data. See the customizeToolbar.js file for implementation details.
On the server, the IHttpContextAccessor is used to access the passed parameter value (database name) in the DashboardConfigurator.ConfigureDataConnection event handler. The CustomStringConnectionParameters class instance is used to initialize and apply a custom connection string.
Files to Review
Documentation
More Examples
- Dashboard for ASP.NET Core - How to Limit Data Displayed in Designer Mode
- Dashboard for ASP.NET Core - How to Use Parameters to Update a Specific Dashboard Item Without Refreshing the Entire Dashboard
- Dashboard for ASP.NET Core - How to implement authentication
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
wwwroot/js/customizeToolbar.js
JavaScriptfunction onBeforeRender(sender) {
let dashboardControl = sender;
dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
let toolbarExtension = dashboardControl.findExtension("designerToolbar");
if (toolbarExtension) {
toolbarExtension.on("preparing", customizeDesignerToolbar);
}
}
function customizeDesignerToolbar(e) {
let dashboardControl = e.component;
e.items.unshift({
widget: 'dxButton',
location: 'before',
cssClass: 'dx-refresh-custom-button',
options: {
text: 'DB1',
type: 'default'
},
onClick: () => {
dashboardControl.option('fetchRemoteService.headers', { "database": "nwind" });
dashboardControl.reloadData();
}
}, {
widget: 'dxButton',
location: 'before',
cssClass: 'dx-refresh-custom-button',
options: {
text: 'DB2',
type: 'default'
},
onClick: () => {
dashboardControl.option('fetchRemoteService.headers', { "database": "nwind2" });
dashboardControl.reloadData();
}
});
}
Program.cs
C#using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.ConnectionParameters;
using DevExpress.DataAccess.Sql;
using Microsoft.Extensions.FileProviders;
var builder = WebApplication.CreateBuilder(args);
IFileProvider fileProvider = builder.Environment.ContentRootFileProvider;
IConfiguration configuration = builder.Configuration;
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDevExpressControls();
builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
DashboardConfigurator configurator = new DashboardConfigurator();
configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(configuration));
configurator.SetDashboardStorage(new DashboardFileStorage(fileProvider.GetFileInfo("Data/Dashboards").PhysicalPath));
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
var dataSourceSQL = new DashboardSqlDataSource("SQL Data Source", "nwind");
var query = SelectQueryFluentBuilder
.AddTable("Products")
.SelectColumns("ProductID", "ProductName", "UnitPrice")
.Build("Products");
dataSourceSQL.Queries.Add(query);
dataSourceStorage.RegisterDataSource("sqlDataSource", dataSourceSQL.SaveToXml());
configurator.SetDataSourceStorage(dataSourceStorage);
configurator.ConfigureDataConnection += (s, e) => {
if (e.ConnectionName == "nwind") {
IHttpContextAccessor httpContextAccessor = serviceProvider.GetService<IHttpContextAccessor>();
IHeaderDictionary headers = httpContextAccessor.HttpContext.Request.Headers;
string dbKey = headers.ContainsKey("database") ? headers["database"] : "nwind";
string connectionString = dbKey switch {
"nwind" => "XpoProvider=InMemoryDataStore;Read Only=true;Data Source=Data\\nwind.xml",
"nwind2" => "XpoProvider=InMemoryDataStore;Read Only=true;Data Source=Data\\nwind2.xml",
_ => throw new ArgumentOutOfRangeException("Incorrect database name")
};
e.ConnectionParameters = new CustomStringConnectionParameters(connectionString);
}
};
return configurator;
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseDevExpressControls();
app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.Run();
Pages/Index.cshtml
Razor@page
@{
Layout = null;
}
<!-- Add the following namespace usages: -->
@using DevExpress.AspNetCore
@using DevExpress.DashboardWeb
@using DevExpress.DashboardAspNetCore
<!DOCTYPE html>
<html lang="en">
<head>
<link href="~/css/site.min.css" rel="stylesheet" />
<script src="~/js/site.min.js"></script>
<script src="~/js/customizeToolbar.js"></script>
</head>
<body>
<!-- Add the Web Dashboard with the "clientDashboardControl1" name to a View, specify its size, and set the Working Mode to Designer. -->
<div style="position: absolute; left:0;top:0;right:0;bottom:0;">
@(Html.DevExpress().Dashboard("clientDashboardControl1")
.ControllerName("DefaultDashboard")
.WorkingMode(WorkingMode.Designer)
.OnBeforeRender("onBeforeRender")
.Width("100%")
.Height("100%")
)
</div>
</body>
</html>