Getting Started with Adobe After Effects - Part 6: Motion Blur


Upload Image Close it
Select File

Browse by Tags · View All
#DOTNET 33
#.NET 26
#ASP.NET 25
ASP.NET 24
brh 22
#C# 14
.NET 13
WCF 11
c# 9
#MultiThreading 7

Archive · View All
January 2011 10
September 2011 6
May 2011 6
December 2011 5
October 2011 5
June 2011 5
February 2011 3
November 2012 2
August 2012 2
April 2012 2

Implement Search screen using knockoutjs, Jquery and asp.net mvc3

Mar 28 2012 1:24PM by Neeraj Kaushik   

 

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

 

image

 

Let’s start implementation.

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 search function which sends ajax request to “Search” action method on server and receive 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);
                self.DeptId(response.DeptId);
            }
        });

    }
}

 

Output

image

 

You can find code here.

Tags: #ASP.NET, ASP.NET, jquery,


Neeraj Kaushik
55 · 4% · 1132
4
 
0
Lifesaver
 
0
Refreshed
 
0
Learned
 
0
Incorrect



Submit

Your Comment


Sign Up or Login to post a comment.

"Implement Search screen using knockoutjs, Jquery and asp.net mvc3" rated 5 out of 5 by 4 readers
Implement Search screen using knockoutjs, Jquery and asp.net mvc3 , 5.0 out of 5 based on 4 ratings
    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]