DaffittTech.NetworkStatus 2.1.0

dotnet add package DaffittTech.NetworkStatus --version 2.1.0
                    
NuGet\Install-Package DaffittTech.NetworkStatus -Version 2.1.0
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="DaffittTech.NetworkStatus" Version="2.1.0" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="DaffittTech.NetworkStatus" Version="2.1.0" />
                    
Directory.Packages.props
<PackageReference Include="DaffittTech.NetworkStatus" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add DaffittTech.NetworkStatus --version 2.1.0
                    
#r "nuget: DaffittTech.NetworkStatus, 2.1.0"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package DaffittTech.NetworkStatus@2.1.0
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=DaffittTech.NetworkStatus&version=2.1.0
                    
Install as a Cake Addin
#tool nuget:?package=DaffittTech.NetworkStatus&version=2.1.0
                    
Install as a Cake Tool

DaffittTech Network Status

Overview

DaffittTech.NetworkStatus is a Blazor utility package for checking and monitoring Internet connectivity in Blazor applications. It leverages JSInterop to interact with browser APIs to communicate with JavaScript functions that do the connection status workload and then relay the results to the NetworkConnection component.

This README file is relevant to this NuGet package's current version, so older versions may vary. To take advantage of this Blazor utility package, follow the instructions below.

Software Dependencies

  • NuGet Package: DaffittTech.NetworkStatus
  • Latest Release: The current release version is 2.1.0
  • Target Framework: .NET 9.0
  • Dependencies: Microsoft.ASPNetCore.Components.Web (>= 8.0.6)
  • License: This package is licensed under the MIT License. See the LICENSE.txt file for more information.

API references

At this time there are no API references of which to speak.

Contribute

For the time being, this collection of components is maintained in a private repository and may not be accessed or contributed to.

Features

  • Detects online/offline status in real time or on demand.
  • Blazor component for UI integration.
  • Service for programmatic access to network status.
  • Customizable status check intervals.
  • Easy integration with Blazor projects.

Setting It Up

There are several steps to set up and use DaffittTech.NetworkStatus package.

  1. Install the NuGet package
  2. Register the package
  3. Add the directive to the _Imports.razor file
  4. Application entry point
  5. Inject the NetworkService into your Blazor code
  6. Add some properties
  7. Add the NetworkConnection component to your UI

Install NuGet Package

Depending on your chosen Blazor project configuration, you will likely need to add this package to the application's Client-side (UI) and server-side based on where your pages and components are running from. However, you may need to experiment, as Microsoft likes to change technologies on a moment-to-moment basis.

  1. The most straightforward way to add this service to your Blazor application is to use the Package Manager in Visual Studio. Search for Daffitt Technologies and select DaffittTech.NetworkStatus package, choose the projects you wish to install it into (client-side and/or server-side), and click install.

  2. You can also go to DaffittTech.NetworkStatus on NuGet.org and follow the directions for your favorite method of installing NuGet packages.

Register The NetworkService

Add the using statement and the NetworkService to the Programs.cs file. This will need to be added to both server-side and client-side if your project uses both. We are using AddScoped rather than AddSingleton or AddTransiant because this package uses JSInterop which requires the component to be registered as Scoped.

using DaffittTech.NetworkStatus;
// Other stuff goes here...
builder.Services.AddScoped<NetworkService>();

_Imports.razor

To prevent having to add this next line at the top of every .razor file where you need it, you can add this line to the _Imports.razor file.

@using DaffittTech.NetworkStatus

If you separate your .razor page from its .cs page, you may also need to add the line above to the using section in the .cs page (without the "@" symbol).

Application Entry Point

Add the following line to your end of the <body> section if your App.razor or _host.cshtml or index.html file.

<body>
    
    <script src="_content/DaffittTech.NetworkStatus/NetworkService.js"></script>
</body>

Inject NetworkService Into Your Blazor Code

If you keep your .razor code and back-end .cs code together in the same razor file, add this line at the top of the razor page.

@inject NetworkService NetworkService

If you separate your .razor page from its .cs page, add this line to the partial class of the page. You'll also want to add a private property to hold the value of the network status.

[Inject] protected NetworkService NetworkService { get; set; }

Add Some Properties

To set the Interval and the Timeout parameters of the component, you'll need to add a couple of properties to hold those values. You could enter them directly, but that's not good practice. To the code section or the partial .cs file add these properties.

private int? Interval { get; set; } = null; // Seconds between auto status checking.
private double? NetworkStatusTimeout { get; set; } = null; // Time allowed in seconds for checking status

Add NetworkConnection Component To The UI

To include the component, simply insert it as an HTML element within your .razor page. In my example, the component is positioned near the bottom of its container, which uses Bootstrap styling. However, you can place the Network Connection component wherever you prefer and use any design method that suits your project. This is just one way to position it at the base of a vertical menu drawer.

With Bootstrap
<div class="d-flex flex-column position-absolute bottom-0 px-3 text-center w-100">
    <NetworkConnection Interval="@Interval" Timeout="@NetworkStatusTimeout" />
</div>
Without Bootstrap

If you are not using bootstrap, you may get the same affect doing it this way.

<div style="display: flex; flex-direction: column; position: absolute; bottom: 0; padding: 0 16px; width: 100%">
    <NetworkConnection Interval="@Interval" Timeout="@NetworkStatusTimeout" />
</div>

Parameters

Set the Interval property (in seconds) above zero to check network status regularly; set it to null to disable automatic checks. Note: This setting will repeatedly send checks until the NetworkStatus component is disposed.

The NetworkStatusTimeout property sets how long (as a null-able double in seconds) to wait for a response before timing out. Values greater than zero are converted to milliseconds for the timeout. If null or zero, a default of 1.0 second applies.

Code Section Example

Finally, set up an event listener and handler to capture the action event of the network status change. You'll also need to trigger updates, respond to the change using the OnAfterRenderAsync and UpdateNetworkStatus methods, and finally call a dispose to clean it up.

using DaffittTech.NetworkStatus;
using Microsoft.AspNetCore.Components;

namespace DaffittSampleBlazorApp.Client.Layout
{
    public partial class NavMenu : ComponentBase, IDisposable
    {
        [Inject] protected NetworkService _networkStatusService { get; set; }

        private int? Interval { get; set; } = null; // Seconds between auto status checking.
        private double? NetworkStatusTimeout { get; set; } = null; // Time allowed in seconds for checking status

        protected override async Task OnInitializedAsync()
        {
            _networkStatusService.OnNetworkStatusChanged += UpdateNetworkStatus;
            await base.OnInitializedAsync();
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                // With version 2.1.0, this step is NO LONGER optional.
                // The automatic check has been eliminated to reduce unnecessary redundant
                // requests to the ping service. Be sure to call this function during the
                // initial render of the component or page containing the Network Status component.
                await _networkStatusService.GetStatusAsync(NetworkStatusTimeout);
            }
            await base.OnAfterRenderAsync(firstRender);
        }

        private void UpdateNetworkStatus(bool status)
        {
            // Do some stuff here with the "status" if you are so inclined...
        }

        public void Dispose()
        {
            _networkStatusService.OnNetworkStatusChanged -= UpdateNetworkStatus;
            _networkStatusService.Dispose();
        }
    }
}

If you are placing your UI content and @code content in the same .razor page remember to add the reference to IDisposable at the top like so...

@implements IDisposable
Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
2.1.0 432 10/7/2025
2.0.1 220 10/6/2025
1.4.0 217 1/16/2025
1.3.0 229 1/12/2025

This is a new release from 1.4.0 to simplify features and stability.