MVC 4（剃刀）KnockoutJS＆安培;数据表

本文介绍了MVC 4（剃刀）KnockoutJS＆安培;数据表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

     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);
    }

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;
    }
  }
}

@{
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>

解决方案

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);
                    }
               });

这篇关于MVC 4（剃刀）KnockoutJS＆安培;数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！