Home/ Questions/Q 9200607
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:48:20+00:00

I am trying to show a DataTable in HTML table through knockout binding…I dont

  • 0

I am trying to show a DataTable in HTML table through knockout binding…I dont know where i am missing or wrong:

My Controller:

     public JsonResult GetEmployees()
     {
        BAL.Employee dbProvider = new BAL.Employee();

        DataTable dataTable = dbProvider.ShowEmployeeDetails();

        List<Model.Employee> objExerciseList = new List<Model.Employee>();

        foreach (DataRow dataRow in dataTable.Rows)
        {
            Model.Employee objExercise = new Model.Employee();

            objExercise.EmployeeCode = dataRow["EmpCode"].ToString();
            objExercise.EmployeeName = dataRow["EmpName"].ToString();

            objExerciseList.Add(objExercise);
        }

        return Json(objExerciseList, JsonRequestBehavior.AllowGet);
    }

My Model:

public class Employee
{
  private string employeeCode;
  private string employeeName;

  public int ID { get; set; }

  [Required(ErrorMessage="Employee Code is Required")]
  public string EmployeeCode
  {
    get
    {
        return employeeCode;
    }
    set
    {
        employeeCode = value;
    }
  }

  [Required(ErrorMessage = "Employee Name is Required")]
  public string EmployeeName
  {
    get
    {
        return employeeName;
    }
    set
    {
        employeeName = value;
    }
  }
}

This is my ViewModel Code:

@{
ViewBag.Title = "Exercise9";
Layout = "../Shared/Master.cshtml";
}

<html>
<head>
<title>KO</title>
<script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.2.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script src="../../Scripts/json2.js" type="text/javascript"></script>
</head>
<body>
<form action="" method="get">
<div style="width: 990px; background-color: White; height: 710px;">
    <table id="tbllist" align="center" style="border:5px #fff solid;">
        <tr>
            <td colspan="6">
                <h2>
                    Employee List</h2>
            </td>
        </tr>
        <tr>
            <td colspan="6" style="padding: 0px;">
                <div id="title_p">
                    Listing</div>
            </td>
        </tr>
        <tr>
            <th align="left">
                Employee Code
            </th>
            <th align="left">
                Employee Name
            </th>
        </tr>
        <tbody data-bind="foreach: Employees">
            <tr style="border-bottom: 1px solid #000000;">
                <td>
                    <span data-bind="text: EmployeeCode"></span>
                </td>
                <td>
                    <span data-bind="text: EmployeeName"></span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</form>
<script type="text/javascript">
    var EmpViewModel = function () {
    //Make the self as 'this' reference
    var self = this;
        //Declare observable which will be bind with UI 
        self.EmployeeCode= ko.observable("0");
        self.EmployeeName= ko.observable("");

    //The Object which stored data entered in the observables
    var EmpData = {
        EmpCode:self.EmployeeCode,
        EmpName: self.EmployeeName
        };

    //Declare an ObservableArray for Storing the JSON Response
    self.Employees = ko.observableArray([]);

    GetEmployees(); //Call the Function which gets all records using ajax call

    //Function to Read All Employees
    function GetEmployees() {
        //Ajax Call Get All Employee Records
        $.ajax({
                    type: "GET",
                    url: "/Exercise/GetEmployees/",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                    self.Employees(data); //Put the response in ObservableArray
                    },
                    error: function (error) {
                    alert(error.status + "<--and--> " + error.statusText);
                    }
               });
        //Ends Here
    }
};

ko.applyBindings(new EmpViewModel());
</script>

Please help me…THANKS IN ADVANCE….!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give it a try to convert from Json to observable JavaScript model as follow :

    $.ajax({
                    type: "GET",
                    url: "/Exercise/GetEmployees/",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                         ko.mapping.fromJS(data, {}, self.Employees);
                    },
                    error: function (error) {
                    alert(error.status + "<--and--> " + error.statusText);
                    }
               });
    • 0