We chose jxqGrid.  If you see a data grid we missed, please let me know which one.

Feature Rankings

Got To Have It Features

1. Sorting
2. Inline Editing
3. Column Resizing
4. Cell Selection
5. Cell copy/paste
6. Range copy/paste “Update”

Love It Features

1. Row Selection
2. Filtering
3. Flood Fill
4. Virtualizing
5. Range copy/paste “Adds”
6. Knockout/Data Integration

Like It Features

1. Moving Rows
2. Frozen Columns
3. Col Selection
4. Grouping
5. Merged Column Headers
6. Direct Breeze.js integration
7. Column Reorder

• Allow users to be signed into the LOB more than once. Users like having more than 1 browser tab or even more than 1 browser type with the LOB app loaded simultaneously.
• Ability to differentiate between a user in Tab1 versus Tab2 for purposes of concurrency, etc.
• Limit the number of simultaneous sessions a specific user can have. 1 is a valid constraint.
• Automatically log out a user instance after X seconds a.k.a session time out
• Gather user information such as browser type/version, screen resolution, IP, etc
• # of concurrent distinct users logged in over time.
• # of concurrent users logged in over time total.
• Max or average simultaneous sessions by users.

All of these are good feature requests for any Line of Business Application. Thinking through it, these features share an implementation detail that requires the LOB to track each signed in user instance.

Implementation Plan

Here was the plan.

1. Create a new database table called AppInstance. This table will contain a list of all the active users in the system.
2. Create a new database table called ArchivedAppInstance. This table contains all previously logged in users.
3. Whenever a user logs in, add a row to the AppInstance table that records the UserId, timestamp of when that user logged in and any other information your LOB might want to know.
4. Whenever a user logs out, archive the #3 AppInstance row to ArchivedAppInstance table noting the logged out timestamp.

The information in these 2 new tables enable the implementation of the features above. Conceptually this is very simple. In fact, 1 through 3 above are easy. #4 it turns out, in Silverlight was not as straight forward as one might think. Why? First, there are multiple ways the application can be exited such as clicking the LOB “Log Out” button, closing the browser directly, navigating away from the LOB web page or, heaven forbid, a browser crash. Except for crashing, the Silverlight application’s Exit event is raised but if you try to perform some backend action like calling a web service it won’t go through since the thread required to make the service call itself is gone.

I worked on a team to solve this. My colleague Tammy McClellan recently documented our approach for other product owners internally and I thought I would share on my blog. In addition, Tammy created an extremely small and simple sample application with our implementation. You can find the code here.

Example App Explanation

Running the sample app will show 2 buttons. “Insert AppInstance, Delete using WebService” and “Insert AppInstance, Delete using WCF”. Think of the buttons as logging into your Silverlight LOB application. Clicking a button adds a row to the AppInstance table that records the UserId, timestamp of when that user logged in, screen resolution, IP, browser type etc.

Insert AppInstance, Delete using WCF Button

The sample app uses Entity Framework and creating the AppInstance is pretty standard code. I won’t go into much detail, please see the code as needed. The key here is setting the App.OnExitUseWCF to true.

Insert AppInstance, Delete using WebService button

The key here is setting the App.OnExitUseWCF to false.

Shutting Down the Application

Shutting down the sample application will trigger the Silverlight Application_Exit event shown below.

Depending on which button you used, will determine the technique used to archive the AppInstance. If you use the “Insert AppInstance, Delete using WebService” button, the AppInstance is correctly archived. If you use the “Insert AppInstance, Delete using WCF” button the AppInstance does NOT get archived AND no error is thrown. The call to the WCF service silently killed.

In the “WebService” AppInstance archive process, the key to it working is to send an XMLHttpRequest to call a web service. The reason we use XMLHttpRequest is that it will execute even after the browser is closed since the JavaScript method attached to the body onunload event in the default.aspx will be called when the browser exits.

Please check out the XmlHttpRequest.cs class in the source code.

Valuable Relevant Resources

· http://danielvaughan.orpius.com/post/Calling-Web-Services-from-Silverlight-after-the-Browser-has-closed.aspx

· http://emantranet.com/silverlight/?p=52

· http://social.msdn.microsoft.com/Forums/en-US/silverlightbugs/thread/80fa9324-06ef-4784-80ba-57e701316877/

· http://stackoverflow.com/questions/3660560/how-to-detect-a-browser-refresh-from-silverlight-4

· http://social.msdn.microsoft.com/Forums/en-US/silverlightweb/thread/39818d02-91fe-4bbc-ba9b-6efa142d08b5/

Technology fails in film are the new Wilhelm Scream

1. MVC 4 Authentication
2. SimpleMembership, Membership Providers, Universal Providers and the new ASP.NET 4.5 Web Forms and ASP.NET MVC 4 templates

In addition, please check out Scott Allen’s excellent Pluralsight course called “Building Applications with ASP.NET MVC 4”.

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:

namespace SimpleMembershipExample.Models
{
    public class Administrator
    {
        public Administrator(){}
        #region Fields and Properties
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        #endregion
    }
}

(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.

using System.Data.Entity;
using SimpleMembershipExample.Models;

namespace SimpleMembershipExample
{
    public class SomeAppDbContext: DbContext
    {
        public SomeAppDbContext(): base(nameOrConnectionString: "SomeAppName"){}
        public DbSet<Administrator> Administrators { get; set; }
    }
}

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:

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        SomeAppDbContext dbcontext = new SomeAppDbContext();
        dbcontext.Administrators.All(i => i.Name != "Dan");

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

Remove InitializeSimpleMembershipAttribute

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.

Call WebSecurity.InitializeDatabaseConnection

As a final step, in “Global.asax.cs”, put the following code:

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        SomeAppDbContext dbcontext = new SomeAppDbContext();
        dbcontext.Administrators.All(i => i.Name != "Dan");
        WebSecurity.InitializeDatabaseConnection("SomeAppName", 
            "Administrators", "Id", "Name", autoCreateTables: true);

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:

1. Initializes the static Roles and WebSecurity classes.
2. 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.

Aaron produced this video that shows a simulation model of various ProModel employees doing the Harlem Shake.  Please take note that the model is even capturing stats and shows reports at the end of the video.

If you are unfamiliar with the Harlem Shake Internet meme, please check this out.

The poll results and comments are very interesting. Most people feel 2 lanes versus 1 makes no difference but not all agree. This validates why I wanted to build a simple model and see what I could learn. I created this model to have fun and encourage readers to not take the results too seriously. I do think the model is a great start to an iterative approach of building a much more complex drive thru model though. You learn a lot in building a process model and I have come to appreciate the subtle details necessary to fully model a drive thru.

Here is a video of me running the model and comparing 2 lane versus 1 lane on average time to get your food.

Inputs and Assumptions

My goal was to see how quickly I could capture the general flow of a drive thru and only add details as needed. The model is data driven and a user can easily change the following:

Certainly this list is not exhaustive, but I feel representative of the types of things that determine a drive-thru’s process performance. Just to get reasonable defaults I recorded my wait times through various fast food drive-thrus. I also recorded other driver’s times while I was there. Anyone know if drive thru times are publicly available?

I used a Google Map image of a real drive-thru and the distances are to scale to accurately model the impact of vehicle length. The vehicles move 1 mph as they move though the drive-thru queue.

When picking up the food, if the model determines it will take greater than 45 seconds, the car is told to pull ahead and not block the vehicles behind them.

Potential Next Iteration

Even with black boxing the “Get Food” window with a simple, single time distribution, 2 lanes ended up being faster. Had this not been true, I was planning on modeling what specific items a driver orders. I would actually model the kitchen area and the cooking of that restaurant’s menu of items. Drivers would have to wait for their specific ordered items to actually be cooked and ready.

My car reached the ordering sign.  I am terrible at ordering fast food.  Even though I drive 99% of the time, my wife will lean over me and shout the order through my window.  There are just too many details my over-indulged kids care about that the make the process too complicated.  Have you ever communicated the perfect order only to be replied with “sir, can you repeat that?”.  AHHH.

To my surprise, I noticed all cars converge on a single “pay” window.  2 lanes should be faster than one, right?  I thought it would be interesting to model the typical fast food drive-thru process comparing 1 versus 2 lanes.  Before sharing the results of my simulation model, I wanted to poll what you think.

I am pleasantly shocked by this.  I “think” this is something i should be excited about, but honestly, i just don’t know…

I think it is now time to turn off that automatic profile clicker I installed on all the computers at my office .

I already paid for college education, but, I have to admit, I desired to claim I was Native American.  In fact, I could not wait to see how much of a mutt I was.  Heck, the more the merrier was my thinking.  So, with great disappointment, allow me to share my results….

How amazingly boring!  I am 96% from modern day England, Ireland, Scotland, Wales.  Where is Great Grandmother’s Native American blood?  I so badly want to drill into the measly 4% and get me some good ole diversity out of it.  I anxiously waited 4 weeks to be boring, /sigh.

I met my Great Grandmother and she definitely was a Native American.  I question the results but really, what do I know.  I searched around for an alternative DNA service and discovered www.23andme.com.  At the time I was searching, 23andme was $300 dollars to genotype your DNA versus $100 at AncestryDNA.  I decided it made more sense to genotype my mom, dad and my wife for my $300.  Here are my parents results:

Boo!  Still not seeing Native American ethnicity.  Despite my lack of cool ethnicity, the AncestryDNA service is actually very very cool.  Let me explain.

AncestryDNA will take the genotype results from its many members and look for family relationships.  If by chance the matched DNA members’ trees have names in common in their tree, it will also point those out for you.

As you can see above, my Dad has a potential 3rd cousin match.  Clicking on “Review Match” will show the shared ancestors.  My dad and I have hundreds of potential matches where the majority of them do not have shared ancestors on the trees.  That is where the hard work begins.  IMO, to get the most out of the service, you have to completely fill out your tree.  Prior to genotyping my DNA, my tree just contained my direct lineage.  I did not take the time to fill out my great great grandfathers brother and sisters.  I was focused on just my pedigree so my tree was tall but not wide.  To get your tree to match up to a potential 5th cousin, my tree has to be “wider” consisting of my great aunts and great great uncles.  This will take some time!

Here is my theory of how to figure out my surname:

1. Get my tree as wide as possible.
2. Focusing on my dad’s DNA match result, try to get as many shared ancestors on my tree as possible.
3. DNA matches that I cannot get a shared ancestors in the trees, are candidates for containing my true surname.  AncestryDNA will tell you what potential cousin generation so I can find that approximate generation in the matches tree.  Look for doctors living in Tennessee in their trees around the same time.

If you are like me then you are also new to Single-Page Applications.  I find it helpful to start with a simple definition.  Wikipedia defines SPA as a “web application…that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.  In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or partial changes are performed loading new code on demand from the web server, usually driven by user actions.”

ASP.NET MVC versus Single Page Application

Suppose you have a HTML, JavaScript and CSS application loaded in a browser.  If you look at the home page source, you might notice a series of anchor elements containing hypertext links to other areas within your application such as an “About” page.  If you build a SPA version of this application versus a traditional ASP.NET MVC version, it would be difficult to tell them apart by inspecting the HTML only.  The anchor tags would look very very similar if not identical.

In a standard MVC application, when the User clicks on the “About” hyperlink, MVC’s routing would find the server-side controller which would create a HTML page on the server and navigate the browser to this new page.

In a SPA, when the User clicks on the “About” hyperlink, the client side HTML is dynamically manipulated all within the client’s browser using standard HTML, JavaScript and CSS.  Since a costly server trip is avoided, the result is typically “a more fluid user experience”.  To pull this off, typically a SPA loads more data in memory upfront to enable the application to stay on the client.

Sammy.js is an open source library that Code Camper leverages to help pull off the SPA behavior but at the same time keep all the good things the browsers do for us such as history management, etc.   Its pretty slick.

For me, the following question captures one of the cool features of Sammy.js:  “How can I create a standard HTML anchor tag that when the user clicks, instead of requesting a resource on the server, I can intercept the request on the client and call a JavaScript function?”  Let me show you an example that answers this question.  This example is a modified version of the example provided in the following blog post.

http://mikehadlow.blogspot.com/2010/11/sammyjs.html#/ My version mimics how Code Camper works as well.  Thanks Mike Hadlow for this very simple example.

Step by Step

Create a new ASP.NET MVC4 Internet Application Project called “MVC4Sammy or download the finished code here.

Right click on References and click on “Manage NuGet Packages…”.  search for Sammy.js and click “Install”

In the root of the project, add a “MVC 4 View Page (Razor) called “Index.cshtml”.

  1: <!DOCTYPE html>

  2: <html>

  3: <head>

  4:     <meta name="viewport" content="width=device-width" />

  5:     <title>Sammy Test</title>

  6:     <script src="Scripts/jquery-1.8.2.js"></script>

  7:     <script src="Scripts/sammy-0.7.2.js"></script>

  8:     <script src="Scripts/sammy_test.js"></script>

  9: </head>

 10: <body>

 11:     <div id="header">

 12:             <h1>Sammy Test</h1>

 13:             <a href="#/one">one</a>

 14:             <a href="#/two">two</a>

 15:             <a href="/#three">three</a>

 16:             <a href="HtmlPage1.html">HtmlPage1</a>

 17:             <a href="http://www.promodel.com">ProModel</a>

 18:         </div>

 19:         <div id="main">

 20:             <section class="main">

 21:                 @RenderPage("Views/Partial1.cshtml")

 22:                 @RenderPage("Views/Partial2.cshtml")

 23:                 @RenderPage("Views/Partial3.cshtml")

 24:             </section>

 25:         </div>

 26: </body>

 27: </html>

 28:

Delete all the files from “Views” folder.  Right click on the empty “Views” folder and Add a partial “View” called Partial1.

Put the following code in Partial1.cshtml.

<section id="partial1-view" class="view">

    <div>Hello from Partial 1</div>

</section>

Repeat for Partial2 and Partial3 but change the section ids.

Add a new “JavaScript file” in the “Scripts” folder called “sammy_test.js”.  Put the following code:

  1: (function ($) {

  2:

  3:     var app = $.sammy('#main', function () {

  4:

  5:         this.get("#/one", function (context) {

  6:             $(".view").hide();

  7:             $("#partial1-view").show();

  8:         });

  9:

 10:         this.get("#/two", function (context) {

 11:             $(".view").hide();

 12:             $("#partial2-view").show();

 13:         });

 14:

 15:         this.get("/#three", function (context) {

 16:             $(".view").hide();

 17:             $("#partial3-view").show();

 18:         });

 19:     });

 20:

 21:     $(function () {

 22:         app.run('#/');

 23:     });

 24:

 25: })(jQuery);

Modified root Web.Config webpages:Enabled to true.

Add a new “Html Page” to the root called “HtmlPage1”.  Put any text in the body.

Set Index.cshtml as Start Page and Run.

Highlights

Similar to Code Camper, this example MVC4 SPA creates a root view called “index.cshtml” containing a series of @RenderPage calls against some partial views.  The partial views represent the various modules within an application.  Each partial view is declared within a “Section” element with a unique id and a shared class called “view”.

In the “sammy_test.js” file, you will see code registering “get” routes with JavaScript functions such as:

When the user clicks on a link that goes to “#/one”, that function will be called instead of requesting a resource from the server.  The JavaScript code hides any element with a class called “view” then immediately shows any element with a id value of “partial1-view”.

There are probably a million ways to do this but this example shows how the client is dynamically manipulated without going to the server.