Display Data Using Knockout in MVC 4

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

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