Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Here is my code:

employeedata.ts

XML
module EmployeeModule {
    export class employeedata {
        public Emp_Id: KnockoutObservable<string> = ko.observable<string>();
        public Emp_Name: KnockoutObservable<string> = ko.observable<string>();
        public Phone: KnockoutObservable<string> = ko.observable<string>();
        public Address: KnockoutObservable<string> = ko.observable<string>();
        public constructor(Emp_Id: string, Emp_Name: string, phone: string, address: string) {
            this.Emp_Id(Emp_Id);
            this.Emp_Name(Emp_Name);
            this.Phone(phone);
            this.Address(address);
        }
    }
}
export = EmployeeModule;


employee.ts

C#
/// <reference path="../../Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../../Scripts/typings/knockout/knockout.d.ts" />
import employee = require("modules/employeedata")
class employees {
    public Emp_Id: KnockoutObservable<string> = ko.observable<string>();
    public Emp_Name: KnockoutObservable<string> = ko.observable<string>();
    public Phone: KnockoutObservable<string> = ko.observable<string>();
    public Address: KnockoutObservable<string> = ko.observable<string>();
    public userArray: KnockoutObservableArray<employee.employeedata> = ko.observableArray<employee.employeedata>([
        new employee.employeedata("1", "Peter", "9090504010", "BANGALORE"),
        new employee.employeedata("2", "John", "9090504010", "BANGALORE")
    ]);

    public EmpList = () => {
        $.ajax({
            type: 'GET',
            url: 'http://localhost:81/Service1.svc/Employee',
            contentType: "application/javascript",
            dataType: "json",
            success: function (response) {
                var data = response.GetEmployeeDetailsResult;
                if (data.length > 0) {
                    debugger;
                    var emp = new employees();
                    for (var i = 0; i < data.length; i++) {
                        emp.userArray.push(new employee.employeedata(data[i].Emp_Id, data[i].Emp_Name, data[i].Phone, data[i].Address));
                    }
                    emp.userArray.valueHasMutated();
                    debugger;
                }
            },
            error: function (data) {
                alert(data);
            }
        });
    }
}
export =employees;


In debug mode i can see all the data are available in userArray, But its not updating in the UI.

Employee.html

HTML
<table>
    <thead>
        <th>
            <table><tbody><tr><td>Employee Id</td></tr></tbody></table>
            <table><tbody><tr><td>Employee Name</td></tr></tbody></table>
            <table><tbody><tr><td>Phone</td></tr></tbody></table>
            <table><tbody><tr><td>Address</td></tr></tbody></table>
        </th>
    </thead>
    <tbody data-bind="foreach : userArray">
        <tr>
            <td data-bind="text : Emp_Id"></td>
            <td data-bind="text : Emp_Name"></td>
            <td data-bind="text : Phone"></td>
            <td data-bind="text : Address"></td>
        </tr>
    </tbody>
</table>

<b>New Record</b>
<br />
Name: &lt;input type="text"  data-bind="value: Emp_Id"/&gt;
Surname: &lt;input type="text" data-bind="value: Emp_Name" /&gt;
Phone: &lt;input type="text" data-bind="value: Phone" /&gt;
Address: &lt;input type="text" data-bind="value: Address" /&gt;
&lt;input type="button" value="Save" data-bind="click: EmpList" /&gt;
Posted
Updated 16-Sep-15 11:37am
v3

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900