Introduction
This article explains how to create a Contacts Editor using Knokcoutjs in an ASP.NET Application.
At the end of the article we will create an application that will look something like this:
![contacts knockout1.jpg]()
Let's see the procedure to make such an application.
Step 1
First of all you need to add two external files to your application:
- Knockout-2.3.0.js
- jquery-1.3.2.min.js
You can either download them from the internet or can download the Zip file provided at the start of this article.
After adding these files you need to work on the ViewModel of your application.
Step 2
Write the following code in the ViewModel of your application.
<script>
var initialData = [
{
firstName: "Anubhav", lastName: "Chaudhary", contacts: [
{ type: "Mobile", number: "9898989898" },
{ type: "Home", number: "0120-555555" }]
},
{
firstName: "Mohit", lastName: "Chaudhary", contacts: [
{ type: "Mobile", number: "80586757576" },
{ type: "Home", number: "0121-123456" }]
}
];
var MeetingModel = function (meetings) {
var self = this;
self.meetings = ko.observableArray(ko.utils.arrayMap(meetings,
function (meeting) {
return {
firstName: meeting.firstName, lastName: meeting.lastName,
contacts: ko.observableArray(meeting.contacts)
};
}));
self.addMeeting = function () {
self.meetings.push({
firstName: "",
lastName: "",
contacts: ko.observableArray()
});
};
self.removeMeeting = function (meeting) {
self.meetings.remove(meeting);
};
self.addNumber = function (meeting) {
meeting.contacts.push({
type: "Mobile",
number: ""
});
};
self.removeNumber = function (phone) {
$.each(self.meetings(), function () {
this.contacts.remove(phone)
})
};
};
ko.applyBindings(new MeetingModel(initialData));
</script>
Here first I passed some data to be shown when the application is run, this data is passed under the "initialData".
After that I created a function named "MeetingModel", this is the main function in which all the coding is to be done. After that I had an Observable Array named "meetings", this array will hold the information about the user like his First Name, Last Name and his Contact Number.
After that I created a function named "addMeeting", this function will help in adding a new record at runtime, this function will push the First Name, Last Name and his Contact Number that is also an Observable Array.
After that I created a function named "removeMeeting", this function is used to delete a Record of User.
After that I created a function named "addNumber", this function will allow the user to enter Mobile Numbers at run time.
The last function is made for removing the Contact Numbers of a specific User.
At the end I had applied bindings to the Meeting Model Function in which the initial data is passed.
Our work on the ViewModel is bow completed, so now we will move to the View Part of our application.
Step 3
In the View Part of your application write the following code:
<div class='contactEditor'>
<h2>Contacts</h2>
<div id='div1'>
<table class='contactsTable'>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone numbers</th>
</tr>
<tbody data-bind="foreach: meetings">
<tr>
<td>
<input data-bind='value: firstName' />
<div><a href='#' data-bind='click: $root.removeMeeting'>Delete</a></div>
</td>
<td><input data-bind='value: lastName' /></td>
<td>
<table>
<tbody data-bind="foreach: contacts">
<tr>
<td><b data-bind='text: type' ></b></td>
<td><input data-bind='value: number' /></td>
<td><a href='#' data-bind='click: $root.removeNumber'>Delete</a></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addNumber'>Add Mobile number</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addMeeting'>Add a contact</button>
</p>
</div>
Here first I had bound the tbody with the meetings array. After that I bound the "firstName" with the TextBox, in the same td I provided a hyperlink that is bound with "removeMeeting" so it will be used to remove any specific user from the list.
In the next <td> I had bound the lastName so it will be used to store the Last Name of the user.
After that I had again created a table inside the td, in this table body I had bound the Contacts Array.
In the next three <td> I had bound the type, number and removeNumber. Here the user can provide the Numbers or can remove the Numbers.
After that I had provided the hyperlink that is bound with addNumber, this hyperlink will be used in the case if the user wants to add more numbers of Mobile Numbers.
At the end I had provided a button that is bound with the addMeeting so it will help the user to add a new user at runtime.
Now your application is created and you can run it to see the output.
Output
On running the application you will get an output like this:
![contacts knockout1.jpg]()
But if I click on the delete link provided in the front of numbers then they will be deleted.
![contacts knockout2.jpg]()
Now I am clicking on the Add Mobile Number that will allow you to add a new Mobile Number for the user.
![contacts knockout3.jpg]()
After that I am clicking on the delete link provided at the name of the User, this will delete the complete Raw of specific user.
![contacts knockout4.jpg]()
Now I am adding a new user by clicking on the "Add" button provided at the bottom of the Output Window.
![contacts knockout5.jpg]()