Facebook Login Integration in ASP.NET MVC

  1. Obtain App Id from Facebook site.
  2. Create new ASP.NET MVC 4 Web Application project (with Internet Application template).

  3. Open the _LoginPartial.cshtml file under Views\Shared folder.
  4. Comment out all code and insert the following:
    <div id="fb-root"></div>
        // Load the SDK Asynchronously
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        // Init the SDK upon load
        window.fbAsyncInit = function() {
                appId      : '<app_id>', // App ID
                channelUrl : '//' + window.location.hostname + '<port>/Home/Channel', // Path to your Channel File
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                xfbml      : true  // parse XFBML
            // listen for and handle auth.statusChange events
            FB.Event.subscribe('auth.statusChange', function(response) {
                if (response.authResponse) {
                    // user has auth'd your app and is logged into Facebook
                    FB.api('/me', function(me){
                        if (me.name) {
                            document.getElementById('auth-displayname').innerHTML = me.name;
                    document.getElementById('auth-loggedout').style.display = 'none';
                    document.getElementById('auth-loggedin').style.display = 'block';
                } else {
                    // user has not auth'd your app, or is not logged into Facebook
                    document.getElementById('auth-loggedout').style.display = 'block';
                    document.getElementById('auth-loggedin').style.display = 'none';
            // respond to clicks on the login and logout links
            document.getElementById('auth-loginlink').addEventListener('click', function(){
            document.getElementById('auth-logoutlink').addEventListener('click', function(){
    <div id="auth-status">
        <div id="auth-loggedout">
            <a href="#" id="auth-loginlink">Login</a>
        <div id="auth-loggedin" style="display:none">
            Hi, <span id="auth-displayname"></span>
            (<a href="#" id="auth-logoutlink">logout</a>)
  5. Replace <app_id> in above code with your own app id.
  6. Replace <port> in above code with your application’s port.
    You can get application’s port under Project’s properties window. In the screenshot, it’s 6270.

  7. Create new Action in Home controller, name it Channel.
  8. Add the view for Channel action with no layout or master page (uncheck “Use a layout or master page”).
  9. Edit Channel.cshtml to look as following.
    <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>

  10. On Facebook Developer App Settings, set the app to interact with Website. Then set the site’s URL to your application full URL.
  11. Compile and run your ASP.NET MVC application.
  12. Login button on the top right corner should take your users to Facebook login page.
Resource and more readings:

Creating ASP.NET Membership in SQL (Web Forms and MVC)

ASP.NET Membership is Microsoft approach to provide security, authentication and authorization in that regards, for ASP.NET Web Forms and ASP.NET MVC. Both Web Forms and MVC can utilize this feature through Forms Authentication approach.

There are several ways to create Membership database in SQL Server.

SQL Server Registration Tool (Aspnet_regsql.exe) – Wizard

%WINDIR%\Microsoft.Net\Framework\<.net version>\aspnet_regsql.exe

Running this tool will guide you to installing ASP.NET Membership in SQL Server.
See the ASP.NET Membership Tutorial on “Installing the Application Services” section for more instruction.

SQL Server Registration Tool (Aspnet_regsql.exe) – Advanced Options

Beside the wizard guide, you can also use its command prompt with many available options.
See MSDN site for the parameters.

SqlServices.Install Method

To programatically install ASP.NET Membership, use SqlServices.Install method.

SQL Scripts Manual Approach (for Deployment Plan)

Generate sql script with SQL Server Registration Tool (Aspnet_reqsql.exe) to include them in a database project as part of deployment strategy.

%WINDIR%\Microsoft.Net\Framework\<.net version>\aspnet_regsql.exe -sqlexportonly <filename.sql> -A all

SQL Scripts Manual Approach (for Deployment Plan) – Individual Scripts

In the following folder, you will find many .sql script files to install / uninstall ASP.NET Membership. Each service (or feature – Membership, Roles, Profile, Web Parts Personalization, Web Events) is separated by files. This also can be included in a database project as part of deployment strategy.

%WINDIR%\Microsoft.Net\Framework\<.net version>\

ASP.NET Membership Schema Diagram

Quick Take on MVC x MVP x MVVM

I wish I am more diligent to create visual diagram for this post. But, here’s the take.


A variation of MVC pattern and mostly implemented in ASP.NET web form to achieve separation of concern such in MVC. In MVP, Presentation knows about the View through View’s contract (interface). Suggested reading: Jean-Paul Boodhoo’s August 2006 Design Patterns column.


Very similar to MVP, but in MVC, the controller (Presenter in MVP) doesn’t refer back to View. A controller can be used by multiple Views. This is achieved with Action (a method in controller) in ASP.NET MVC. Suggested reading: Niraj Bhatt’s MVC vs MVP vs MVVM.


Similar to Martin Fowler’s Presentation Model pattern, MVVM pattern is introduced by John Gossman in 2005, tailor-made to harness the core feature and power of WPF (and Silverlight) platform. In MVVM, as in Presentation Model pattern, the ViewModel keeps up to date with the View, the two always sync with each other. Suggested reading: Josh Smith’s The Evolution of Model-View-ViewModel.

MVVM in JavaScript

In recent years, MVVM has also been implemented in JavaScript as a framework, such in KnockoutJS or Kendo MVVM. Suggested reading: Addy Osmani’s Understanding MVVM – Guide for JavaScript Developers

ASP.NET MVC’s View Models

In ASP.NET MVC, there is something called View Models. This is not to be confused with MVVM pattern. View Models is objects defined in class that each View in MVC interact with. The difference between View Models and Model in MVC is that Model refers to the objects that the whole application interact. Suggested reading: Stephen Walther’s ASP.NET MVC Create View Models

Other Sources

More links for more readings about the three:

MVVM vs MVP vs MVC: The concise explanation
MVVM vs MVP vs MVC: The differences explained

Solution to Traffic Jam Problem Around the City


Solving traffic jam problem by imposing minimum speed limit on highway.


  • Well, no more traffic jam.

Why is it possible?

If you look at it, most of the time, traffic jam is caused by too many cars driving too slow. There are many valid reasons they are driving slowly. How many times you drive on highway with heavy traffic jam but at the end you find out there is nothing really causing the jam, the road just clear like nothing happens?

By imposing minimum speed limit, every body is forced to drive faster and get out of the bottle neck quicker which is one of the reasons people drive slowly. Each lane can also have different minimum speed limit.

Of course there are more regulations necessary than just minimum speed limit. For example, we will also need to force all eighteen wheeler trucks to the same lane so smaller vehicles can move faster.

Will it work?

Idea for Yelp – Cloud POS (Point of Sale) System


Build restaurant POS system on cloud.


  • Restaurants don’t need to maintain POS system and computers.
  • Allow restaurants to take online order.
  • Cut phone order calls to save time.
  • Multiple devices can be used for taking order.
  • Cut down ordering time and allow restaurant staffs to focus attending customers.
  • Reduce restaurant staffs by applying self-order for take-out customers.


A customer walks in to a restaurant. An iPad is presented to her on which she can choose what to order. Including in the iPad menu is pictures, videos, full description, nutrition info, popularity of each menu item as well as review from other customers.

She then decided to have dinner in uptown area with her family that night. After sitting down in a fancy restaurant, she and her family were greeted by Monica, a friendliest waitress in that restaurant. Monica pulls up her iPhone and being to take drink order from her customers. Monica can serve more customers now because she is taking the order from her phone and doesn’t need to walk around the cashier / kitchen.

The same app can be downloaded by any iPad owners, and iPhone or Android users in that regards, to order any menu from any restaurants around the area. Users also have an option to socialize their meal by posting pictures, what they order, reviews, and recommendations to any social media of their choice. Embedded in the app is also a feature to list favorites restaurants in their area, favorites restaurants of their friends, recommended dishes, who’s the friendliest waitress and many more.

A manager of sales department in a company is late for a meeting. He decided to grab a quick lunch but don’t want to wait in line. He run this apps, order something from nearby restaurants. The app then let him know how long the order will be ready. When he goes to pick his order, he doesn’t need to wait in line.

Why is it possible?

People instagram their lunch, tweet their dinners and facebook-ing where the team lunch will be. Basically, everybody digitally socialize nowadays. Not only this idea promotes more digital social life, but also for convenience and make everybody life easier.

Will it work?

Another Idea for Walmart

Yet another idea any groceries stores can do to improve sales.


Develop mobile app to find and scan products in store.


  • Walmart: mobile app can include related product for up selling.
  • Shoppers: easier to find items they want.
  • Shoppers: quicker to find what they need.

Why is it possible?

Not all shoppers go to Walmart to walk around and see what they need to buy. Some shoppers, like myself, know exactly what they want. Problem is, we don’t know where they are in stores. Each Walmart has different store layout.

This mobile app first identifies what store are the shoppers at then allow shoppers to search what they need. Return result will be at what aisles the products at as well as “things you might also want”.

Once reach the aisle, the app allow shoppers to scan (with phone camera) of the products they are looking for.

With this app, I can be at any Walmart store and easily find what I need.

Will it work?

Idea for Walmart

This applies to practically any groceries stores.


Display any products related to shoppers’ grocery items in every checkout cashier.


  • Walmart: sell more products which means more money.
  • Shoppers: not forgetting to buy candle for birthday cake would be nice.

Why is it possible?

Company like Walmart has been doing similar idea for a long time when they put products in every aisles. Each product is not randomly placed next to other products or in specific aisles. They are being carefully studied and put in their places to make sure shoppers can see and pick up necessary items in relations to what they buy. For example, ice cream topping is available in frozen (ice cream) and cake aisles.

Although Walmart has been doing this, there are too many relations each product has and it’s impossible to put those products in each of their relation products.

Walmart already have data on which this practice is based on. The same data, or improved, can be used to display related products on every checkout cashier.

Will it work?

Idea for Amazon Kindle

Kindle users can read from their Kindle anywhere: car, bus, elevator, office, waiting room, etc. Just practically everywhere. Sometime, it’s impossible to read from the Kindle, for example, when you driving.

The Idea

Make Amazon Kindle capable of reading the book for the users.


  • Users can continue ‘listen’ to the book where I left off.
  • Users can keep ‘reading’ the book while driving.
  • Users don’t need to buy audio book to listen.

Why is it possible?

Kindle books are in Amazon’s proprietary format. Or maybe not. Either way, the book is in digital format, basically data / bytes. Data / bytes are understandable by machine. This makes it possible for Amazon to build a reader inside Kindle that will read out the data in human-understand language.

Will it work?

jQuery Widget Factory Properties and Methods


The element of the invoked plugin.



Provide options that users can set.




This is where you set up your widget. This method get called first time the plugin is invoked / initiated on an element.

Method to reverse everything the plugin has applied.





Method to respond to changes to options property.


Fire an event that users can use.

Source: jQuery UI Wiki

Dependency Inversion X Inversion Control X Dependency Injection

Dependency Inversion Principle
Definition: Instead of lowel level modules defining an interface that higher level modules depend on, higher level modules define an interface that lower level modules implement.
Example: portable chargeable devices, the copy program (read and write)

Inversion of Control

  • Interface inversion
    The user of the class defines the interface
    Interface should have more than 1 implementation
  • Flow inversion
    Procedural VS Event driven
  • Creation / binding inversion
    Creating objects outside of the class they are being used in.

Dependency Injection
A type of IOC where we move the creation and binding of a dependency outside of the class that depends on it.
Example: packing a lunch VS lunch is provided.

  • Constructor Injection
    Pass dependency into dependent class via constructor.
  • Setter Injection
    Create a setter on the dependent class and use the setter to set the dependency.
  • Interface Injection
    Dependent class implements an interface. Injector uses the interface to set the dependency.