ASP.Net Web API Application Using Knockout.js

This article explains how to create a simple application using knockout.js with the ASP.NET Web API.

Introduction

This article explains how to create a simple application using knockout.js with the ASP.NET Web API. In this article we create a database, and we can update and delete the data of the database with this application. Knockout js is the JavaScript implementation for creating the rich, responsive display and editor user interfaces with a clean underlying data model. It is an open source library implemeted entirely in JavaScript.

Binding:

  • data-bind: It is used as HTML attributes.
  • Ko.oberserable: It is a property that wrap the object property with a custom function.

Use the following procedure to create a sample application.

Step 1

First we create a database with the table "CustomerInfo".

use mudita

Create table CustomerInfo(CustNo int IDENTITY(1,1) PRIMARY KEY NOT NULL, CustName varchar(10) NOT NULL,Salary decimal(18,0)NOT NULL, DeptName varchar(50) Not Null)

 

 Step 2

Create a Web API application as in the following:

  • Start Visual Studio 2012.
  • From the Start window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP .NET MVC4 Web Application' and click on the "OK" button.

Select MVC4 Application

  • From the "MVC4 Project" window select "Web API".

Select Web API

  • Click on the "OK" button.

Step 3

Now add the ADO.NET Entity Data Model to the project.

  • In the Solution Explorer.
  • Right-click on the Model folder then select "Add" -> "New Item".
  • From the template window select "Installed" -> "Data" and then select "ADO.NET Data Model".

Add ADO.NET Model

Open a window select Generate from database.

Generate Database

Click on the "Next" button and open a dialog box then click on "New Connection".

Create New Connection

Select the server name and database and click on the "Ok" button.

Select Table from database

Now from the entity data model wizard select the table and click on the "Finish" button.

ADO.NET Model

Step 4

Add an API Controller:

  • In the "Solution Explorer".
  • Right-click on the Controller folder and select "Add" -> "Controller".
  • Select API controller with read /write actions using Entity Framework.
  • Select Model class and Data Context.

Add API Controller

  • Click on the "Add" button.

Step 5

Now we create an MVC Controller"CustomerInfoController.cs" and add a Create Action method "Create". And create a View of the "Create" action method.

Add View

Add the following code in the View:

@{

    ViewBag.Title = "Create";

} 

<h2>Create</h2>

<html>

<h2>Create</h2>

<head>

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

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

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

    <link href="~/Content/Site.css" rel="stylesheet" />

</head>

<body>

    <form>

        <table>

            <tr>

                <td>

                    <!--Bind the TextBoxes in the Table to the observable properties defined into the ViewModel -->

                    <table id="tbldml">

                        <tr>

                            <td>CustNo</td>

                            <td>

                                <input type="text" id="txteno" data-bind="value: $root.CustNo" disabled="disabled" /></td>

                        </tr>

                        <tr>

                            <td>CustName</td>

                            <td>

                                <input type="text" id="txtename" data-bind="value: $root.CustName" /></td>

                        </tr>

                        <tr>

                            <td>Salary</td>

                            <td>

                                <input type="text" id="txtsal" data-bind="value: $root.Salary" /></td>

                        </tr>

                        <tr>

                            <td>DeptName</td>

                            <td>

                                <input type="text" id="txtdname" data-bind="value: $root.DeptName"/></td>

                        </tr>
                       
<tr>

                            <!--The click binding has the JavaScirpt methods passed to it-->

                            <td>

                                <button data-bind="click :$root.save">Save</button></td>

                            <td>

                                <button data-bind="click: $root.update">Update</button></td>

                        </tr>

                    </table>

                </td>

                <td>

                    <div class="FixedContainer">

                         <table data-bind="visible:  Customers().length>0" style="border: double">

                            <thead>

                                <tr>

                                    <td>CustNo</td>

                                    <td>CustName</td>

                                    <td>Salary</td>

                                    <td>DeptName</td>

                                    <td></td>

                                </tr>

                            </thead>

                            <!--Iterate through an observableArray using foreach-->

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

                                <tr style="border: solid" data-bind="click: $root.getselectedcustomer" id="updtr">

                                    <td><span data-bind="text:  CustNo"></span></td>

                                    <td><span data-bind="text:  CustName"></span></td>

                                    <td><span data-bind="text: Salary"></span></td>

                                    <td><span data-bind="text: DeptName"></span></td>                  

                                    <td>

                                        <button data-bind="click: $root.deleterec">Delete</button></td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                </td>

            </tr>

        </table>

    </form>

    <script type="text/javascript">

        var CustViewModel = function () {

            //Make the self as 'this' reference

            var self = this;

            //Declare observable which will be bind with UI

            self.CustNo = ko.observable("0");

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

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

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

            //The Object which stored data entered in the observables

            var CustData = {

                CustNo: self.CustNo,

                CustName: self.CustName,

                Salary: self.Salary,

                DeptName: self.DeptName,     

            };

            //Declare an ObservableArray for Storing the JSON Response

            self.Customers = ko.observableArray([]);

            GetCustomers(); //Call the Function which gets all records using ajax call

            self.save = function () {

                //Ajax call to Insert the Customer record

                $.ajax({

                    type: "POST",

                    url: "http://localhost:55333//api/CustomerInfoAPI",

                    data: ko.toJSON(CustData), //Convert the Observable Data into JSON

                    contentType: "application/json",

                    success: function (data) {

                        alert("Record Added Successfully");

                        self.CustNo(data.CustNo);

                        alert("The New Customer Id :" + self.CustNo());

                        GetCustomers();

                    },

                    error: function () {

                        alert("Failed");

                    }

                });

                //Ends Here

            };

            self.update = function () {

                var url = "http://localhost:55333//api/CustomerInfoAPI/" + self.CustNo();

                alert(url);

                $.ajax({

                    type: "PUT",

                    url: url,

                    data: ko.toJSON(CustData),

                    contentType: "application/json",

                    success: function (data) {

                        alert("Record Updated Successfully");

                        GetCustomers();

                    },

                    error: function (error) {

                        alert(error.status + "<!----!>" + error.statusText);

                    }

                });

            };

            //Function to perform DELETE Operation

            self.deleterec = function (customer) {

                $.ajax({

                    type: "DELETE",

                    url: "http://localhost:55333//api/CustomerInfoAPI/" + customer.CustNo,

                    success: function (data) {

                        alert("Record Deleted Successfully");

                        GetCustomers();//Refresh the Table

                    },

                    error: function (error) {

                        alert(error.status + "<--and--> " + error.statusText);

                    }

                });

                            };

            function GetCustomers() {  

              $.ajax({

                    type: "GET",

                    url: "http://localhost:55333//api/CustomerInfoAPI",

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

                    dataType: "json",

                    success: function (data) {

                        self.Customers(data); //Put the response in ObservableArray

                    },

                    error: function (error) {

                        alert(error.status + "<--and--> " + error.statusText);

                    }

                });

                //Ends Here

            }

            //Function to Display record to be updated

            self.getselectedcustomer = function (customer) {

                self.CustNo(customer.CustNo),

                self.CustName(customer.CustName),

                self.Salary(customer.Salary),

                self.DeptName(customer.DeptName)        

            };

        };

        ko.applyBindings(new CustViewModel());

    </script>

</body>

</html>

 

Step 6

Execute the application. Fill in a record and click on the "Save" button. It then displays a successful submission message..

Save Data


Display Save successful message

Update the record. Change a record and click on the "Update" button. Here we update "Tanya" with "Priya". It updates the record.

Update Record

For deleting the record click on the "Delete" button. You can see that it deletes the record.

Update Record

Record deleted

See Data Deleted

We can also see our database using the command:

Select * from CustomerInfo