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

【问题标题】：Display HTML Table from JSON view using Knockout MVC 4 and C#使用 Knockout MVC 4 和 C# 从 JSON 视图显示 HTML 表
【发布时间】：2014-03-05 05:51:56
【问题描述】：

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

我有一个看起来像这样的模型：

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

这里是 Rep 类：

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":"测试报告","NumberOfRows":50,"HasData":"Yes","checkBox":false,"ResultMessage ":"消息"}]}

如何将 JSON 放入表中并链接 Observable 字段？

非常感谢！

【问题讨论】：

我对 KOViewModel 不熟悉，因此无法对此发表评论。看起来很奇怪的是，您有一个返回 JSON 的操作，但您没有从脚本中调用它。您是否可能直接在浏览器中导航到该操作？如果是这样，那当然会向您显示 JSON。相反，将 Index 操作更改为返回 ActionResult 并确保 HTML 和脚本包含在视图中。

标签： c# asp.net asp.net-mvc asp.net-mvc-4 knockout.js

【解决方案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。

【讨论】：