SignalR is truly an amazing API. It’s ridiculously easy to use. The majority of SignalR client examples that I see on the web are for HTML/JS or WPF. There are examples for Silverlight but for older version of SignalR and Silverlight. What I was hoping to find was a step by step example using VS2k12, SL5 and latest greatest Nuget Packages. Since I could not find one, I thought I would create one and share. This step by step was highly inspired by the samples found here:
We chose jxqGrid. If you see a data grid we missed, please let me know which one.
Got To Have It Features
- Inline Editing
- Column Resizing
- Cell Selection
- Cell copy/paste
- Range copy/paste “Update”
|GRID||Sorting||Inline Editing||Column Resizing||Cell Selection||Cell copy/paste||Range copy/paste|
|jqGrid||Yes||Yes (but not great)||Yes||No||No||No|
|SlickGrid||Yes||Yes (but not great)||Yes||Yes||Yes||Yes|
|ParameterQuery||Yes||Yes (but not great)||Yes||Yes||No||No|
|Handontable||Yes||Yes||Yes (but buggy)||Yes||Yes||Yes|
|Sencha Ext JS||Yes||Yes||Yes||Partial||No||No|
|WebGrid (Intersoft Solutions)||Yes||Yes||Yes||Yes||No||No|
Love It Features
- Row Selection
- Flood Fill
- Range copy/paste “Adds”
- Knockout/Data Integration
|GRID||Row Selection||Filtering||Flood Fill||Virtualizing||Knockout/Data Integration|
|jqxGrid||Yes||Yes||No||Partial||Can bind to pretty much anything.. Can use KO as well|
|jqGrid||Yes||Yes – Search||No||Yes||MVC|
|SlickGrid||No||Yes – Search||Yes||Yes||Seems to be kinda “hard-wired”|
|ParameterQuery||Yes||Yes – Search||No||Yes||Doesn’t support KO|
|Handontable||No||No||Yes||No||Not sure about KO|
|wijmo (ComponentOne)||Yes||Yes – Filter Row||No||No||Seems you can use KO|
|KendoUI (Telerik)||Yes||Yes||No||Yes||They kinda have their own framework and server wrappers|
|koGrid||Yes||No||No||No||Seems you can use KO|
|dhtmlxGrid||Yes||Yes – Search||No||Yes||Doesn’t support KO|
|jTable||Yes||Yes – Search||No||No||Not sure about KO|
|Sencha Ext JS||Yes||Yes||No||Yes||Not sure about KO|
|IgniteUI (Infragistics)||Yes||Yes||No||Yes||KO support|
|Syncfusion||Yes||Yes||No||Yes||Not sure about KO|
|WebGrid (Intersoft Solutions)||Yes||Yes||No||Yes||Not sure about KO|
Like It Features
- Moving Rows
- Frozen Columns
- Col Selection
- Merged Column Headers
- Direct Breeze.js integration
- Column Reorder
|GRID||Frozen Columns||Grouping||Merged Column Headers||Column Reorder||Excel Like||Direct Breeze.js integration|
|jqxGrid||Yes||Yes||No||Yes||Yes||No (refer to notes for further links)|
|jqGrid||Yes||Yes – but not user||Yes||Yes||No||No|
|Handontable||No||No||No||Yes (but buggy)||Yes||No|
|KendoUI (Telerik)||No||No||No||Yes||No||Yes, but a hack|
|Sencha Ext JS||Yes||Yes – (but buggy)||Yes||Yes||No||No|
|WebGrid (Intersoft Solutions)||Yes||Yes||Yes||Yes||No||No|
The MVC4 Internet template assumes that it will be adding a user table called “UserProfile” to your database. What I think a high percentage of developers would want is to use their domain model’s “user” entity and have SimpleMembership just manage the passwords. In this blog post I will demonstrate how I did this and welcome alternative suggestions.
I recommend you first understand the authentication process provided by the MVC 4 Internet template. There are 2 fantastic posts you should read first.
- MVC 4 Authentication
- SimpleMembership, Membership Providers, Universal Providers and the new ASP.NET 4.5 Web Forms and ASP.NET MVC 4 templates
MVC 4 Internet Template with pre-existing Domain Model
Create a new ASP.NET MVC 4 Internet Application and name it “SimpleMemberExample”
Custom Domain Model/Database
The first thing I want to do is create the custom domain model/database. In the “Model” directory, lets add a class that represents our custom “User” table. Lets call this custom user entity “Administrator” as seen here:
(I was unable to figure out how my user table’s unique identifier could use a Guid. I think the unique identifier of your custom user entity/table must be an int to use SimpleMembership. anyone know?)
Lets add a custom DbContext as shown here to the root of the project.
The DbContext only contains a single table called Administrators just to keep this super duper easy. Yours would contain lots more. Notice in the custom constructor, I am telling the DbContext to use a specific connection string. Lets add that connection string to the Web.Config.
This connection string could be anything you want it to be.
Just for demo purposes, I am naming the database “SomeAppName”. As a final step, in “Global.asax.cs”, put the following code:
Running the application, the magical EF Code First will create the following database. We have a custom database with a custom user table called “Administrators”.
Customizing MVC 4 Internet Template
The Internet template contains an Action filter called “InitializeSimpleMembershipAttribute”. I deleted that class and removed any references to it.
Replace UserProfile with your Custom User Entity
The Internet template assumes that it will be adding a user table called “UserProfile” to your database. What I think a high percentage of developers would want is to use their domain model’s “user” entity and have SimpleMembership just manage the passwords. Let me demonstrate how to do this.
In the “Model” folder, in the “AccountModel.cs” file, delete the “UserProfile” class. We want to use our “Administrator” entity instead. Wherever UserProfile is referenced elsewhere, replace with Administrator. The original UserProfile had properties called “UserName” and “UserId”. Administrator has properties “Name” and “Id”. Make sure to sync those properties up.
I want to have only 1 DbContext and I want to use my DbContext. In the “Model” folder, in the “AccountModel.cs” file, delete the “UsersContext” class. Wherever UsersContext is referenced elsewhere, replace with SomeAppDbContext.
As a final step, in “Global.asax.cs”, put the following code:
WebSecurity.InitializeDatabaseConnection takes the web.config connection string name, the name of your custom user table (“Administrators”), the unique identifier field name of your user table (“Id”) and the user name field. Running the InitializeDatabaseConnection method does several things:
- Initializes the static Roles and WebSecurity classes.
- Adds the following tables to your database: webpages_Membership, webpages_OAuthMembership, webpages_Roles, webpages_UsersInRoles, UserProfile.
Running the Internet Application
When you run the code with those changes, the following database is created:
The home screen looks like this:
Click on the Register link in the upper right.
Fill out the form and click the “Register” button. The MVC 4 Internet template application will navigate you back to the home page.
Notice it knows the name you registered with. If you check for cookies, you will see the typical ASPXAUTH as shown below.
If you click the “Log off” link and check cookies, the ASPXAUTH cookie disappears. The ASPXAUTH cookie is the key to the authentication.
When you look at the database you will see the following:
Notice with the code changes, the MVC Internet template knew to save to the custom user table “Administrators”. The password was saved to the webpages_Membership table with a foreign key relationship to the Administrators table.
Please download the code here.
I am learning from John Papa’s “Single Page Apps with HTML5, Web API, Knockout and jQuery” on Pluralsight. The course outlines building an application called “Code Camper”. The “Code Camper” sample is very effective at showing an end to end SPA design. It leverages a bunch of open source libraries and can be a lot to take in all at once. One of the libraries used is called Sammy.js. I decided it would beneficial to focus on just Sammy.js library which is the focus of this blog post.
I have had the pleasure of working with some pretty talented U.I. developers. There are some people that can look at a screen 10 feet away and notice a couple of borders are not lined up properly. ProModel refers to these folks as having the “pixel eye”. I do not have the pixel eye unfortunately. I will say however with the increased emphasis on usability and design that I am starting to be more opinionated in this area.
All along I have had a mental concept of what the administrative website would look like. I used Balsamic Mockups and produced the following image.
This is not going to win any awards but it at least gives me a target. ProModel uses Pivotal Tracker and I have always been impressed with the usability of their website. If you look at my design, I was definitely inspired by Pivotal Tracker .
The workflow begins with the user administrator signing in. In my next blog post in this series, i will discuss how to register and authenticate new administrators.
At the end of the last post I had shown a high level overview of some data design patterns such as Repositories and Unit of Work and ended with the browser fetching data from the database for the Application entity of the domain model. In this post, I would like to discuss adding, deleting and updating data through the Web API.
Here is the fully coded ApplicationsController. Notice much of the code is simply delegating to the UoW which in turn simply delegates its work to the generic EFRepository.
At the end of the last post, I had a solution with multiple projects. One of the projects contained the POCO domain model and another project leveraged EF Code First to read/write the domain model to a dynamically created SQL Server database. The goal of this post is to use ASP.NET MVC Web API to surface database data to the client browser.
Most of my career I have spent on the server side of things moving data between layers. I have been part of teams where we created our own application infrastructure as well as a user of IdeaBlade’s DevForce, WCF RIA Services, CSLA, etc.
In the last year, I have had the pleasure of learning from Jon Sarker who is a senior software architect at ProModel. Jon has helped ProModel streamline moving data efficiently and quickly through the use of enterprise design patterns such as Repositories, Commanding, Factories (for repos and commands in particular), DTOs, Request/Response objects, etc. Once you understand and start using these data design patterns, everything seems so modular, clean and maintainable.
In the last post about the LOB Gamification Service, the explanation of the video is a great starting point for defining the domain model I will be using.
“Every time the user crossed a lightning bolt Action, the user receives some points toward a Proficiency. A single Action might give points to multiple Proficiencies. A single Proficiency can earn points through various Actions. Proficiencies have different Levels. As users earn points within a Proficiency, the user “levels up” that Proficiency. Leveling up typically gives badges and other rewards.”
The words in bold are candidates for objects in the domain model. Wikipedia defines Domain Model as “The domain model is created in order to represent the vocabulary and key concepts of the problem domain. The domain model also identifies the relationships among all the entities within the scope of the problem domain, and commonly identifies their attributes.”
Welcome back to the LOB Gamification Series. The previous post is Part 1.
ProModel has a portfolio of LOB enterprise software and I thought it would be interesting to explain gamification by looking at integrating gamification into the ProModel LOB application.
Below you see a Microsoft Visio diagram of using ProModel.
As you can see in the diagram, users begin by first launching the application. The next step the user can either create a new model (document) or open an existing model. The details of the steps are not important and one can easily substitute another process diagram from another software product.
The flow a user takes through a product is dependent on their rights and roles within the system. Enterprise modeling using ProModel might have roles such as Model Builder, Data Analyst, Scenario Builder, Report Creator, etc.
The more users use the software, the more proficient they become at certain tasks within the software.
You will notice a lightning bolt on several tasks within the diagram.
The lightning bolts represent Gamification Actions place on a software feature. I defined these Gamification Actions to help me quantify:
- Who my most proficient users of this feature are.
- How often users use this feature.
- Encouraging users to use a feature.
So let’s say we have 3 users: Rockford, Fabio and myself. Let’s simulate these 3 users using ProModel simulation software. It is sort of like pointing a mirror at a mirror….its a simulation of a simulation :-)
The video shows the Visio diagram being brought to life by Process Simulator. I coded in different behaviors for each of the 3 users. Rockford and I were modeled as “Model Builders” and Fabio was coded as a “Report Viewer”. I also coded in the probability of a model needing resources or external files.
Every time the user crossed a lightning bolt Action, the user received some points toward a Proficiency. A single Action might give points to multiple Proficiencies. A single Proficiency can earn points through various Actions. Proficiencies have different Levels. As users earn points within a Proficiency, the user “levels up” that Proficiency. Leveling up typically gives badges and other rewards.
I have added a Proficiency Leaderboard showing the points for each users. Leaderboards create a hopefully healthy competition and encourage the user to use certain features. New users might reach out to a highly proficient user for guidance or help.
Users should be able to drill into a Proficiency and see a list of the Actions that earn points. Each Action could have context sensitive help as well as video demonstrations. I feel this could be a far superior way of training users.
In the next part within this series, I will finally get to some coding examples followed by some UI mockups.