<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <script src="Scripts/jquery-1.7.1.min.js"></script>

    <script src="Scripts/knockout.js"></script>
</asp:Content>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    First Name :<input type="text" name="txtFname" data-bind="value: FirstName, valueUpdate: 'afterkeydown'" />
    <br />
    Last Name :<input type="text" name="txtLname" data-bind="value: LastName" />
    <br />
    Print First Name : <span data-bind="text: FirstName"></span>
    <br />
    Print Last Name : <span data-bind="text: LastName"></span>

    <br />
    <script type="text/javascript">
        $(function () {
            //Step 1 : Create viewmodel 
            var viewModel = {
                FirstName: ko.observable("pradeep")
                , LastName: ko.observable("Shet")
            }

            //Step 2 : add data-bind attribute where you want to bind model

            //Step 3 : Activate the knockout
            ko.applyBindings(viewModel);
        });

    </script>
</asp:Content>
