Post
Ask Question

Setting Visual Studio 2013 For Knockout.js Development

Knockout.js is a JavaScript library useful for creating interactive and responsive web applications. Knockout implements Model-View-View Model(MVVM) design pattern for JavaScript. In this article I will show you how to start working in Knockout.js

Step 1

Start Visual Studio.

Visual Studio

Figure 1: Visual Studio 

Step 2

Now for creating a website, click on File, go to New and click on Web Site.

Create Website

Figure 2: Create Website 

Step 3

Now we need to add the Knockout.js library to our website. To do that we will manage the Nuget Package and for that we will right-click on the website and click on Manage NuGet Packages.

Manage Nuget Package

Figure 3: Manage Nuget Package  

Step 4

Now we need to search and install the knockout.js library on the website. For that we will type Knockout.js in the search box, then we will install the knockout.js library on the website.

Knockout.js Search

 Figure 4: Knockout.js Search

Knockout Installation

 Figure 5: knockout Installation

After successful installation, we will close the Manage Nuget Package window.

Step 5

For using the Knockout.js library, we need to install jQuery in the website. For installing jQuery we will perform the same operation that we did for installing the Knockout.js library.

jQuery Search

Figure 6: jQuery Search

jQuery Installation

Figure 7: jQuery Installation 

Step 6

Now we will check the website that the script folder has been added to the website. The script folder contains Knockout.js and jQuery files.

Library Added

Figure 8: Library Added 

So the jQuery and Knockout.js files have been added successfully.

Step 7

Now we need to add a Web Form to the website. By right-clicking add a Web Form to the website.

Add WebForm

Figure 9: Add webform 

After adding the Web Form on the website, we will write its name.

Write Name

Figure 10: Write name of the Web Form 

Step 8

Now we need to write the following in the webform:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="demo.aspx.cs" Inherits="demo" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.         <p> First Name :<span data-bind="text:firstName"/></p>  
  13.         <p> Last Name :<span data-bind="text:LastName"/></p>  
  14.       
  15.     </div>  
  16.     </form>  
  17.     <script src="Scripts/knockout-3.3.0.js"></script>  
  18.     <script type="text/javascript">  
  19.         var vm =  
  20.             {  
  21.                 firstName: "Yatendra",  
  22.                 LastName: "Sharma"  
  23.             };  
  24.         ko.applyBindings(vm);  
  25.     </script>  
  26. </body>  
  27. </html>  

 Step 9

We will design the Web Form like the following:

Design Form

Figure 11: Design Form 

Step 10

Now we will execute the website using the F5 key. After execution the following window appears on the screen.

 Execute Window

Figure 12: Execute Window

So the execution window shows that the ko.applyBindings(vm) function is working perfectly.

Summary

In this article I explained how to set the Visual Studio 2013 for the knockout.js development and how to start working on knockout.js .

I hope this article will be helpful for beginners if they want to start working on knockout.js or install it in Visual Studio 2013.


Similar Articles