SignalR offers real time collaborative apps in Asp.net MVC 3

This article explains Asp.net developers to create a simple blog app with the use of Asp.net MVC3 and Signal R. Asp.net allow collaboration of multiple Asp.net developers for reviewing the same article in real time.

Introduction to SignalR:

Helping Asp.net developers for maintaining persistent connections between the client and server, an asynchronous signalling is called SignalR. It helps during Asp.ent development to build collaborative web apps quickly. Commonly where long polling is used are stock tickers or chat clients. SignalR throws a whole new set of opportunities for ASP.net developers to create rich collaborative applications on the platform.

Outsource Asp.net development and get your business problem solved with SignalR:

Seeing the real world, most of the people must have used Google docs and it can be shared with multiple people now. It also enables two people to edit it at the same time and each person can track who is doing what though different colored carat. What if such embedment you could to like “Review” functionality to your app? It would definitely be cool. Just imagine that you fill a form and then send it for review so you can find out someone down the chain has rejected it after a week only because of a typo? Now think how would it be if you could do instant reviews and everyone comes out with their inputs and sign offs the document at the same time. How much time & energy or efforts it would save?

In this article we will see how Asp.net developers can create a simple blog app allowing multiple collaborators to review an article at real time.

Step 1 would be to Create new ASP.NET project. Select the MVC3 web application template from Visual Studio File > New Project.

Select ‘Intranet Application’ which will result into creation of a project working default with Windows Authentication mode.

Razor View engine can be used for this and keep the Use HTML5 semantic markup checked.

If you already have Nuget Package Manager installed, skip to Step 2. Else go to Tools > Extension Manager, and from the ‘Online Gallery’ install ‘NuGet Package Manager’.

Once you are finished with installation you will require to restart Visual Studio.

Step 2 is to Setup SignalR dependencies with the use ofNuget

Bring up the Package Manager Console from the View->Other Windows->Package Manager Console menu item. Then type in the console “Install-package SignalR”. Wait till you are done with the packages to be downloaded and setup. Also the jQuery dependencies will get refreshed.

Step 3 is to Setup Data Model

For setup data we will use EF Code First. The entity is called BlogPost and it has three properties for simplicity, Id, Title and BlogBody.

Create a BlogPostContext class that derives from DbContext and build the Solution.

Step 4: Scaffolding of the Controllers and Views

For this we will require building in scaffold tooling for generating the controller and views.

Select the Template, Model class and Data context class in the ‘Add Controller’ dialog

Step 5: Add the ‘Review’ Controller and View

Scaffolding by default will generate Index, Create Edit and Delete views each mapping to their respective actions. By leaving these as is and adding a new Action called ‘Review’. For doing so it requires simple copy of Edit Action and thenrename it.

In the BlogPostController, add the Review action methods as follows:

Under Views\BlogPost add the Review.cshtml

In the Index.cshtml, add a new link to the ‘Review’ view.

Step 6 is the time to getSignalR into action

On the Server Side:

Create a folder called SignalR in your web project then add a class BlogHub.cs. Update the class.

The class is decorated with the ‘HubName’ attribute taking a string parameter which is the client side name of the “Hub”. It keeps track of subscribers and publishes the messages which are passed to it by the subscribers. The send method is called from the webpage. Appropriate hook-ups are taken care by SignalR framework.

On the Client Side

Open Review.cshtml and add the following references

From the installation of SignalR nugget package both jQuery and signalR dependencies will be available for you.

Comments? Questions? Email Here

© HowtoAdvice.com

How to Advice .com