Setting Visual Studio 2013 For Knockout.js Development

Yatendra Sharma
9y
12.4k
0
1

Article

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

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="demo.aspx.cs" Inherits="demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p> First Name :<span data-bind="text:firstName"/></p>
<p> Last Name :<span data-bind="text:LastName"/></p>
</div>
</form>
<script src="Scripts/knockout-3.3.0.js"></script>
<script type="text/javascript">
var vm =
{
firstName: "Yatendra",
LastName: "Sharma"
};
ko.applyBindings(vm);
</script>
</body>
</html>