Click here to Skip to main content
15,395,877 members
Articles / Web Development / HTML
Technical Blog
Posted 28 Mar 2012


29 bookmarked

Implement Search Screen using knockoutjs, jQuery, and ASP.NET MVC3

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
23 Jul 2012CPOL1 min read
This article demonstrates implementation of knockoutjs observable viewmodel with jquery and ASP.NET MVC 3 and how to bind viewmodel with HTML controls.


Here, I am trying to give steps for how to use knockoutjs viewmodel, jQuery AJAX request in an ASP.NET MVC3 project.

I am taking a practical example to show this 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 the flow of information across the different layers:




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 the 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 binds 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 JavaScript file. This viewmodel also has a search function which sends an AJAX request to the Search action method on the server and receives 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




This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Neeraj Kaushik1980
Architect Saxo Bank A/S
Denmark Denmark
• Solution Architect /Principle Lead Developer with 12 years of IT experience with more emphasize on Capital Domain and Investment banking domain.
• Strong experience in Continuous Integration, Delivery and DevOps solutions.
• Strong experience in drafting solutions, stakeholder communications and risk management.
• Proved strong coding and designing skills with agile approaches (TDD, XP framework, Pair Programming).
• Delivered many projects with involvement from inception to delivery phase.
• Strong experience in high performance, multithreaded, low latency applications.
• Ability to communicate with the business and technical stake holders effectively.
• Have extensive experience in Capital Market Domain: Front Office & BackOffice (Algorithm Trading tools, messaging framework, Enterprise bus, integration of FIX APIs and many trading APIs).
• Functional knowledge of Portfolio/Wealth Management, Equities, Fixed Income, Derivatives, Forex.
• Practical knowledge of building and practicing agile delivery methodologies (SCRUM, TDD, Kanban).

Technical Skills

• Architectural: Solution Design, Architectural Presentations (Logical, Component, Physical, UML diagrams)
• Languages: C#, C++
• Server Technologies: WCF, Web API,
• Middle Ware: ActiveMQ, RabbitMQ, Enterprise Service Bus
• UI Technologies: Winforms and WPF
• Web Technologies: Asp.Net Mvc, KnockOutJS, JQuery, Advance Java Scripts Concepts
• Databases: Sql Server 2008 +, MySQL
• Tools/Frameworks: TFS, SVN, NUnit, Rhino Mocks, Unity, NAnt, QuickFix/n, Nhibernate, LINQ, JIRA,

Functional Skills

• Wealth Management System, Trade Life Cycle, Trading Components and their integrations
• Working knowledge of Stocks, Bonds, CFDs,Forex, Futures and Options
• Pricing Systems, Market Data Management,
• BackOffice Processes : Settlement Processes, Netting, Tax, Commissions, Corporate Actions Handling,
• Reporting Solutions : OLTP and OLAP Data model designing
• FIX Engine implementation and integration

Comments and Discussions

Questionemplist is created each time Pin
ramesh bas3-Mar-13 15:47
Memberramesh bas3-Mar-13 15:47 
GeneralMy vote of 5 Pin
Unque31-Jul-12 0:58
MemberUnque31-Jul-12 0:58 
Questionexcellent! Pin
Member 14901622-Jul-12 5:20
MemberMember 14901622-Jul-12 5:20 
AnswerRe: excellent! Pin
Neeraj Kaushik198022-Jul-12 8:41
MemberNeeraj Kaushik198022-Jul-12 8:41 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey18-Jul-12 19:54
professionalManoj Kumar Choubey18-Jul-12 19:54 
Generalwonderful sample Pin
faber751-Jul-12 7:43
Memberfaber751-Jul-12 7:43 
Questiongood article Pin
AbdullaMohammad3-Apr-12 6:02
MemberAbdullaMohammad3-Apr-12 6:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.