Using Knockout in MVC Application

Introduction

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

Knockout comes with the great advantage that it can be used with any server-side or client-side technology, it has no problem with any type of server-side or even client-side technology. It's compatible with all types of technologies. In this article I will tell you how to use Knockout to create a MVC Application. This is my first article about MVC and Knockout so here I'll show you how to bind static data using Knockout in a MVC Application.

Let's see the procedure required to create such an application.

Step 1

First of all 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

Now you need to declare three variables in the class to be used in our application.

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

}

Here I had declared the three variables named Buyer, Car and Price.

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

Now in this Controller Class we will pass the value for the variables that we declared in the Model Class.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication20.Models;

using PerpetuumSoft.Knockout;

namespace MvcApplication20.Controllers

{

public class HomeController : Controller

{

[HttpGet]

public ActionResult Index()

{

Class1 buyer = new Class1();

buyer.Buyer = "Anubhav";

buyer.Car = "Verna";

buyer.Price = "12 lakhs";

return View(buyer);

}

Here in the HttpGet Class I had provided the name of the View File with the Action result, then under it I had created an object of Class1 that is Model Class.

After that I had provided the values for the variables that were declared in the Model Class.

Step 3

One major step is still remaining, it is adding the Nuget's for Knockout. For this right-click on the "References" and choose to "Manage Nuget Packages".

knockout mvc3.jpg

Now in the Nuget Console search for Knockout and then click on the download.

You also need to add a Knockout file to you application, for that you can download my Zip File and then add all the files that I have provided in the Zip Folder to your Application like "Knockout-2.1.0.js" and "knockout.mapping.latest.js"

Step 4

Now we will work on the design of our application, in other words on the View of our application. Right-click on the View Folder and add a New View Class to this View Folder.

knockout mvc4.jpg

In this class you need to write the following code:

@using System.Web.Script.Serialization;

@model MvcApplication20.Models.Class1

ViewBag.Title = "Index";

Layout = "~/Views/ViewPage1.cshtml";

}

<h2>Car Purchaser</h2>

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

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

$(function()

{

var model = @Html.Raw(Json.Encode(Model))

ko.applyBindings(model);

});

</script>

As you can see, in this class I provided the path for the two Knockout Files that will be used for binding the data and for mapping.

After that I took three Spans and with these Spans bound the value of Buyer, Car and Price.

At the end I created a function in which I provided the binding between the Model and the View of this application.

You must be thinking, why did I take the ViewBag, Title and Layout at the start of this code. So I had created a new View Class named ViewPage1 and in this View Class I provided all the remaining files that can be added to use the Knockout in an application.

You will see it by downloading the application.

Output

Now let's have a look at the Output Window. Debug you application to see the output.

knockout mvc5.jpg

As you can see, it's showing the output as static data, if you want to cerate dynamic output then you will see that in my future articles.