Building Real-Time Dashboards with ASP.NET Core, SignalR, and SQL Server
In today’s data-driven applications, real-time updates are no longer just “nice to have” — they’re expected. Whether you’re monitoring IoT data, tracking live user activity, or displaying stock prices, traditional request-response cycles and page refreshes simply don’t cut it.
In this post, we’ll build a simple real-time dashboard using:
- ASP.NET Core (7.0+) for the API backend
- SignalR for real-time WebSocket communication
- SQL Server 2019 as the data source
- jQuery & AJAX to handle client-side rendering and updates
Setup the ASP.NET Core Project
- Create a new ASP.NET Core project
- Add SignalR support
dotnet add package Microsoft.AspNetCore.SignalR
- Add SQL Server connection via EF Core or ADO.NET
Create the SignalR Hub
public class DashboardHub : Hub
{
public async Task SendMessage(string message)
{
await Clients.All.SendAsync("ReceiveMessage", message);
}
}
Register this hub in your Startup.cs
app.MapHub("/dashboardhub");
Set Up SQL Server and Seed Sample Data
Let’s assume you have a table like this:
CREATE TABLE SystemStats (
Id INT PRIMARY KEY IDENTITY,
CpuUsage INT,
MemoryUsage INT,
Timestamp DATETIME DEFAULT GETDATE()
);
Insert some mock values for testing.
INSERT INTO SystemStats (CpuUsage, MemoryUsage) VALUES (45, 60);
Listen for DB Changes (Options)
SQL Server Polling via BackgroundService
public class PollingService : BackgroundService
{
private readonly IServiceScopeFactory _scopeFactory;
private readonly IHubContext _hub;
public PollingService(IServiceScopeFactory scopeFactory, IHubContext hub)
{
_scopeFactory = scopeFactory;
_hub = hub;
}
protected override async Task ExecuteAsync(CancellationToken stoppingToken)
{
var lastTimestamp = DateTime.MinValue;
while (!stoppingToken.IsCancellationRequested)
{
using var scope = _scopeFactory.CreateScope();
var context = scope.ServiceProvider.GetRequiredService();
var latest = context.SystemStats
.OrderByDescending(x => x.Timestamp)
.FirstOrDefault();
if (latest != null && latest.Timestamp > lastTimestamp)
{
var json = JsonSerializer.Serialize(latest);
await _hub.Clients.All.SendAsync("ReceiveUpdate", json);
lastTimestamp = latest.Timestamp;
}
await Task.Delay(3000); // every 3 seconds
}
}
}
Register in Startup.cs using services.AddHostedService<PollingService>();
builder.Services.AddHostedService();
Frontend Integration with SignalR (JavaScript + jQuery)
<script src=“https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.5/signalr.min.js”></script>
<script>
const connection = new signalR.HubConnectionBuilder()
.withUrl(“/dashboardhub”)
.build();
connection.on(“UpdateDashboard”, function (data) {
// Update your dashboard UI here
$(“#cpuUsage”).text(data.cpu);
});
connection.start().catch(err => console.error(err));
</script>
That’s it. Hope you will test it out
Tips for Production
- Use Groups if you want to send user-specific updates
- Scale using Azure SignalR Service or Redis backplane
- Replace polling with SQL Query Notifications for advanced scenarios
- Always authenticate SignalR connections in secure apps
Conclusion
SignalR makes it surprisingly simple to bring real-time capabilities to your .NET applications. In just a few lines, you’ve gone from a static dashboard to one that updates live based on backend data changes.
Try enhancing this by:
- Showing charts using Chart.js
- Adding historical trend tracking
- Using user-based group targeting
intertoons
Interoons aim at providing electronically intelligent and comprehensive range of digital marketing solutions that exceed customer expectations. We implement revolutionary digital marketing ideas to achieve a common as well as the aggregate growth of the organization. Long-term customer relations and extended support are maintained.
Recent Posts
Integrating Razorpay, PhonePe & Paytm in Shopify
May 14, 2025