Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Implement search screen using knockoutjs, jQuery, and ASP.NET MVC3

, 23 Jul 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
This article demonstrates implementation of knockoutjs observable viewmodel with jquery and asp.net mvc 3 and how to bind viewmodel with html controls.

Introduction

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:

 

image

 

Implementation 

Model 

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; }
    } 

Controller

  • 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";
                else
                    emp.Dept = "Admin";

                emplist.Add(emp);
            }
            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.

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>
        </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 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 a search function which sends an AJAX request to the Search action method on the server and receives JSON result .

Employee.js

var employeemodel;
$(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();

});

function viewModel() {
    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) {
                //bind data
                self.employees(response.Items);
            }
        });

    }
}

Output

image

License

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

Share

About the Author

Neeraj Kaushik 1980
Architect Initto Technologies India Pvt Ltd
India India
• Technical Architect with 9 years of Application development experience
• Good knowledge and expertise on multiple areas of technologies and their business applications
• Strong experience in high performance and business critical applications.
• Experience in creating framework, Code generators, and UML diagrams.
• Developed messaging framework for Algo Trading, technical analysis tool, market feed client Api, Payment Solutions for SWIFT, Internationalization for Core Banking Solution product etc.
• Practical knowledge of building and practicing agile delivery methodologies (SCRUM & TDD).
• Proven ability in producing technical documentation and presentation to clients.
• Active participation in trainings, article writing & taking initiatives.
• Passion to get knowledge from various resources acquires best practices.
• Good understanding of financial domain especially in investment banking and banking domain.
Specialties
 
Technical Architectures, Multi-threading Architecture, Algo Trading systems, Messaging Framework, FIX Implementation, Technical Analysis & Charting, ActiveMQ, MSMQ, C#, WinForms, ASP.NET MVC, Jquery, WCF, Sql Server 2008, Oracle, TFS, TDD, QuickFix, Open Source Tools & Framework.
Follow on   Twitter

Comments and Discussions

 
Questionemplist is created each time Pinmemberramesh bas3-Mar-13 16:47 
GeneralMy vote of 5 PinmemberUnque31-Jul-12 1:58 
Questionexcellent! PinmemberMember 14901622-Jul-12 6:20 
AnswerRe: excellent! PinmemberNeeraj Kaushik 198022-Jul-12 9:41 
GeneralMy vote of 5 Pinmembermanoj kumar choubey18-Jul-12 20:54 
Generalwonderful sample Pinmemberfaber751-Jul-12 8:43 
Questiongood article Pinmembersamthec3-Apr-12 7:02 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141216.1 | Last Updated 23 Jul 2012
Article Copyright 2012 by Neeraj Kaushik 1980
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid