Question

我想在KnockoutJS的帮助下，从DataTable绑定HTML表中的Employee Details。这是我的模型：

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

这是我使用DataTable的Controller代码。我正在将List<Employee>传递给我的观点：

public JsonResult Get(int customerID)
{
    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.ID = Convert.ToInt32(dataTable.Rows[0]["ID"].ToString());
        objExercise.EmployeeCode = dataTable.Rows[0]["EmpCode"].ToString();
        objExercise.EmployeeName = dataTable.Rows[0]["EmpName"].ToString();
        objExercise.ContactNumber = dataTable.Rows[0]["ContactNumber"].ToString();
        objExercise.MaritalStatus = Convert.ToBoolean(dataTable.Rows[0]["Is_MaritalStatus"].ToString());
        objExercise.EmailID = dataTable.Rows[0]["EmailID"].ToString();

        objExerciseList.Add(objExercise);
    }

    return Json(objExerciseList, JsonRequestBehavior.AllowGet);
}

最后这是我的View和ViewModel页面＆amp;代码：

@model IEnumerable<Acidaes.CRMnext.TrainingExercises.Model.Employee>
@{
  ViewBag.Title = "exercise7";
  Layout = "../Shared/Master.cshtml";
 }
    <script src="../../Scripts/_references.js" type="text/javascript"></script>
    <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/json2.js" type="text/javascript"></script>
<html>
<head>
    <title>KO</title>
</head>
<body>
    <form action="" method="post">
        <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>
                    <th align="left">
                        Contact Number
                    </th>
                    <th align="left">
                        Marital Status
                    </th>
                    <th align="left">
                        Email ID
                    </th>
                    <th align="left">
                    </th>
                </tr>
                <tbody>
                    <tr style="border-bottom: 1px solid #000000;">
                        <td>
                            @Html.LabelFor(model => model.EmployeeCode, new { data_bind = "text: EmpCode" })
                        </td>
                        <td>
                            @Html.LabelFor(model => model.EmployeeName, new { data_bind = "text: EmpName" })
                        </td>
                        <td>
                            @Html.LabelFor(model => model.ContactNumber, new { data_bind = "text: ContactNumber" })
                        </td>
                        <td>
                            @Html.CheckBoxFor(model => model.MaritalStatus, new { data_bind = "checked: MaritalStatus" })
                        </td>
                        <td>
                            @Html.LabelFor(model => model.EmailID, new { data_bind = "text: EmailID" })
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript">
         // Initialized the namespace
            var KnockoutDemoNamespace = {};

            // View model declaration
            KnockoutDemoNamespace.initViewModel = function (objExercise) {
                var customerViewModel = {
                    EmpCode: ko.observable(objExercise.EmployeeCode),
                    EmpName: ko.observable(objExercise.EmployeeName),
                    ContactNumber: ko.observable(objExercise.ContactNumber),
                    MaritalStatus: ko.observable(objExercise.MaritalStatus),
                    EmailID: ko.observable(objExercise.EmailID)
                };
                return customerViewModel;
            }

            // Bind the customer
            KnockoutDemoNamespace.bindData = function (objExercise) {
                // Create the view model
                var viewModel = KnockoutDemoNamespace.initViewModel(objExercise);

                ko.applyBindings(viewModel);
            }

            KnockoutDemoNamespace.getCustomer = function (customerID) {

                $.ajax({
                    url: "/Exercise/Get/",
                    type: 'post',
                    data: "{'customerID':'1' }",
                    contentType: 'application/json',
                    success: function (result) {
                        KnockoutDemoNamespace.bindData(result);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        var errorMessage = '';
                        $('#message').html(jqXHR.responseText);
                    }
                });
            }

            KnockoutDemoNamespace.addCustomer = function () {
                $.ajax({
                    url: "/Exercise/Add/",
                    type: 'post',
                    data: ko.toJSON(this),
                    contentType: 'application/json',
                    success: function (result) {

                        $('#message').html(result);
                    }
                });
            }

            $(document).ready(function () {
                KnockoutDemoNamespace.getCustomer(1);

            });
        </script>
    </form>
</body>
</html>

请帮帮我，我是KnockoutJS的新手。如果我的问题有任何问题，请告诉我。

Answer 1

KnockoutJS旨在与AJAX和JSON一起使用。您的服务应该将数据作为JSON返回。

也许这将是一个好的开始，Making of JSON Webservice using C# .NET

Answer 2

您将表行绑定到员工对象的列表，但是您只绑定了实例。您可以使用knockout的foreach绑定

        <tbody data-bind="foreach: model">
            <tr style="border-bottom: 1px solid #000000;">
                <td>
                    @Html.LabelFor(model => model.EmployeeCode, new { data_bind = "text: EmpCode" })
                </td>
                <td>
                    @Html.LabelFor(model => model.EmployeeName, new { data_bind = "text: EmpName" })
                </td>
                <td>
                    @Html.LabelFor(model => model.ContactNumber, new { data_bind = "text: ContactNumber" })
                </td>
                <td>
                    @Html.CheckBoxFor(model => model.MaritalStatus, new { data_bind = "checked: MaritalStatus" })
                </td>
                <td>
                    @Html.LabelFor(model => model.EmailID, new { data_bind = "text: EmailID" })
                </td>
            </tr>
        </tbody>

你知道淘汰赛的教程吗？他们非常了解这些概念：http://learn.knockoutjs.com/

在MVC视图中显示DataTable

2 个答案: