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:
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();
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 the 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 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.
Employee.js
var employeemodel;
$(document).ready(function () {
employeemodel = new viewModel();
ko.applyBindings(employeemodel);
$("#btnSearch").click({ handler: 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) {
self.employees(response.Items);
}
});
}
}
Output
• 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