0

顧客アクション情報をグリッドで表示する ASP.NET ページを表示しようとしています。グリッドには、Action ID、Customer ID、Case ID、Action Date/Time、Action Type、Action By、および Serial No. タブが含まれます。

開発作業は、knockout.js と Bootstrap を使用して ASP.NET 4.5 で行われており、7 層アーキテクチャを使用して開発されています。レイヤーは、Common、Core、DAL(Data Access Layer)、DTO (Data Transfer Object)、Manager、Repository、および Web です。

ここまでで、コア クラス、ファクトリ クラス、リポジトリ インターフェイス、DTO クラス、フォーム クラス、マネージャ クラスとインターフェイス、リポジトリ クラス、およびビュー ファイルを作成しました。

ビュー ファイルのコードは次のとおりです。

<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0 /jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Wijmo CSS and script -->
<link type="text/css" href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" />
<link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.2.0.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.2.0.min.js"></script>
<script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.2.0.min.js"></script>
<!-- KnockoutJS for MVVM-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.3.0.js"></script>

<script>
//Create ViewModel
var CustomerActionsviewModel = {
pageSize: ko.observable(10),
pageIndex: ko.observable(0),
sortCommand: ko.observable("ActionID asc"),
dataRows: ko.observableArray([]),
totalRows: ko.observable(0),
sorted: function (e, data) {
    CustomerActionsviewModel.sortCommand(data.sortCommand);
},
paged: function (e, data) {
    CustomerActionsviewModel.pageIndex(data.newPageIndex);
},
load: function () {
    $.ajax({
        url: '/CustomerAction/',
        dataType: "jsonp",
        jsonp: "$callback",
        data: {
            $format: "json",
            $inlinecount: "allpages",
            $select: "ActionID,CustomerID,CaseID,ActionDateTime,ActionType,ActionBy,SlNo",
            $orderby: CustomerActionsviewModel.sortCommand(),
            $top: CustomerActionsviewModel.pageSize(),
            $skip: CustomerActionsviewModel.pageIndex() * CustomerActionsviewModel.pageSize(),
            "paging[pageIndex]": CustomerActionsviewModel.pageIndex(),
            "paging[pageSize]": CustomerActionsviewModel.pageSize()
        },
        success: function (result) {
            var data = result.d.results;
            var arr = [];

            $.each(data, function (i) {
                arr.push(new customerAction(data[i]));
            });
            CustomerActionsviewModel.totalRows(result.d.__count);
            CustomerActionsviewModel.dataRows(arr);
        }
      });
   }

};

 //Class constructor for grid row. Returns observable properties.
 var customerAction = function (data) {
 return {
    ActionID: ko.observable(data.ActionID),
    CustomerID: ko.observable(data.CustomerID),
    CaseID: ko.observable(data.CaseID),
    ActionDateTime: ko.observable(data.ActionDateTime),
    ActionType: ko.observable(data.ActionType),
    ActionBy: ko.observable(data.ActionBy),
    SlNo: ko.observable(data.SlNo)
    };
};
</script>

<div class="toolbar">
<label>Display: </label>
<select data-bind="value: pageSize, wijdropdown: {}">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</div>
<table id="dataGrid" data-bind="
wijgrid: {
data: dataRows,
pageSize: pageSize,
pageIndex: pageIndex,
totalRows: totalRows,
allowPaging: true,
allowSorting: true,
sorted: sorted,
pageIndexChanged: paged,
columns: [
{ sortDirection: 'ascending', dataType: 'number', dataFormatString: 'n0', headerText: 'Action ID', width: 60 },
{ dataType: 'number', dataFormatString: 'n0', headerText: 'Customer ID', width: 60},
{ dataType: 'number', dataFormatString: 'n0', headerText: 'Case ID', width: 60},
{ headerText: 'Action Date/Time', width: 100},
{ headerText: 'Action Type', width: 100 },
{ headerText: 'Action By', width: 100 },
{ dataType: 'number', dataFormatString: 'n0', headerText: 'Serial No', width: 60}]
}">
</table>

<script>
//Bind ViewModel and Event Handlers
$(document).ready(function () {
ko.applyBindings(CustomerActionsviewModel);
CustomerActionsviewModel.load();
CustomerActionsviewModel.sortCommand.subscribe(function (newValue) {
    CustomerActionsviewModel.load();
});
CustomerActionsviewModel.pageIndex.subscribe(function (newValue) {
    CustomerActionsviewModel.load();
});
CustomerActionsviewModel.pageSize.subscribe(function (newValue) {
    CustomerActionsviewModel.load();
$(":wijmo-wijdropdown").wijdropdown("refresh");
});
});
</script>

問題は、データがデータベースからロードされますが、ロードされたデータが表示されないことです。誰が問題がどこにあるのか教えてもらえますか????

4

0 に答える 0