In topic we will focus on how to display real time updates from database with SignalR on existing ASP.NET MVC CRUD project.

The topic has two step:

  1. First step we will create a sample app to perform CRUD operations
  2. Second step we will make the app real-time with SignalR

Who are not familiar yet with SignalR Overview of SignalR from my previous post.

Step – 1

At first we need to create a database named CRUD_Sample. In sample db we have to create a table named Customers.

Stored Procedures:

Getting Started with MVC Project:

To create the sample applications, we need to have Visual Studio 2012 or later installed and be able to run the server on a platform that supports .NET 4.5.

Step: 1


Step: 2


Step: 3


Click ok and the visual studio will create and load a new ASP.NET application.

Use of Generic Repository:

With generic feature, we can reduce the amount of code we need for common scenarios.

Show an interface of a generic repository of type T, which is a LINQ to SQL entity. It provides a basic interface with operations like Insert, Update, Delete, GetById and GetAll.

The IDisposable Interface, Provides a mechanism for releasing unmanaged resources.

This is constraining the generic parameter to a class. Click for more

The type argument must be a reference type; this applies also to any class, interface, delegate, or array type.

Use of Middle-tire:

Use of Generic Repository in MVC-Application:

Use of views in MVC-Application:

Step – 2

Getting Started with SignalR:

The first thing is getting reference from NuGet. 


Get it on NuGet!

Register SignalR middleware:

Once you have it installed. Let’s create OwinStartup Class.

The following code adds a simple piece of middleware to the OWIN pipeline, implemented as a function that receives a Microsoft.Owin.IOwinContext instance.

When the server receives an HTTP request, the OWIN pipeline invokes the middleware. The middleware sets the content type for the response and writes the response body.


Create & Use Hub classes:

After finishing previous process, let’s create a Hub. A SignalR Hub make remote procedure calls (RPCs) from a server to connected clients and from clients to the server.


Code Explanation:

It gets the CustomerHub context

It call the client part of SignalR and tell it to execute the JavaScript method updatedData().

Let’s Modify our Existing View:

Now we will modify part of Index view as following, and we will display data with a partial view.


Partial View:

Let’s Modify our Existing Controller:

Home Controller:

In our home controller we will add a method named GetAllData(). Here the following method.

Here we are returning a partial view with returned data list, and just returning empty.

Finally Home Controller:

Finally Output:


Hope this will help someone 🙂

Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *