Introduction

In this article, you will learn how to send email in Orchard CMS using it’s out of box services

Steps to send email in Orchard CMS

• Create Email wrapper template
• Create Email Template
• Inject required orchard services in the Controller or Custom Service
• Specify email template to use and pass data
• Sending email using MessageService

To demonstrate the scenario, we take the example of sending a challenge email to verify the user email address. In Orchard. Users module, you will find all this code to send an email using orchard services.

Steps 1 - Create Email wrapper template

It applies default Body alteration for SmtpChannel which create the body of HTML template. create a new file “Template.User.Wrapper.cshtml” under Views folder.

@* Override this template to alter the email messages sent by the Orchard.Users module *@ @Display.PlaceChildContent(Source: Model) 

Steps 2 - Create Email Template

Now create the content of the email. It applies default Body alteration for SmtpChannel which create the body of HTML template. create a new file “Template.User.Validated.cshtml” under Views folder. It is the same razor view page where we can pass the data and place on the place holders. e.g. Model.ContactEmail is the address of the contact person of the website.

@T("Thank you for registering with {0}.<br /><br /><br /><b>Final Step</b><br />To verify that you own this e-mail address, please click the following link:<br /><a href=\"{1}\">{1}</a><br /><br /><b>Troubleshooting:</b><br />If clicking on the link above does not work, try the following:<br /><br />Select and copy the entire link.<br />Open a browser window and paste the link in the address bar.<br />Click <b>Go</b> or, on your keyboard, press <b>Enter</b> or <b>Return</b>.", Model.RegisteredWebsite, Model.ChallengeUrl)
@if (!String.IsNullOrWhiteSpace(Model.ContactEmail)) {
    @T("<br /><br />If you continue to have access problems or want to report other issues, please <a href=\"mailto:{0}\">Contact Us</a>.",Model.ContactEmail)
}

Steps 3 - Inject required orchard services in the Controller or Custom Service

To render the email template, we need to use a few orchard services. In Orchard CMS every view object is a shape so we need to create a shape using our created template views. We need to inject IShapeService and IShapeFactory to create the shape for the email content. IMessageService required to send the email through the SMTP channel.

namespace Orchard.Users.Services {
    public class UserService : IUserService {
        private readonly IMessageService _messageService;
        private readonly IShapeFactory _shapeFactory;
        private readonly IShapeDisplay _shapeDisplay;
        public UserService(
        IMessageService messageService, 
        IShapeFactory shapeFactory,
        IShapeDisplay shapeDisplay) {

            _messageService = messageService;
            _shapeFactory = shapeFactory;
            _shapeDisplay = shapeDisplay;
        }
        ...

Steps 4 - Specify email template to use and pass data

At this step, we specify the email and wrapper template to create the Shape for HTML content. In below line of code ShapeFactory.Create method takes the first parameter for the email template then we add email wrapper template in the template metadata. Along with this, we pass the model data using the anonymous object.

var template = _shapeFactory.Create("Template_User_Validated", Arguments.From(new {
    RegisteredWebsite = site.As<RegistrationSettingsPart>().ValidateEmailRegisteredWebsite,
    ContactEmail = site.As<RegistrationSettingsPart>().ValidateEmailContactEMail,
    ChallengeUrl = url
}));
template.Metadata.Wrappers.Add("Template_User_Wrapper");

Steps 5 - Sending email using MessageService

Now specify the mail message Subject, Body and Recipients of the email message. You can also specify attachments also. Just add the “Attachments” key and List as value to the parameters dictionary. Attachment should be the file path to attach with the email message.

var parameters = new Dictionary<string, object> {
                    {"Subject", T("Verification E-Mail").Text},
                    {"Body", _shapeDisplay.Display(template)},
                    {"Recipients", user.Email}
                };

        _messageService.Send("Email", parameters);

Below is the complete code for method which sends the challenge email:

public void SendChallengeEmail(IUser user, Func<string, string> createUrl) {
    string nonce = CreateNonce(user, DelayToValidate);
    string url = createUrl(nonce);

    if (user != null) {
        var site = _siteService.GetSiteSettings();

        var template = _shapeFactory.Create("Template_User_Validated", Arguments.From(new {
            RegisteredWebsite = site.As<RegistrationSettingsPart>().ValidateEmailRegisteredWebsite,
            ContactEmail = site.As<RegistrationSettingsPart>().ValidateEmailContactEMail,
            ChallengeUrl = url
        }));
        template.Metadata.Wrappers.Add("Template_User_Wrapper");
        
        var parameters = new Dictionary<string, object> {
                    {"Subject", T("Verification E-Mail").Text},
                    {"Body", _shapeDisplay.Display(template)},
                    {"Recipients", user.Email}
                };

        _messageService.Send("Email", parameters);
    }
}

Conclusion

I guess that’s all to send an email in Orchard CMS.

Introduction

In this article, you will know that how to enable docker support for ASP.NET application in Visual Studio. We will create an ASP.NET Core application docker support and also enable docker support in an existing application.

Prerequisites

• Docker for Windows
• Visual Studio 2017 or later with the .NET Core cross-platform development workload

Enable Docker support in a new application

You can get Docker support in your project when you create a Visual Studio web project, either. NET Core or the full framework. If you choose the .NET Core framework, you get the option to add Docker support in the new project wizard but for the full framework, we can add Docker support later context menu “Solution Explorer”. See below steps to create a .NET Core project with Linux container support:

Docker tools in Visual Studio understand the difference between. NET Core and the. NET full framework so the generated files will nicely reflect those different targeted platforms.

To add Docker support for the full framework, go through previous post - Containerizing a .NET application

Enable Docker support in a new application

You add Docker support after creating a project is by right-clicking the project in the “Solution Explorer” and then select “Docker Support” option under the Add submenu.

Visual Studio will add DockerFile and .dockerignore to the project that will be used to build a docker container image starts with a reference to the base image dotnet:2.2-aspnetcore-runtime.

Note: To build this container, you need to switch the Docker tools for Windows on your machine to run Linux containers. If it is targeting to different operating system type, then you would get errors during the build since you can't mix Linux containers with Windows containers.

Docker support also added the generated YAML files. YAML files can be used together with docker-compose to execute Docker commands to a set of containers instead of only one at a time so that multiple container can work together for the microservices scenarios.

docker build -f "D:\DevWorkSpaces\GitHub\WebDevLearning\WebDev\WebDev.Containerized.MVCWeb\Dockerfile" -t webdevcontainerizedmvcweb:dev

Build Docker image from CLI

Open command prompt in administrative mode and run the below command  in project folder:

C:\Users\niranjansingh\Source\Repos\WebDevLearning\WebDev\WebDev.AspNETMVC>docker build .

Running application under Docker Environment

For .NET Core framework applications, Just run the application by selecting the Docker option just after the Run arrow button. After that application will build and create Docker image according to the settings provided in the DockerFile.

For my case application is targeting “Linux” and Docker for Windows on my system is configured to run the Windows contains so it will not build my case. So, remember to switch particular target Operating system containers before you build the application.

For a .NET framework application, make docker-compose as startup project. After this modify the .yml files to build and run the contains.

You will see Docker Compose button on the place of “Docker” in .NET full framework applications.

Click on Debug button to let the docker decompose to build and run the docker image on the bases of yml file configuration.

A component has a lifecycle which is managed by Angular. Below are the Angular component life cycle hooks:

1. Create
2. Render
3. Create/Render child components
4. Process Changes
5. Destroy

Angular creates the component then renders it. After that it get the creates and renders its child components. If there are any changes in component’s data bound properties then processes changes and at last destroys it before removing its template from the DOM.

Angular provides a set of lifecycle hooks and below are few of them:

1. OnInit – it is used to perform component initialization and it is used to perform any component initialization after Angular has initialized the data bound properties. It is a good place to retrieve the data for the template from a back-end service.
2. OnChanges - It is used to perform any action after Angular sets data bound input properties.
3. OnDestroy – This lifecycle hook to perform any clean-up before Angular destroys the component.

Using Angular Lifecycle Hooks

To use a lifecycle hook, you have to follow the below steps:

Implement the lifecycle hook interface

Angular provides several interfaces you can implement, including one interface for each lifecycle hook. For example, the interface for the OnInit lifecycle hook is OnInit.

export ProductListComponent implements OnInit {

Import Lifecycle hook from Angular packages

You have to import the lifecycle hook interface. Include OnInit in the import statement with Component as below

import { Component, OnInit } from '@angular/core';

Implement lifecycle hook method

After that you have to implement lifecycle hook method. Lifecycle hook interface defines one method which has name prefixed with ng with interface name. For example, the OnInit interface hook method is named ngOnInit.

ngOnInit() { // Some code here } 

Complete component declaration:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'pm-products',
  templateUrl: './product-list.component.html',
  styleUrls:['./product-list.component.css']
})
export class ProductListComponent implements
{
       constructor() { }
      ngOnInit() { }
}

In this you can use another Angular Lifecycle hooks to implement required functionality at particular event.

What is NativeScript?

NativeScript is a framework that let you to build cross-platform, native iOS and Android apps without web views. Use Angular, TypeScript or modern JavaScript to get truly native UI and performance while reusing the skills and the code from your web projects. Get 100% access to native APIs via JavaScript and reuse of packages from npm, CocoaPods and Gradle. Open source project maintained by Progress.

Getting Started With NativeScript

To get start with NativeScript, It require setup NativeScript CLI on your system. There are two way to setup NativeScript CLI, Quick Setup and Full Setup. Go through the System Requirements and CLI Setupdocumentation of NativeScript to set up your system.

Information Source - Set Up Your System

I am on a Widows 10 machine so I followed the Full Setup approach and followed below setup install all prerequisites to start with NativeScript:

1. Open command prompt as an administrator on you system.
2. copy and paste the script below into your command prompt and press Enter:
   

   @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

Note: Please be sure that you run this command in cmd as an administrator (Windows key > type "cmd" > right click > Run as Administrator).

After the installation, your system will have following tools available:

• The latest stable official release of Node.js (LTS)
• Google Chrome
• JDK 8
• Android SDK
• Android Support Repository
• Google Repository
• Android SDK Build-tools 28.0.3 or a later stable official release
• Android Studio
• Set up Android virtual devices to expand your testing options

The two environment variables JAVA_HOME and ANDROID_HOME are required for Android development, which should have automatically added as part of the installation:

Creating first program using NativeScript

tns create HelloWorld --template https://github.com/NativeScripting/template-ng-getting-started-hello

Now open project in the Visual Studio code using below command:

cd HelloWorld 
code .

It will open the project in the Visual Studio Code. Now you can edit the project file and also can add some plugin for NativeScript Angular snippets.

Running the Application

If you do not required libraries in the project folder then use “npm install” command to download the dependencies.

You can now bundle your project by passing --bundle flag to NativeScript

CLI commands:

- tns build android --bundle

- tns build ios --bundle

- tns run android --bundle

- tns run ios –bundle

Run the command “tns run android –bundle” to test your first application in the emulator.

It is all done with creating a simple application in using the NativeScript.

What is Docker?

From Wikipedia:
Docker is a computer program that performs operating-system-level virtualization, also known as "containerization". It was first released in 2013 and is developed by Docker, Inc.

Docker is used to run software packages called "containers". Containers are isolated from each other and bundle their own application, tools, libraries and configuration files; they can communicate with each other through well-defined channels.

All containers are run by a single operating system kernel and are thus more lightweight than virtual machines. Containers are created from "images" that specify their precise contents. Images are often created by combining and modifying standard images downloaded from public repositories.

Unification of container technology

1. A set of command-line tools to work with containers
2. A unified way to build Container images
3. A unified way of maintaining images in a registry
4. A daemon process that manages the images & networking on a host machine

from: Microsoft doc

What Is a Container?

A container is an isolated, resource controlled, and portable operating environment. A container provides a place where an application can run without affecting the rest of the system and without the system affecting the application.

If you were inside a container, it looks very much like you are inside a freshly installed physical computer or a virtual machine.

Containers are compared to virtual machines, but they are completely different technology.

Below are the benefits of containers over Virtual machines:

1. Containers provide the isolation of a virtual machine with the lightweight process. Container provides almost the same level of isolation as you see in a virtual machine but is very lightweight in terms of overhead and start-up time.
2. You can see inside a container and also make changes to it but in case of Virtual machines you have to first start the VM to the Virtual machine architecture and data. You can even make changes in your container, and then the isolation will ensure that nobody else but you can see the changes that you've made.
3. The container will enable you to fully utilize the host machine resources e.g. CPU, memory, disk, and networking.
4. Containers does not pre-allocate any resources. It is very light weight comparable to a process. If you run multiple containers on the same host machine, then these are fully isolated from each other and the host.

Containers vs. Virtual Machines

At first look containers and Virtual machines look similar because both uses the hardware and the host operating system. You can run applications on the host operating system, and we can have virtual machines and Containers on the host as well.

Virtual machine has its own operating system and separate application on it. On another hand still have the hardware and, of course, the host operating system interact with the kernel which is responsible for interacting with the hardware handling scheduling of different processes and managing resources like virtual management and CPU cycles.

Containers let us to run our application by sharing the operating system kernel. This kernel has edit capabilities to create isolation between the different containers and never share anything else between the containers. Although Virtual machine provide isolation but using Hypervisor. Virtual machine has its own operating system and applications.

Setting up the Virtual machine operating system and application is a long task but setting up the containers using the images is a faster process. It just requires an image and configure your application on container using these predefined container images.

Container provide faster bootup time rather than the virtual machine. They are up and running within few seconds.

Source: Run Windows Containers

Containerise a .NET application

To create custom image for your application, we require docker tools. In this article, you will know that how to push your containerized application to the docker repository and to Azure App Service.

You can also deploy your application’s container from Visual Studio to Azure Container Registry, and then run it in App Service.

Now it is time to start creating a container image for ASP.NET MVC application using the windows containers.

Prerequisites

To create a .NET application container image, we require below prerequisites tools:

• Sign up for a Docker Hub account
• Install Docker for Windows.
• Switch Docker to run Windows containers.
  
• Install Visual Studio 2017 with the ASP.NET and web development and Azure development workloads. If you've installed Visual Studio 2017 already:

o Install the latest updates in Visual Studio by clicking Help > Check for Updates.

o Add the workloads in Visual Studio by clicking Tools > Get Tools and Features

Note: In this article, Visual Studio 2019 Preview is used to create to the ASP.NET MVC application.

Create/Open an ASP.NET web app

In Visual Studio, create a ASP.NET MVC project by selecting File > New > Project.

In the New Project dialog, select the template Visual C# > Web > ASP.NET Web Application (.NET Framework).

Define the solution and the project name then press create.

select the MVC template and do not forgot to select Enable Docker Compose support.

Select OK to continue.

Once the project is setup then you will find Dockerfile under the project. It defines the structure of the container and which base image will be used to host your application.

Update the docker file with Azure App Server supported base image so the update docker file would be as below:

FROM microsoft/aspnet:4.7.1
ARG source
WORKDIR /inetpub/wwwroot

COPY ${source:-obj/Docker/publish} .

Here is the list of  supported base image.

Create and Publish to Docker Hub

In the Solution Explorer, right-click the created project and select Publish.

Select Container Registry > Docker Hub > Publish. There is another option also available. You can directly publish this application to Azure App Server or Azure Container registry. Although, we took the publish path from docker registry to Azure App service.

Enter your docker credentials:

Now publish process create the docker image using the base image and bundle your application in to the image.

When process complete you will be able to see the pushed docker image in the docker registry at docker hub.

Now setup the Azure Container service to use this docker image.

Create a Windows container app

Sign in to the Azure portal at https://portal.azure.com with your account.

1. Choose Create a resource in the upper left-hand corner of the Azure portal.
   
2. In the search box above the list of Azure Marketplace resources, search Containers and then select Web App for Containers.
   
3. Provide an app name and let the default option create a new resource group selected, and click Windows in the OS box.
   
4. By default, wizard Create an App Service plan but you can create your custom by clicking App Service plan/Location > Create new. Give the new plan a name, accept the defaults, and click OK.
5. Now you will configure the container and provide the detail of the create docker image in the step. Click Configure container. In Image and optional tag, use the repository name you created in Publish to Docker Hub step, then click OK. In previous step I have create repository with name “niranjankala\webdevaspnetmvc” as you can see in above docker hub image.
   There is an option for the Kubernetes but Kubernetes is only supported on Linux operating system-based applications.
6. Click Create and wait for Azure to create the required resources.

Once the deployment complete you are ready to browse your containerized application. Now browse “webdevaspnetmvc.azuresites.net” or whatever application name you chosen during the web app service setup process.

Now your containerized application is up and running.

Microsoft announced the availability of Visual Studio 2019 Preview 1 in the Microsoft Connect(); 2018  keynote. Download is now available for both Windows and Mac platform.

What New Features bring with Visual Studio 2019

Visual Studio 2019 launched with faster tooling, enhanced collaboration and productivity improvements. The public preview 1 includes a new start window experience to get developers into their code faster, a new search experience, increased coding space smarter debugging, AI-powered assistance with IntelliCode, increased refactoring capabilities, and built-in access to Visual Studio Live Share.

Below the list of improved features

Source: Visual Studio 2019 Preview

Intellicode and One-click Code Cleanup

Drive code maintainability and fix warnings and suggestions with one-click code clean up, and use more refactoring capabilities than ever.

Live Share and PR Experience

you can collaborate in real-time whether your team members are working from home or across the world. Live Share installs by default and supports all projects, app types, and languages.

When you’re ready to check in your code, try the new pull request (PR) experience. It lets you and your team quickly review code (even run the app and debug!) from Azure Repos directly in the IDE.

Search Window and Snapshot Debugger

Improved stepping performance and support for large C++ apps enhance your debugging experience. New search capabilities in Autos, Locals, and Watch windows help you find objects or values, or visualize Collections.

With new app targets for Snapshot Debugger, you can debug issues in a production environment without impacting performance or stability. It takes a snapshot of the environment so you can inspect objects and call stacks.

Connected Services and Azure App Services

Configure your applications to use Azure services with just a few clicks. You can create new instances of Azure Storage, Key Vault, Cognitive Services, and more without ever leaving the IDE.

Start developing your code locally and offline until you are ready to deploy. Then publish directly to Azure in minutes, not hours, targeting virtual machines, containers, or Azure App Service.

.NET Core 3 and C++ Improvements

Visual Studio 2019 gives your current projects the full-fledged support they need across any platform including desktop, web, mobile, and games. It also supports .NET Core 3, one of the fastest frameworks on the planet.

With support for Linux targeting, and CMake and ClangFormat support, Visual Studio 2019 is the most complete IDE for C++ developers. C# and F# developers can build native cross-platform apps with Xamarin.

Happy Coding

Recently, I come across the MSDN magazine article “Java Gets AI-Assisted IntelliCode in Visual Studio Code Editor”. It is great that the Microsoft Visual Code, light weight open source editor is now enabled with features which was part of the Visual Studio 2017.

It is not alone support Microsoft support languages e.g. C#, VB.NET also the Java and Python too.

What is IntelliCode?

Definition from: Introducing Visual Studio IntelliCode

IntelliCode is a set of AI-assisted capabilities that improve developer productivity with features like contextual IntelliSense, inference and enforcement for code styles, and focused reviews for your pull requests (PRs.)

Visual Studio IntelliCode – extension is in Preview and the Visual Studio IntelliCode extension provides AI-assisted productivity features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning. It can be installed directly in Visual Studio code:

Little demo from MSDN article:

Happy Coding!

Introduction

This is the first time that I saw code preview through scrollbar in Visual Studio. I have use most of the Visual Studio IDE starting from Visual Studio 2002 and scrolling of code files done using the classic scrollbar.

Starting from Visual Studio 2013, an enhanced scrollbar feature is enabled but I was not aware of it till now. Recently I saw below code preview features through a wide scrollbar:

Enabling Visual Studio scrollbar code preview mode

By default, this feature is not enabled so that I have not used this cool feature before. Actually, it requires to switch the scrollbar mode and below are the steps to switch scrollbar mode:

1. Open option using Tools menu and select “Options”
2. In the options dialog select the Text Editor | All Languages | Scroll Bars node from left side menu
3. Now change the scrollbar behavior to map mode and check the “Show Preview Tooltip” checkbox as shown in below image.
   
   

I found it a cool feature which enables the developer to view the see the code in tooltip by hovering on the scrollbar without scrolling down to the bottom of the code file.

You can find detailed information at Visual Studio scroll bar customization documentation.

Introduction

In this article we learn that how to create an offline installer for Visual Studio 2017. Recently Visual Studio 2017 version 15.8 Released and then i have updated Visual Studio 2017 on my laptop. I have another machine which does not connect with high speed internet so I need to install Visual Studio through offline installer (ISO).

Microsoft designed Visual Studio 2017 installer to install specific modules (workload-based model) and allows to install minimal set of features to start development using Visual Studio.

Create Visual Studio 2017 offline installation media

Step 1 – Download the Visual Studio installer setup

It is recommended to use Visual Studio web installer because it will always install/ update to the latest version of the Visual Studio 2017.

Download the latest version of Visual Studio 2017 Web installer by clicking below links
Visual Studio Community 2017 | Visual Studio Professional 2017 | Visual Studio Enterprise 2017

Step 2 – Create/ Download installation setup files

To create updated version installation for Visual Studio, use the below command create or update the existing installation layout to a newer version. You don't have to specify any additional command-line parameters.

vs_enterprise.exe --layout d:\vs2017ent

It will create a complete local installation media for Visual Studio 2017 with all features and definitely it will take lots of time to download all the work loads.

You can also specify the language at the Visual Studio to download so that it will download installation files for the specified set of languages only

vs_enterprise.exe --layout d:\vs2017ent --lang en-US

In my case, I have already downloaded Visual Studio 2017 installation files earlier. This time I need to update this installation layout to transfer update on my offline computers.

Once the offline installation files saved at the specified location then transfer it on another computer and ready to install the Visual Studio 2017.

Click the vs_setup.exe file to start the installer then install the Visual Studio after selecting the required development environment features you want to install.

Clean up previous version obsolete package

During the update process of existing Visual Studio installation files, my computer drive gets full and some of the packages failed to download. I checked the installation layout folder and found that there are previous version packages also exists. I have removed few of them manually to complete the download process.

Visual Studio installations files folder size incrementally increase whenever we update the existing installation files. Visual Studio installation folder may have some obsolete packages that are no longer needed by the latest Visual Studio installation.

You can use the --clean option to remove obsolete packages from an offline cache folder.

Source of information: How to remove older versions from a layout

Step 1 – Find file path(s) to catalog manifest(s) that contain those obsolete packages

You can find the catalog manifests in an "Archive" folder in the offline layout cache. They are saved there when you update a layout. In the "Archive" folder, there is one or more "GUID" named folders, each of which contains an obsolete catalog manifest. The number of "GUID" folders should be the same as the number of updates made to your offline cache.

Step 2 - Run the “—clean” command by supplying the files paths to these catalogs

vs_enterprise.exe --layout d:\vs2017ent --lang en-US --clean d:\vs2017ent\Archive\d88a0497-7bee-42ad-8ea5-3361cd52e075\catalog.json

References:

Create an offline installation of Visual Studio 2017
Install Visual Studio 2017 on low bandwidth or unreliable network environments
Update a network-based installation of Visual Studio

SignalR is addition to the ASP.NET. It is started as an opensource project by some members of ASP.NET team. Due to its features and usability it is incorporated in the ASP.NET and officially become the part of the Microsoft ASP.NET.

SignalR enables you to do real-time communications between your browsers and server so that you push real-time updates to the browsers. Signal usage the technology that each browser support to enable real-time communication for example. If you are using the Internet Explorer 6 then used web pooling but in case of the current updated browser it used WebSocket.

Web pooling

In case of latest and updated clients, WebSocket make the real-time communication easy

Image create from - https://www.pubnub.com/learn/glossary/what-is-websocket/

SignalR does a quite bit more for the real-time communication. It is capable of communicating with multiple mobile and desktop clients.

It supports both ASP.NET and OWIN for open web interface for .NET. It can work with different Backplanes and using these Backplanes you can have multiple webserver which can in sync with each other. All of these keep real-time communication with different type of clients.

SignalR Components

For example, a client pushes a update to one of your webserver and that webserver communicates over the Backplanes to another web server which sends information down to a client using jQuery and html it is all setup for you through SignalR.

Let’s create a small SignalR example: This example is just for showing the functionality. In this example we just create static variable to know the active connections.

Open Visual studio and create an empty ASP.NET application

Then add a SignalR Hub Class, but there is another option is available “SignalR Persistent Connection Class” which something low level connection. SignalR Hub Class is high level implementation use. Now right click on the project in Solution Explorer and select New -> New Item to add a Hub Class named “ActiveConnectionCounter”.

Once you add this class file to the project then required references automatically added to the project e.g. jQuery and react JavaScript libraries.

Now the add static variable to keep the active connections and rename default create method name to “NotifyNewUser”. After that notify the all clients about the active connections change by specifying a dynamic method as shown in the below code snippet.

namespace WebDev.AspNetReact
{
    public class ActiveConnectionCounter : Hub
    {
        static int activeConnections = 0;
        public void NotifyNewUser()
        {
            activeConnections += 1;
            //Notify all users about the active users by passing value to a dynamic method
            Clients.All.onAtiveConnectionChanged(activeConnections);
        }
    }
}

Now time to trap the disconnected event so that we can notify about the disconnection of the any user. To do so override the OnDisconnected method and notify the all clients after decreasing the active connections.

public override Task OnDisconnected(bool stopCalled)
{
    activeConnections -= 1;
    //Notify all users about the active users by passing value to a dynamic method
    Clients.All.onAtiveConnectionChanged(activeConnections);
    return base.OnDisconnected(stopCalled);
} 

Now in implementation client call the method NotifyNewUser to notify the new user active on the website and client notified using the “onAtiveConnectionChanged” callback.

To complete the example, add a html page to the project using Project->Add New Item menu or by right click on project.

Add a <div> to show the active users count and required JavaScript libraries e.g. jQuery, jquery.singalR.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
    <div id="activeUserCount"></div>
 
</body>
</html>

After that add script to initiate the communication.

<script type="text/javascript">
    $(function () {
        var cn = $.hubConnection();
        
        var hub = cn.createHubProxy('activeConnectionCounter');
        hub.on('onAtiveConnectionChanged', function (i) {
            $('#activeUserCount').text(i);
        });
        cn.start(function () {
            //Invoke Server method name
            hub.invoke('NotifyNewUser');
        });
    });
</script>

Though we have created an empty ASP.NET project so we need to configure OWIN or map SignalR a startup. To do this create one Class with name Startup.cs under “App_Start” folder in the solution explorer.

using Owin;
namespace WebDev.AspNetReact
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

There are three way to configure the OWIN and they are described here - OWIN Startup Class Detection.

Now example is ready. Run the application and open the html page URL in different browsers.

Here we have created an example to start learning about the SignalR application and to know about the Visual Studio tool go through the tutorial.

Find example application code at here.