Implement Search Screen Using Knockoutjs

2,013 views
1,816 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,013
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Implement Search Screen Using Knockoutjs

  1. 1. Implement Search screen usingknockoutjs, Jquery and asp.netmvc3 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. 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 inasp.net mvc3 project.I am taking practical example to show behaviour. This example will have simple UI screenwith search textbox and button. When click on search button ajax request will go to serverand will call action method of controller class which will return results in json format, thenwe will see how json result will bind to viewmodel and html controls.Following is flow of information across different layers:Let’s start implementation.ImplementationModelCreate 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 emplistwhereemp.Name.Contains(EmpName)selectemp;returnJson(new { Items = searchedlist}); } 1
  3. 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 employeefor (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";elseemp.Dept = "Admin";emplist.Add(emp); }returnemplist; }In above code controller has action method “Search” which has code to search on suppliedsearch 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. 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 isdefined 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 ModelViewmodel is defined in java script file. This viewmodel also has search function whichsends ajax request to “Search” action method on server and receive jsonresult .Employee.jsvaremployeemodel;$(document).ready(function () { //initializing viewmodelemployeemodel = new viewModel(); //binding for koko.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. 5. http://dotnetdlr.com/2012/03/28/implement-search-screen-using-knockoutjs-jquery-and-asp-net-mvc3-2/ //bind dataself.employees(response.Items);self.DeptId(response.DeptId); } }); }}OutputYou can find code here. 4

×