使用 Knockout MVC 4 和 C# 从 JSON 视图显示 HTML 表

Question

我只想在我的网页上显示数据，并允许用户单击按钮并返回一些更新的数据。

我有一个模型，如下所示：

public class ReportModel
{
    public string ReportDate { get; set; }
    public List<Common.Rep> ReportList { get; set; }
}

这是代表类：

public class Rep
{
    public string ReportName { get; set; }
    public int NumberOfRows { get; set; }
    public string HasData { get; set; }
    public bool checkBox { get; set; }
    public string ResultMessage { get; set; }
}

现在我有一个控制器可以做到这一点：

此方法在页面

加载时将数据返回到页面：

public JsonResult Index()
{
    var model = new ReportModel();
    model.ReportDate = "1/31/2014";
    model.ReportList = new List<Models.Common.Rep>();
    model.ReportList.Add(
          new Models.Common.Rep()
          {
              ReportName ="test report",
              NumberOfRows = 50, 
              HasData = "Yes",
              checkBox = false,
              ResultMessage = "Message"
          });
    return Json(model, JsonRequestBehavior.AllowGet);
}

现在我有我的观点：

<table>
    <tr style="font-weight:bold">
        <td>
            Report Name
        </td>
        <td>
            Number Of Rows
        </td>
        <td>
            Has Data
        </td>
        <td>
            Result Message
        </td>
        <td>
            Check
        </td>
    </tr>
    <tbody data-bind="foreach: Report">
        <tr>
            <td> <span data-bind="text: ReportName"></span></td>
            <td><span data-bind="text: NumberOfRows"></span></td>
            <td><span data-bind="text: HasData"></span></td>
            <td><span data-bind="text: ResultMessage"></span></td>
            <td><input type="checkbox" data-bind="checked: checkBox"></td>
        </tr>
    </tbody>
</table>

在同一页面上，我有我的脚本：

<script type="text/javascript" src="~/Scripts/knockout-2.2.0.js"></script>
<script type="text/javascript" language="javascript">
    //SET INITIAL VALUES ON PAGE WITH KNOCKOUT
    var initialModel = new KOViewModel(@Html.Raw(Json.Encode(Model)));
    model.Date(initialModel.Date);
    model.Report(initialModel.Report);
//SET THE KNOCKOUT OBSERVABLES
var viewmodel =
   {
      Date: ko.observable(initialModel.Date)
      Report: ko.observableArray(initialModel.Report)
  };
//APPLY KNOCKOUT BINDINGS
$(document).ready(function() { 
    ko.applyBindings(viewmodel);
});

当我运行页面时，我没有看到表，而只是页面顶部的 JSON 本身。这是 T 在页面上看到的内容： {"ReportDate"："1/31/2014"，"ReportList"：[{"ReportName"："test report"，"NumberOfRows"：50，"HasData"："Yes"，"checkBox"：false，"ResultMessage"："Message"}]}

如何将 JSON 放入表中并链接可观察字段？

谢谢！

Answer 1

这是你需要开始让你的例子工作，所有这些都是用模仿的 json：

var json = {"ReportDate":"1/31/2014","ReportList":[{"ReportName":"test report","NumberOfRows":50,"HasData":"Yes","checkBox":false,"ResultMessage":"Message"}]};

// create a javascript representation of the c# object, with observables
var ViewModel = function(reportDate, reportList) {
    self = this;
    self.ReportDate = ko.observable(reportDate);
    self.Report = ko.observable(reportList);
}

// Apply the bindings to your new object
ko.applyBindings(new ViewModel(json.ReportDate, json.ReportList));

有关工作示例，请参见此处：

http://jsfiddle.net/Tzce4/2/

其他一切都是正确的，因为我创建它所需要的只是直接复制和粘贴您的 json。