for this you need to download knockout js
Example 1
First Name:
Hello,First: mukesh
Last Name:
Hello,Last: trivedi
Hello,fullName: mukesh trivedi
<script src="../../Scripts/knockout.js" type="text/javascript"></script>
<h2>First Name:<input data-bind='value: firstName'> </input></h2>
<h2>Hello,First: <span data-bind='text: firstName'> </span></h2>
<h2>Last Name:<input data-bind='value: lastName'> </input></h2>
<h2>Hello,Last: <span data-bind='text: lastName'> </span></h2>
<h2>Hello,fullName: <span data-bind='text: fullName'> </span></h2>
<script type="text/javascript" language="javascript">
var obj = [
firstName = ko.observable("my first name"),
lastName = ko.observable("my last name")];
this.fullName = ko.pureComputed(function () {
return this.firstName() + " " + this.lastName();
}, this);
ko.applyBindings(obj);
</script>
=============================================
Example 2
controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Knockout2.Models;
namespace KnockoutMvc.Controllers
{
public class EmployeeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View("EmployeeInfo");
}
[HttpPost]
public ActionResult SaveEmployee(Employee emp)
{
//EmployeeMode save code here
return View("EmployeeInfo");
}
[HttpGet]
public ActionResult PhoneList()
{
return View("EmployeePhone");
}
}
}
========================================
core.js
function Employee()
{
var that = this;
that.FirstName = ko.observable("");
that.LastName = ko.observable("");
that.FullName = ko.computed(function () {
return that.FirstName() + " " + that.LastName();
});
that.DateOfBirth = ko.observable("");
that.EducationList = ko.observableArray();
that.Gender = ko.observable("0");
that.DepartmentList = ko.observableArray([{ Id: '0', Name: "CSE" }, { Id: '1', Name: "MBA" }]);
that.DepartmentId = ko.observable("1");
}
function EmployeeVM() {
var that = this;
that.Employee = new Employee();
that.reset = function () {
that.Employee.FirstName("");
that.Employee.LastName("");
that.Employee.DateOfBirth("");
that.DateOfBirth = ko.observable("");
that.EducationList = ko.observableArray();
that.Gender = ko.observable("0");
that.DepartmentList = ko.observableArray([{ Id: '0', Name: "CSE" }, { Id: '1', Name: "MBA"}]);
};
that.submit = function () {
var json1 = ko.toJSON(that.Employee);
$.ajax({
url: '/Employee/SaveEmployee',
type: 'POST',
dataType: 'json',
data: json1,
contentType: 'application/json; charset=utf-8',
success: function (data) {
var message = data.Message;
}
});
};
};
var _vm = new EmployeeVM();
$(function () {
ko.applyBindings(_vm);
});
view
@model Knockout2.Models.Employee
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EmployeeInfo</title>
<script src="../../Scripts/core.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
</script>
</head>
<body>
<form id="employeeForm" name="employeeForm" method="POST">
<div id="form-root">
<div>
<label class="form-label">First Name:</label>
<input type="text" id="txtFirstName" name="txtFirstName" data-bind="value:Employee.FirstName" />
</div>
<div>
<label class="form-label">Last Name:</label>
<input type="text" id="txtLastName" name="txtLastName" data-bind="value:Employee.LastName" />
</div>
<div>
<label class="form-label">Full Name:</label>
<input type="text" id="txtFullName" name="txtFullName" data-bind="value:Employee.FullName" readonly="readonly" />
</div>
<div>
<label class="form-label">Date Of Birth:</label>
<input type="text" id="txtDateOfBirth" name="dateOfBirth" data-bind="value:Employee.DateOfBirth" />
</div>
<div>
<label>Education:</label>
<input type="checkbox" value="graduation" id="chkGraduation" name="chkGraduation" data-bind="checked:Employee.EducationList" />Graduation
<input type="checkbox" value="postGraduation" id="chkPostGraduation" name="chkPostGraduation" data-bind="checked:Employee.EducationList" />PostGraduation
</div>
<div>
<label>Gender:</label>
<input type="radio" id="rdoMale" name="gender" value="0" data-bind="checked:Employee.Gender" />Male
<input type="radio" id="rdoFeMale" name="gender" value="1" data-bind="checked:Employee.Gender" />FeMale
</div>
<div>
<label class="form-label">Department:</label>
<select id="ddlDepartment" name="ddlDepartment" data-bind="options:$root.Employee.DepartmentList, optionsValue:'Id', optionsText:'Name', value:Employee.DepartmentId">
</select>
</div>
<div>
<input type="button" id="btnSubmit" value="Submit" data-bind = "click: submit" />
<input type="button" id="btnReset" value="Reset" data-bind = "click: reset" />
</div>
</div>
</form>
</body>
</html>
==============================================
