Introduction
This article rxplains how to apply Foreach Binding in ASP.NET using Knockoutjs.
My previous article was about many types of bindings that are possible with various kinds of HTML Controls. In this article I will show you one more type of binding that can be very useful in reducing the code, you just need to pass it for the first time and it will create the controls and the binding of it's own.
Let's see the procedure to use foreach binding.
Step 1
First of all you need to add an external Knockout js file into your application, you can either download it from the internet or can download my application that is available at the start of this article in ZIP Format and then use the file attached with this ZIP file.
After downloading the file you need to call it in the head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.1.0.js"></script>
</head>
Step 2
Now we can work on our application. First we will work on the ViewModel; for this you need to add a Script tag under the body section and then need add this code:
<script type="text/javascript">
ko.applyBindings({
PersonName: [
{ firstName: 'Anubhav', lastName: 'Chaudhary' },
{ firstName: 'Mohit', lastName: 'Singh' },
{ firstName: 'S.P', lastName: 'Singh' }
]
});
</script>
In this article we just need some data that is to be bound with the HTML controls, so I passed the data in the form of a Name and Surname.
You will be wondering why I did not use a function to describe the data. As I had already told you, here we just need some data to be called in the HTML controls so I declared the data under the applyBinding.
Step 3
Now the work on the ViewModel is now completed so we can now move towards the view or design of our application.
You need to write this code in the ASP.NET page:
<table >
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: PersonName">
<tr>
<td >
<input data-bind="value: firstName" />
</td>
<td >
<input data-bind="value: lastName" />
</td>
</tr>
</tbody>
</table>
Here I first passed two headings through the head section.
After that I bound the <tbody> tag with the "PersonName" using foreach binding, you might be wondering why I didn't call foreach binding in the <table> tag. That's because if I call the foreach in the <table> tag then the headings that I passed in the head section will be called for each <tr>; that means that after every row a new heading will be shown.
After that I created a single row and two columns, in the first <td> I bound the input tag with the firstName and in the second <td> I bound the input tag with the lastName.
You can see that I used a single Row and single Input tag's in each <td> but there were three entries in the ViewModel. On running the code you will see what happened.
The complete code of the application is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication33.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="knockout-2.1.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<ul data-bind="foreach: planets">
<li>
Planet: <b data-bind="text: name"> </b>
<div data-bind="if: capital">
Capital: <b data-bind="text: capital.cityName"> </b>
</div>
</li>
</ul>
<script>
ko.applyBindings({
planets: [
{ name: 'Mercury', capital: null },
{ name: 'Earth', capital: { cityName: 'Barnsley' } }
]
});
</script>
</form>
</body>
</html>
Output
Now your application is ready to run and you can debug it.
On running the application you will get output like this:
![foreach bining using knockout1.jpg]()
You will see three separate rows created and in each row two separate columns are created and each column has a separate Input Box available for holding the values that were provided in the ViewModel of the application.