How to Use Observable Property of Knockout in MVC Application

Introduction

In my previous article I explained How to use Knockout in MVC Application.

This article will take you one step further. In this article I explain how to use the Observable Property of Knockout in a MVC Application.

Knockout provides the special property Observable. Whenever this property is embedded it allows you to make changes at runtime and displays the instant results without making changes in the code. The observable data can be edited runtime so it gives you dynamic results.

Now let's see the procedure required to make things happen.

Step 1

You need to first add a class in the Model Folder. This can be done by right-clicking on the Model Folder and then choosing "Add New Class".

In this class I declared three variables named Buyer, Car and Price.

using DelegateDecompiler;

using System.Linq;

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

 

namespace MvcApplication20.Models

{

    public class Class1

    {

       

        public string Buyer { get; set; }

        public string Car { get; set; }

        public string Price { get; set; }

 

    }

}

Step 2

Now we will pass the value for these Variables. For this you need to add a Controller Class to the Controllers Folder, right-click on the Controllers Folder and choose "Add a New Controller Class".

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication20.Models;

using PerpetuumSoft.Knockout;

 

namespace MvcApplication20.Controllers

{

    public class HomeController : Controller

    {

       

        public ActionResult Index()

        {

 

            var Class1 = new Class1()

            {

                Buyer = "Anubhav",

                Car = "Verna",

                Price = "12 Lakhs"

            };

            return View(Class1);

        }

    }

}

Here Index is the View Class that I added in the View folder.

After that I took a variable named "Class1" that is an object of "Class1" and as you had seen "Class1" is the Model Class on which we had worked with in our previous step.

Then I passed some values for the variables that were provided in Step 1 and at the end I returned Class1 to the View Class.

Step 3

At the end I worked on the Index class that is the View class added in the View folder.

<script src="~/Scripts/knockout-2.3.0.js"></script>

<script src="~/Scripts/knockout.mapping-latest.js"></script>

<p>Buyer Name:<input data-bind="value:Buyer" /></p>

<p>Car Name:<input data-bind="value:Car" /></p>

<p>Price:<input data-bind="value:Price" /></p>

<p>Buyer:<strong data-bind="text:Buyer"></strong></p>

<p>Car:<strong data-bind="text:Car"></strong></p>

<p>Price:<strong data-bind="text:Price"></strong></p>
 

<script>

    var data=@(Html.Raw(Json.Encode(Model)));

    function viewModel() {

        this.Buyer=ko.observable(data.Buyer);

        this.Car=ko.observable(data.Car);

        this.Price=ko.observable(data.Price);

    };

    ko.applyBindings(new viewModel());

</script>

In the Index View I first attached the Knockout files. Both of these files are important for working on Knockout in MVC.

Now you should jump to the "Script" part of this file. In the Script the first line that you are seeing is very necessary to create a connection between the Model and Index.

After that I created a function named viewModel, in this function I made the Buyer, Car and Price as Observable. That will allow changes to them at runtime.

At the end I applied the bindings to this function.

Now you should return to the HTML Part, here in the first three lines I created three TextBoxes and in the last three lines I created Labels and in all these Textboxes and Labels the value of the related Observable is bound. The only difference is that between the bindings of the textboxes and Labels (and in other words in the Textboxes) the data is bound using "vaue:" and in the Labels the data is bound using "text:". This makes TextBox editable and it's value can be changed but "text:" will provide static data to the Labels.

Now let's look at the output.

Output

When you debug your Application you will get an output window like this:

Now as you change the value in any of the Textboxes and hit Enter you will see instant output in the Labels associated with them.

You can say it's magic because we don't provide code for the function. We don't provide code for any event like changetext and so on and it's still working. Now that's the magic of Knockout.