1. Implement Search screen using
knockoutjs, Jquery and asp.net
mvc3
Neeraj Kaushik
This article demonstrates implementation of knockoutjs
observable viewmodel and how to bind viewmodel with
html controls.
www.dotnetdlr.com
[Type text] Page 0

2. http://dotnetdlr.com/2012/03/28/implement-search-screen-using-knockoutjs-jquery-and-asp-net-
mvc3-2/
Here I am trying to explain steps for how to use knockoutjsviewmodel, jqueryajax request in
asp.net mvc3 project.
I am taking practical example to show behaviour. This example will have simple UI screen
with search textbox and button. When click on search button ajax request will go to server
and will call action method of controller class which will return results in json format, then
we will see how json result will bind to viewmodel and html controls.
Following is flow of information across different layers:
Let’s start implementation.
Implementation
Model
Create model class Employee.
class Employee
{
publicintEmployeeID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
public string Dept { get; set; }
}
Controller
Create Controller class in controller folder i.e. EmployeeController
Implement Action method “Search” which will search on empname.
publicJsonResult Search(string EmpName)
{
varemplist = PrepareEmpList();
varsearchedlist= from emp in emplist
whereemp.Name.Contains(EmpName)
selectemp;
returnJson(new { Items = searchedlist});
}
1

3. http://dotnetdlr.com/2012/03/28/implement-search-screen-using-knockoutjs-jquery-and-asp-net-
mvc3-2/
private static List PrepareEmpList()
{
varemplist = new List();
//create list of employee
for (inti = 0; i< 20; i++)
{
varemp = new Employee();
emp.EmployeeID = i;
emp.Name = string.Format("Employee-{0}", i);
emp.Address = string.Format("ABC New Delhi- 1{0}", i);
if (i % 2 == 0)
emp.Dept = "IT";
else
emp.Dept = "Admin";
emplist.Add(emp);
}
returnemplist;
}
In above code controller has action method “Search” which has code to search on supplied
search condition and send back result in json object.
View
@{
ViewBag.Title = "Employee Search";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section head{
<script src="../Scripts/knockout-2.0.0.js"></script>
}
<h2>
Employee List</h2>
<div>
Search:<input type="text" data-bind="value:empname" />
<input type="button" id='btnSearch' title="Search" value="Search"/>
</div>
<table style="border-style:solid;border-width:1px">
<thead style="background-color:Gray">
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
Address
</th>
<th>
Phone
</th>
2

4. http://dotnetdlr.com/2012/03/28/implement-search-screen-using-knockoutjs-jquery-and-asp-net-
mvc3-2/
</tr>
</thead>
<tbody data-bind="foreach: employeemodel.employees">
<tr>
<td data-bind="text: EmployeeID">
</td>
<td data-bind="text: Name">
</td>
</tr>
</tbody>
</table>
<input type="text" data-bind="value:empname" />
this is input text box which is bind to empname property of knockoutjsviewmodel which is
defined in javascript file.
<tbody data-bind="foreach: employeemodel.employees">
This will use for looping in viewmodel’s observable collection.
Note: “data-bind” attribute is used to bind knockoutjsviewmodel.
View Model
Viewmodel is defined in java script file. This viewmodel also has search function which
sends ajax request to “Search” action method on server and receive jsonresult .
Employee.js
varemployeemodel;
$(document).ready(function () {
//initializing viewmodel
employeemodel = new viewModel();
//binding for ko
ko.applyBindings(employeemodel);
//bind event
$("#btnSearch").click({ handler: employeemodel.search });
//call search method
//employeemodel.search();
});
functionviewModel() {
var self = this;
self.employees = ko.observableArray([]);
self.empname = ko.observable('');
self.search = function () {
$.ajax({
url: "Employee/Search",
data: { EmpName: self.empname },
type: "POST",
success: function (response) {
3

5. http://dotnetdlr.com/2012/03/28/implement-search-screen-using-knockoutjs-jquery-and-asp-net-
mvc3-2/
//bind data
self.employees(response.Items);
self.DeptId(response.DeptId);
}
});
}
}
Output
You can find code here.
4