Using Knockout in Asp.Net MVC

By   Calendar icon Feb 25, 2020   Level 1 icon

Description:

Here we explain what the JavaScript Knockout library is for and how to use it in the framework ASP.NET MVC. We give some examples of using Knockout.

Preferencesoft

In this article, we explain how to use Knockout to create a web application in ASP.NET MVC.

Knockout, a JavaScript library

Knockout is a JavaScript library to link data to DOM elements of an HTML page, by respecting a MVVM pattern (Model - View - ViewModel). It aims to help implement responsive editing user interfaces that update through user actions or various events.

This library has been designed to make certain sections of the user interface responsive to certain actions of the users or changes in external data sources. During an update of the data, the page is not fully charged, but only some parts are refreshed.

The library fits easily in many Framework like ASP.NET MVC and works on all major browsers. For these reasons, it is often used by developers to facilitate the implementation of web applications.

This library is an expandable JavaScript library that allows you to create components in HTML documents using a view model.

Knockout is a JavaScript library still widely used to create web applications because it is light and simple. On the other hand, Knockout is very well suited to the development of complex applications, because it imposes a paradigm MVVM (ModelView-View-Model) on the client side.

Knockout can easily ally with any side templating server, such as the ASP.NET MVC, and a JavaScript program with Knockout fits very well into a page containing Razor code.

It has no dependence on another JavaScript library (such as JQuery)

Installing Knockout with ASP.NET Core

We can use it in a simple HTML page by referring the knockout.js file between the tags <head> </head> as shown in the following code:
<script type = 'text/javascript' src = '~/knockoutdir/knockout-3.4.2.js'></script>
You must adapt the path of the knockout file, in the src attribute, to where you placed it. We can also refer to the Knockout library from CDNs. For example, we can insert the following code to refer to Knockout from Microsoft Ajax CDN:
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.2.js" type = "text/javascript"></script>

We will in the sequel use Knockout in an application ASP.NET Core MVC.

Let's start by creating with Visual Studio 2017, an application ASP.NET Core MVC.

We can refer the application to a Knockout library of a CDN or install knockout locally.

To install a JavaScript client library, it is recommended to use LibMan (or possibly npm) rather than Nuget. With Nuget, some libraries do not always settle into the proper directory.

Let's add the following two lines to libman.json:

{
      "library": "knockout@3.5.1",
      "destination": "wwwroot/lib/knockout/"
}

After restoring the client-side libraries, we can insert the following references between the tags <environment> </environment> into the _Layout.cshtml file.

<script type = 'text/javascript' src = '~/lib/knockout/knockout-latest.js'></script>
<script type = 'text/javascript' src = '~/lib/knockout/knockout-latest.min.js'></script>

At the end of the file _Layout.cshtml so we have the following code:

<environment include="Development">
   <script src="~/lib/knockout/knockout-latest.js"></script>
</environment>
<environment exclude="Development">
   <script src="~/lib/knockout/knockout-latest.min.js"></script>
</environment>

In the index.cshtml file, let's incorporate the following lines:

Number of <span data-bind="text: objectName"></span> in the stock:&nbsp;<span data-bind="text: objectNumber"></span>
@section scripts {
    <script>
        $(document).ready(function () {
             var myViewModel = {
                objectName: 'hammer',
                objectNumber: 12
            };
            ko.applyBindings(myViewModel);
        });
    </script>
}

Let's run the app:
Result

knockout text

Knockout examples

Developed and maintained by Steve Sanderson, Knockout is very well documented, and the author's website contains many examples.


JavaScript

Categories