This article explains how to get started with Knockout and how to display data using Knockout MVC 4.

Intro: Knockout is a JavaScript library that helps you to create rich, responsive displays and editor user interfaces with a clean underlying data model. Read more here http://knockoutjs.com/.

Getting Started: First of all create a new ASP.NET MVC 4 Application and select the basic template and Razor View Engine.

Now work on the model. Create a new class in models.

Employee.cs

public class Employee

{

public int EmployeeID { get; set; }

public string LastName { get; set; }

public string FirstName { get; set; }

public string City { get; set; }

public string Region { get; set; }

public string PostalCode { get; set; }

public string Country { get; set; }

}

EmployeeRepository.cs

public class EmployeeRepository : KnockoutSample.Models.IEmployeeRepository

{

private List<Employee> employeeList = new List<Employee>();

private int _nextId = 1;

public EmployeeRepository()

{

// Add employees records to display

Add(new Employee { EmployeeID = 1, FirstName = "Nancy", LastName = "Davolio", City = "Seattle", Region = "WA", PostalCode = "98122", Country = "USA" });

Add(new Employee { EmployeeID = 2, FirstName = "Andrew", LastName = "Fuller", City = "Tacoma", Region = "WA", PostalCode = "98401", Country = "USA" });

Add(new Employee { EmployeeID = 3, FirstName = "Janet", LastName = "Leverling", City = "Kirkland", Region = "WA", PostalCode = "98033", Country = "USA" });

Add(new Employee { EmployeeID = 4, FirstName = "Margaret", LastName = "Peacock", City = "Redmond", Region = "WA", PostalCode = "98052", Country = "USA" });

Add(new Employee { EmployeeID = 5, FirstName = "Steven", LastName = "Buchanan", City = "London", Region = "WA", PostalCode = "SW1 8JR", Country = "UK" });

Add(new Employee { EmployeeID = 6, FirstName = "Michael", LastName = "Suyama", City = "London", Region = "WA", PostalCode = "EC2 7JR", Country = "UK" });

Add(new Employee { EmployeeID = 7, FirstName = "Robert", LastName = "King", City = "London", Region = "WA", PostalCode = "RG1 9SP", Country = "UK" });

Add(new Employee { EmployeeID = 8, FirstName = "Laura", LastName = "Callahan", City = "Seattle", Region = "WA", PostalCode = "98105", Country = "USA" });

Add(new Employee { EmployeeID = 9, FirstName = "Anne", LastName = "Dodsworth", City = "London", Region = "WA", PostalCode = "WG2 7LT", Country = "UK" });

}

public IEnumerable<Employee> GetAll()

{

// Code to get the list of all the records in database

return employeeList;

}

}


IEmployeeRepository.cs

interface IEmployeeRepository

{

System.Collections.Generic.IEnumerable<Employee> GetAll();

}

Now add a new controller in the controller folder.

using KnockoutSample.Models;

namespace KnockoutSample.Controllers

{

public class EmployeeController : Controller

{

static readonly IEmployeeRepository repository = new EmployeeRepository();

//

// GET: /Employee/

public ActionResult Employee()

{

return View();

}

//

// GET: /Employees/

public JsonResult GetAllEmployees()

{

return Json(repository.GetAll(), JsonRequestBehavior.AllowGet);

}

}

}


Now add a new view and add the following scripts.

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

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

<script src='@Url.Content("~/Scripts/knockout-2.2.0.debug.js")' type="text/javascript"></script>

<script type="text/javascript">

function EmployeeViewModel() {

var self = this;

//Declare observable

self.EmployeeID = ko.observable("");

self.FirstName = ko.observable("");

self.LastName = ko.observable("");

self.City = ko.observable("");

self.Region = ko.observable("");

self.PostalCode = ko.observable("");

self.Country = ko.observable("");

var Employee = {

EmployeeID: self.EmployeeID,

FirstName: self.FirstName,

LastName: self.LastName,

City: self.City,

Region: self.Region,

PostalCode: self.PostalCode,

Country: self.Country

};

self.Employee = ko.observable();

self.Employees = ko.observableArray();

// Initialize the view-model

$.ajax({

url: '@Url.Action("GetAllEmployees", "Employee")',

cache: false,

type: 'GET',

contentType: 'application/json; charset=utf-8',

data: {},

success: function (data) {

self.Employees(data);

}

});

$(document).ready(function () {

var viewModel = new EmployeeViewModel();

ko.applyBindings(viewModel);

});

}

</script>

<h3>

Employees List</h3>

<table id="empl" data-bind="visible: Employees().length > 0">

<thead>

<tr>

<th>

Employee ID

</th>

<th>

First Name

</th>

<th>

Last Name

</th>

<th>

City

</th>

<th>

Region

</th>

<th>

Postal Code

</th>

<th>

Country

</th>

</tr>

</thead>

<tbody data-bind="foreach: Employees">

<tr>

<td data-bind="text: EmployeeID">

</td>

<td data-bind="text: FirstName">

</td>

<td data-bind="text: LastName">

</td>

<td data-bind="text: City">

</td>

<td data-bind="text: Region">

</td>

<td data-bind="text: PostalCode">

</td>

<td data-bind="text: Country">

</td>

<td>

<button data-bind="click: $root.edit">

Edit</button>

<button data-bind="click: $root.delete">

Delete</button>

</td>

</tr>

</tbody>

</table>

Now run the application.


img1.jpg