knockoutjs and MVVM

MVVM ( Model View ViewModel ) is a new architechture that is heavily followed in mainstream enterprise frameworks these days along with other frameworks. I’ll talk less about this and talk more about knockoutjs in this post. Knockout is an extraodrinary library, which if fully utilized in its best way, it can be very efficient and day saver in the end.

You can get more info about knockoutjs here at

I’ll follow through a scenerio how we can utilize knockoutjs library in the simplest way possible.

Say, we have a webservice that is returning us some Json data. We want to pull data out of it and bind to our controls back there in the html form. Lets do it here.

Suppose our html is like this:

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
Now we see that we provided just some databind attributes to the input controls. What we want is that when user adds firstname or lastName in the text boxes, it should concat those and display those in the <h2> tag which we have binded with fullName.
One classic approach would be to declare a onkeydown event on both first name and last name and in the event declaration, we can concat and set it into fullName block. For that we have to declare some extra stuff like we have to id-fy our controls, declare events, write some javascript.
Lets see a more savvy approach!
We will reference knockoutjs lib in the page, and in script portion write the following code (btw we can do the same code in seperate js file as well for clean seperation of code):
// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
ko.applyBindings(new ViewModel("Planet", "Earth"));

What we have done here is we created a view model, and we created firstName and lastName properties in it, and ensured the two way binding through ko.observable(first). And for the replacement of javascript keydown event we have done it in a more cleaner way by making a computed function fullName.

In the end i called ko.appyBindings() function that does all the magic to bind my form with my viewModel and with event notifications to and fro.
Knockoutjs is a great library and with a great future ahead. I will be posting more on this so keep looking.

debug symbols not loading when i debug in Visual Studio

I was going to debug my app, while running the website, i placed a breakpoint, but it was not hitting that breakpoint during the execution cycle. I tried to do it through “Attach to Process” method, and attaching my Visual studio debugger to w3wp.exe.

Still no clue, i searched a bit of options in the Tools -> Options -> Debugging -> General and un-check the option that says “Require source files to exactly match the original version”

This will make life easier, and enable us to debug the solution. Phew!!

MVC 3 & RAZOR crash course by Microsoft and HEC

14th and 15th Feb 2012

Higher education commission scheduled an event for All Pakistan university training for MVC 3, the attendees were subjected to be both university students and professors as well.

The event went well, we took deep insight into MVC and RAZOR in a 3 hours session each day.

14th Feb :

  1. Institute of Management Science Peshawar
  2. UET Taxila
  3. PIEAS
  4. Comsats University
  5. KPK Agriculture University
  6. Air University

15th Feb :

  1. Punjab University
  2. Kinnarid Collage Lahore
  3. Shaheed Benazir Bhutto University
  4. University of Health and Science
  5. Punjab University Collage of Information technology

I hope it went well for the attendees.

“ MVC exposed” Lecture Series – Course Outline MVC exposed is a handcrafted lecture series by Ali Sufyan, containing videos, articles, snippets and lots of stuff to guide a new comer to what MVC is, how it works, what is RAZOR framework, multiple API’s working in conjunction with MVC 3, demo apps and lot more. The course outline is as below:


– Introduction to Controllers

– Razor Views

– Data Entity Framework

– Javascript and Ajax

– Implementing Security

– Advance tips and tricks

– Doing wonders

web Page cannot be accessed when hosted in IIS 7

I recently installed windows 7, with IIS 7, being a web developer we need IIS to locally host and test websites. To my surprise, it was not rendering even  a single page, not even html and text files.

First thing that came into my mind was that it is some port blocking issue, but could not seem to know of the software which can block the port 80.

Banging my head here and there, i came to know that it was SKYPE, if skype is installed before IIS, skype uses the freedom to use port 80. So i closed my Skype, and restarted IIS, bang on, it worked like a charm. Hope it helps the guys who get stuck in such scenerio.