SHASHANGKA SHEKHAR'S BLOG

Hi, I am Shashangka Shekhar, Working with Microsoft Technologies. This is my personal blog where I share some of my experiences.

ASP.NET MVC Real-Time app with SignalR

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

1

Step: 2

2

Step: 3

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. 

5

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.

Startup.cs

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.

CustomerHub.cs

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.

Index:

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:

11

Hope this will help someone 🙂

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

7 Comments

Post a comment