Bunjeeb's Blog

Download Sample Code

If you are a WPF or Silverlight developer; you should be familiar with the fancy binding and notification Mechanisms in it.

MVVM pattern is dependent on these mechanisms to view data binding expressions.

Fortunately, Steven Sanderson created a brilliant library to use MVVM pattern with ASP.net and he called it Knockoutjs

What is Knockout library?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Knockout documentation

To learn this library you can start with this interactive tutorial http://learn.knockoutjs.com/

Now, Let’s do our first ASP.net application using this wonderful library

• Create a new Empty Web Application. (Name it KOTest)
• Create a new person class as follows

Public Class Person Private _FirstName As String Public Property FirstName() As String Get Return _FirstName
        End Get Set(ByVal value As String)
            _FirstName = value
        End Set End Property Private _LastName As String Public Property LastName() As String Get Return _LastName
        End Get Set(ByVal value As String)
            _LastName = value
        End Set End Property Private _Age As String Public Property Age() As String Get Return _Age
        End Get Set(ByVal value As String)
            _Age = value
        End Set End Property End Class 

• Add a web Service (ASMX Service) and call it ViewModelService.asmx
• After adding this service uncomment the first line

<System.Web.Script.Services.ScriptService()> _

• And Paste this method to it.

    <WebMethod()> _
    Public Function GetPerson() As Person   Return New Person() With {
            .FirstName = "Mohammad",
            .LastName = "Najeeb",
            .Age = "27" }

    End Function

• Add a new Web form page (call it ko.aspx).
• Import two javascript libraries
  • jQuery 1.4.1 (You can download it from here)
  • knockout 1.2.1 (You can download it from here)
  • You can also add jQuery templates but I did not use it in my sample here (You can download it from here)

    <script src="JS/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="JS/knockout-1.2.1.js" type="text/javascript"></script>

• Now, Let’s create a person class in javascript

// Create a Person Class with Constructor  // that takes two parameters (First Name & Last Name) var person = function (fName, lName) {

    this.FirstName = ko.observable(fName),
    this.LastName = ko.observable(lName),
    this.Age = 0
};

As you see above. FirstName property and LastName property are Observables.

Observables (like FirstName and LastName) will notify the UI when they changed in viewModel object.

If FirstName and LastName are not observables; The UI will display the values at the first time. but any change occurred in property will not be reflected to the UI.

So if you want to do a OneTime binding change your person implementation in  JavaScript to be like this

var person = function (fName, lName) {
    this.FirstName = fName,
    this.LastName = lName,
    this.Age = 0
};

But viewModel is not binded to the UI till now!! And this is our next step.

• Bind viewModel object to the UI & get the values from Server by calling the web service.

jQuery(function () {
    ko.applyBindings(viewModel);
    KOTest.ViewModelService.GetPerson(onSuccess,
                                      onFail,
                                      null, null);
});

• As you know you need a Script manager to call the service. So please just add it at the top of the page inside the form tag.
• When calling service succeeded; just set viewModel.person property

function onSuccess(result) {
            viewModel.person(new person(
                             result.FirstName,
                             result.LastName
                             ));
        }

• Paste add this HTML in you page

<div>  <div> <label for="<%=txtFirstName.ClientID %>"> First Name</label> <asp:TextBox ID="txtFirstName" runat="server"  data-bind="value:person().FirstName"> </asp:TextBox> </div> <div> <label for="<%=txtLastName.ClientID %>"> Last Name</label> <asp:TextBox ID="txtLastName" runat="server"  data-bind="value:person().LastName"> </asp:TextBox> </div> <div> <asp:Button ID="btnSubmit" runat="server"  Text="Submit" /> </div> </div> 

This is all what I have for Now. And Another Happy Weekend had been finished . Happy Ramadan for all. And See ya later.