KsigDo. A Knockout, SignalR, ASP.net, MVVM, MVC and EF all mixed together into a multiuser real time sync To Do” example
“The scope of technology used in this example was kind of breath taking, yet Anoop was able to bring it all together, exampling it to us as we followed along…KsigDo Task Pad – Real-Time UI View Model syncing across users with ASP.NET, SignalR, Knockout MVVM and EF
KsigDo = Knockout + SignalR To-do app. Source code is here in Codeplex, keep it handy.
Real time data syncing across user views *was* hard, especially in web applications. Most of the time, the second user needs to refresh the screen, to see the changes made by first user, or we need to implement some long polling that fetches the data and does the update manually.
Now, with SignalR and Knockout, ASP.NET developers can take advantage of view model syncing across users, that’ll simplify these scenarios in a big way, with minimal code. This post discusses how to implement a real time to-do pad, which will sync data across users accessing the application. This means, users can make changes to their tasks (add/remove/update etc), and other users will see the changes instantly. The focus is on the technique, I’m not trying to build a fabulous user experience here.
So, see this video, and here you can see the changes you apply to the tasks in one screen (adding, deleting, updating etc) you can see that the data is getting synced across multiple users.
…First Things First
To start with, let us create a new ASP.NET MVC 3.0 application. Create an empty project, I’ve ASP.NET MVC 3 tools update installed. Once you’ve the ASP.NET MVC project created, bring up the Nuget console (View->Other Windows-> Package Manager console), and install the Nuget packages for Knockout and SignalR.install-package knockoutjs
And SignalRinstall-package signalr
Also, do install Entity Framework latest version if you don’t have the same, so that we can use the Code first featuresInstall-Package EntityFramework
If you are already familiar with Knockout and SignalR, you may skip the next two titles and go directly to ‘Building KsigDo’ section.Knockout
Here is a very simple view model.
…Building The KsigDo App
Now, let us go ahead and build our KsigDo app. Let us put together the bits step by step.Task Model For Persistance Using Entity Framework Code First
In you ASP.NET MVC application, go to the Models folder, and add a new code first model file. Our model is very minimal, and as you can see, we have a taskId and a title for a task, and few validation rules defined, like title’s length. Also, the completed property decides whether the task is a completed one or not.
…TaskHub For Basic Operations
Create a new folder named ‘Hubs’ in your ASP.NET MVC project, and add a new TaskHub.cs file (No, we are not using Controllers now). And yes, you can place your Hubs any where. Here is our TaskHub, inherited from SignalR.Hubs.Hub class. You may see that we are using this Hub to perform most of the CRUD operations in our Task Model.
…The Main View
Our Index page has got a couple of view models, and a bit of HTML (view). For view models, we’ve a taskViewModel, and a taskListViewModel, as shown below. You may note that our taskViewModel is having almost the same properties as we have in our actual Task model, so that SignalR can manage the serialization/mapping pretty easily when ever we call the methods in our TaskHub.
Adding and Removing items
Have a look at the addTaskMethod in the taskListViewModel, you’ll see that we are creating a new task, and then invoking the ‘add’ method of the ‘hub’, which internally calls the TaskHub’s Add method in the server. In the TaskHub’s Add method, you’ll see that we are broadcasting the added task to all the clients by invoking the taskAdded method in the client side back – and there we are updating the ‘items’ observable array, so that Knockout will internally manage the rendering of a new
under the based on the data template ‘tasktemplate’ (see the above view code where we have the tasktemplate.
Delete also works in the same way, you can see the ‘x’ button is bound to the remove method of each individual taskViewModel, which internally calls the taskListViewModel’s removeTask method to invoke the Remove method in TaskHub using the hub proxy, and from there, the taskRemoved will be invoked on all the clients, where we actually remove the item from the items collection.
Updating an Item: