Technology Corner

Home » DotNet » Asp.Net » Implement Search screen using knockoutjs, Jquery and mvc3

Implement Search screen using knockoutjs, Jquery and mvc3

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 80 other followers

Twitter updates


RSS InfoQ Feeds

  • First Pedestrian Killed by Self-Driving Car
    A pedestrian was killed on Sunday evening in Tempe, Arizona by a self-driving car operated by Uber, the BBC reports. The firm confirmed that the vehicle was traveling in autonomous mode with a safety driver, the only vehicle occupant, behind the wheel during the crash. By Roland Meertens
  • Microsoft Embeds Artificial Intelligence in Windows 10 Update
    The next Windows 10 update opens the way for the integration of artificial intelligence functionalities within Windows applications. Developers will be able to integrate pre-trained deep-learning models converted to the ONNX framework in their Windows applications. By Alexis Perrier
  • Ankyra Presents “Escape”, a Release Automation Tool that Manages Platforms as Logical Components
    Over the last ten years there has been increased focus on infrastructure as code (IaC) tooling, primarily driven by the rise of Infrastructure as a Service (IaaS) and API-driven infrastructure. InfoQ discussed the challenges of homogenising this tooling with Bart Spaans, founder of Ankyra, who is an expert in the domain of infrastructure and release engineer […]
  • Article: Servlet and Reactive Stacks in Spring Framework 5
    Spring Framework 5 supports both traditional servlet-based and reactive web stacks, in the same server application, reflecting a major shift towards asynchronous, non-blocking concurrency in applications. In this article Spring committer Rossen Stoyanchev explores and contrasts both stacks, and explains the range of available choices, and provides guidance f […]
  • Presentation: Elm and Game Development, a Perfect Fit
    Paulo Diniz discusses the Elm architecture, how to use it as functional reactive programming for web game development. By Paulo Diniz
  • Google Releases “Skaffold”, a Tool That Facilitates Continuous Development with Kubernetes
    Google has released Skaffold, an open source command line tool that facilitates continuous development for Kubernetes applications. Skaffold is entering an increasingly crowded space of Kubernetes development automation tooling, including Azure’s Draft, Datawire’s Forge and Weavework’s Flux. By Daniel Bryant
  • Q&A with Marisa Fagen on Security Championship
    Security lead Marisa Fagen recently spoke at QConLondon 2018 about upskilling and elevating engineering team members into the role of Security Champions. We catch up with Fagen and report on her efforts to address contention caused by a scarcity of security professionals. By Rafiq Gemmail
  • GitHub Licensed Aims to Make it Easier to Comply with OSS Licenses
    GitHub Licensed is an open-source tool that aims to simplify the chore of ensuring license soundness and documentation for all dependencies of a GitHub project. By Sergio De Simone
  • Sauce Labs Adds Analytics and Extended Debugging to Continuous Testing Cloud
    At their recent user conference SauceCon, Sauce Labs introduced new capabilities for its continuous testing cloud including test analytics, featuring a dashboard that analyses test results and exposes common failures by browser and operating system, including Android and iOS. By Helen Beal
  • JavaFX and the Future of Java Client Technologies
    Oracle will remove JavaFX, Applets and Java Web Start from the JDK after Java SE 8. Swing and AWT will remain. By Tim Hodkinson


Here I am trying to explain steps for how to use knockoutjs viewmodel, jquery ajax request in 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.



Create model class Employee.


class Employee
        public int EmployeeID { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string Phone { get; set; }
        public string Dept { get; set; }


  • Create Controller class in controller folder i.e. EmployeeController
  • Implement Action method “Search” which will search on empname.
public JsonResult Search(string EmpName)
            var emplist = PrepareEmpList();

            var searchedlist= from emp in emplist
                            where emp.Name.Contains(EmpName)
                            select emp;

            return Json(new { Items = searchedlist});

        private static List PrepareEmpList()
            var emplist = new List();
            //create list of employee
            for (int i = 0; i < 20; i++)
                var emp = 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";
                    emp.Dept = "Admin";

            return emplist;


In above code controller has action method “Search” which has code to search on supplied search condition and send back result in json object.


    ViewBag.Title = "Employee Search";
    Layout = "~/Views/Shared/_Layout.cshtml";
@section head{
<script src="../Scripts/knockout-2.0.0.js"></script>

    Employee List</h2>

Search:<input type="text" data-bind="value:empname" />

<input type="button" id='btnSearch' title="Search" value="Search"/>

<table style="border-style:solid;border-width:1px">
    <thead style="background-color:Gray">
    <tbody data-bind="foreach: employeemodel.employees">
            <td data-bind="text: EmployeeID">
            <td data-bind="text: Name">

<input type="text" data-bind="value:empname" />

this is input text box which is bind to empname property of knockoutjs viewmodel 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 knockoutjs viewmodel.

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 json result .


var employeemodel;
$(document).ready(function () {

    //initializing viewmodel
    employeemodel = new viewModel();
    //binding for ko
    //bind event
    $("#btnSearch").click({ handler: });
    //call search method


function viewModel() {
    var self = this;
    self.employees = ko.observableArray([]);
    self.empname = ko.observable(''); = function () {
            url: "Employee/Search",
            data: { EmpName: self.empname },
            type: "POST",
            success: function (response) {
                //bind data                






You can find code here.


  1. Very interesting code, I must try this out. Thanks for posting!


  2. […] 22, 2012 Neeraj Kaushik Leave a comment Go to comments In continuation of my previous post on search implementation using knockoutjs. In previous example I bind grid with knockoutjs observable array object. Because of observable […]


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blogs I Follow

%d bloggers like this: