How to Use Computed Property of Knockout in MVC Application

Introduction

In my previous article explained How to Use Observable Property of Knockout in MVC Application.

This article explains how to use a computed property of Knockout in a MVC Application.

A computed property combines things, it uses Observables to combine values and show the output. It's also a kind of Observable and depends on other Observables.

Now let's see how it works.

Step 1

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

knockout mvc1.jpg

In this class I declared three variable named as 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".

knockout mvc2.jpg

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 had added in the View Folder.

After that I had taken a variable named "Class1" that is an object of "Class1" and as you saw "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.

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

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

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

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

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);

this.user=ko.computed(function(){

return this.Buyer() + " has bought " + this.Car() + " for Rs. " + this.Price();

},this);

};

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 the Index.

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

In the forth line of the function you can see that the computed property is used in which a function is created, this function will use the Observables that were declared earlier and will show the Output by concatenating their values.

Now you should return to the HTML part, here in the first three lines I created three TextBoxes and in the last four 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 "value:" and the Labels 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.

Output

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

mvc computed1.jpg

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

mvc computed5.jpg