.NET Functions


Implementing Authentication and Authorization in ASP.NET Core Applications

In today’s fast-paced digital world, businesses and organizations heavily rely on real-time data visualization to make informed decisions. Real-time dashboards provide a comprehensive view of critical metrics, enabling teams to react promptly to changes and opportunities. In this blog, we will explore how to build interactive and real-time dashboards using ASP.NET Core and SignalR, a powerful library for enabling real-time communication in web applications.

Implementing Authentication and Authorization in ASP.NET Core Applications

1. Understanding the Basics of ASP.NET Core

Before diving into building real-time dashboards, let’s have a quick overview of ASP.NET Core. It is a cross-platform, high-performance, open-source framework for building modern web applications. ASP.NET Core offers a robust and flexible ecosystem for developers to create scalable and feature-rich web solutions.

2. Introducing SignalR

SignalR is a real-time communication library provided by Microsoft that simplifies building real-time web applications. It enables bi-directional communication between the client and the server, allowing server-side code to push content instantly to connected clients. This feature is incredibly useful for updating dashboard data in real-time, as users can see the latest information without manually refreshing the page.

3. Setting Up the ASP.NET Core Project

Let’s start by setting up a new ASP.NET Core project. Follow the steps below:

Step 1: Install the .NET SDK

Ensure that you have the .NET SDK installed on your machine. You can download it from the official Microsoft website.

Step 2: Create the ASP.NET Core Project

Open your terminal or command prompt and execute the following commands:

dotnet new web -n RealTimeDashboard
cd RealTimeDashboard

Step 3: Install SignalR Package

Now, install the SignalR package using NuGet Package Manager:

dotnet add package Microsoft.AspNetCore.SignalR

4. Creating the Dashboard UI

To create an interactive dashboard, we’ll use HTML, CSS, and JavaScript. For simplicity, we’ll create a straightforward dashboard displaying some mock data. You can customize it later with your specific data and visualization libraries.

Create a new folder named “Dashboard” under the “wwwroot” directory. Inside the “Dashboard” folder, add the following files:

4.1. index.html

<!DOCTYPE html>
    <title>Real-Time Dashboard</title>
    <link rel="stylesheet" href="styles.css" />
    <div class="container">
        <h1>Real-Time Dashboard</h1>
        <div class="data-container">
            <h2>Data: <span id="dataValue">0</span></h2>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signalr/5.0.11/signalr.min.js"></script>
    <script src="dashboard.js"></script>

4.2. styles.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f2f2f2;

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

.data-container {
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-top: 20px;

h1 {
    color: #337ab7;

h2 {
    color: #333;

4.3. dashboard.js

const connection = new signalR.HubConnectionBuilder()

connection.start().then(function () {
    console.log("SignalR connected.");
}).catch(function (err) {
    return console.error(err.toString());

connection.on("UpdateData", function (data) {
    document.getElementById("dataValue").innerText = data;

In this code, we’ve created a basic HTML structure for the dashboard, along with some minimal CSS styles to enhance the appearance. The dashboard.js file sets up a connection to the SignalR hub and listens for updates to the data.

5. Implementing SignalR Hub

The next step is to implement the SignalR hub that will be responsible for broadcasting data to connected clients.

Create a new folder named “Hubs” in the root directory of your project. Inside the “Hubs” folder, add a new class called “DashboardHub.cs.”

5.1. DashboardHub.cs

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace RealTimeDashboard.Hubs
    public class DashboardHub : Hub
        public async Task UpdateData(int value)
            await Clients.All.SendAsync("UpdateData", value);

In this class, we’ve defined a method UpdateData, which takes an integer value as a parameter. When this method is invoked, it broadcasts the value to all connected clients using the Clients.All.SendAsync method.

6. Updating Data in Real-Time

Now that we have set up the dashboard UI and the SignalR hub, let’s integrate them into our ASP.NET Core application.

6.1. Configuring SignalR

Open the “Startup.cs” file and add the following code inside the ConfigureServices method:

using RealTimeDashboard.Hubs;

// ...

public void ConfigureServices(IServiceCollection services)
    // Other service configurations...

This code configures SignalR services to be used in our application.

6.2. Registering the SignalR Hub

Next, add the following code inside the Configure method in the “Startup.cs” file:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    // Other app configurations...

    app.UseEndpoints(endpoints =>
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

This code maps the SignalR hub to the “/dashboardHub” URL in the application.


In this tutorial, we’ve learned how to build real-time dashboards using ASP.NET Core and SignalR. With SignalR, we achieved seamless communication between the server and the client, enabling automatic updates of dashboard data without requiring the users to refresh the page manually.

Real-time dashboards have extensive applications across various industries, including finance, healthcare, and logistics, empowering businesses to stay ahead of the competition by making data-driven decisions. By customizing the dashboard UI and integrating with your data sources, you can create a powerful tool that transforms the way your organization operates.

Now that you have a solid foundation in building real-time dashboards with ASP.NET Core and SignalR, you can explore more advanced features, such as authentication and authorization for securing your dashboard, using data visualization libraries for more engaging visual representations, and integrating with external APIs for real-time data updates. Happy coding!

Hire top vetted developers today!