Question

我有一个ASP.Net MVC5应用程序，我添加了几个使用优秀的KnockoutJs KoGrid（http://knockout-contrib.github.io/KoGrid/#/examples）的视图。我的问题是我创建了第三个使用KoGrid的视图，尽管遵循其他视图中使用的模式，我无法说服KoGrid显示数据。我在这里为问题创建了一个plnkr：http://plnkr.co/edit/0OaqD2?p=preview。

“真实”视图有几个选项卡，第一个显示数据库详细信息，第二个应显示ko网格中的工作流规则。这是我从控制器返回的视图模型：

public class AdminViewModel
{
    public DatabaseDetails DatabaseDetails { get; set; }
    public List<WorkflowRule> WorkflowRules { get; set; }
}

public class WorkflowRule 
{
    public int WorkflowRuleId { get; set; }
    public string ReceivePortName { get; set; }
    public string MessageType { get; set; }
    public string TriggerSource { get; set; }
    public string TargetEmailAddress { get; set; }
    public int AssignedToId { get; set; }
    public string AssignedToName { get; set; }
}

public class DatabaseDetails
{...

我的淘汰赛vm如下（我已经删除了样板分页代码以保持更简洁）：

function ViewModel(vm) {
var self = this;
this.workflowRules = ko.observableArray(vm.WorkflowRules);


this.getPagedDataAsync = function (pageSize, page, searchText) {
    setTimeout(function () {
        var data;
        if (searchText) {
            var ft = searchText.toLowerCase();
            $.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) {
                data = returnedPayload.filter(function (item) {
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                });
                self.setPagingData(data,page,pageSize);
            });          
        } else {
            $.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) {
                self.setPagingData(returnedPayload, page, pageSize);
            });
        }
    }, 100);
};


this.gridOptions = {
    afterSelectionChange: function () { return true; },
    data: self.workflowRules,
    enablePaging: true,
    pagingOptions: self.pagingOptions,
    filterOptions: self.filterOptions,
    selectWithCheckboxOnly: true,
    selectedItems: self.selected,
    canSelectRows: true,
    displaySelectionCheckbox: true,
    columnDefs: [{ field: 'ReceivePortName', displayName: 'Receive Port', width: 130 },
                { field: 'MessageType', displayName: 'Message Type', width: 200 },
                { field: 'TriggerSource', displayName: 'Source', width: 60 },
                { field: 'TargetEmailAddress', displayName: 'Email', width: 130 },
                { field: 'AssignedToName', displayName: 'Assigned To', width: 140 },
    ]
};

};

我的观点的关键部分如下：

    @model TVS.ESB.BamPortal.Website.Models.AdminViewModel
@using System.Web.Script.Serialization
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{  string data = new JavaScriptSerializer().Serialize(Model); }

<div class="tab-pane" id="WorkflowRules">
                <h4>Workflow Rules</h4>
                <div id="KoGrid" data-bind="koGrid: gridOptions"></div>
            </div>

@section Scripts {
    <script src="~/KnockoutVM/WorkflowRules.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
    <script type="text/javascript">
        var vm = new ViewModel(@Html.Raw(data));
        ko.applyBindings(vm, document.getElementById("KoGrid"));
    </script>
}

以下是Chrome浏览器显示视图的屏幕截图：

有人可以告诉我哪里出错 - 为什么网格中没有数据显示？

我刚刚意识到如果我减少显示kogrid的浏览器的大小，那么数据会出现。我在这里制作了一段简短的视频：http://biztalkers.com/video/kogridproblem.mp4

Answer 1

我可以通过将“工作流规则”标签设置为默认值来解决此问题。

后来，在另一个网站上 - 如果控制器只返回了一行数据，我发现了相同的行为。如果返回两行或更多行，则表示正确显示。

Knockout KoGrid - 没有显示数据

1 个答案: