MVC中的绑定问题

Question

我在MVC中遇到了绑定问题。这是我的代码。

Javascript文件

function GetReport() {
    $(window).resize();


    $.ajax({
        type: 'Post',
        url: '/Floor/Report',
        data: ko.mapping.toJSON({
            reportId: $("#reportlist option:selected").val()
        }),
        cache: false,
        contentType: "application/json; charset=utf-8",
        error: function (error) {
            alert(error.responseText);
        },
        success: function (data) {
            ReportViewModel.ReportDetails(data.ReportDetails);
        }
    });
}

var ReportViewModel = {
    ReportDetails: ko.observableArray()
};

cshtml文件

@model FloorPlanner.Models.DataModel

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group btn-group-sm fp-btn-group-float-right">
                    <button class="btn btn-default" type="button" id="showTree">
                        <span class="glyphicon glyphicon-sort-by-attributes"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-heading">
        <div class="row">
            <div class="col-xs-5">
                <div class="input-group" style="padding-left: 5px;">
                    <span class="input-group-addon">Select Report</span>
                    <select class="form-control input-sm" id="reportlist" style="min-width: 140px;">
                        <optgroup label="reportListing">
                            <option>All</option>
                            <option>Floor Allocation</option>
                        </optgroup>
                    </select>
                    <span class="input-group-addon ">Filter by</span>
                    <select class="form-control input-sm" id="filterList" style="min-width: 140px;">
                        <optgroup label="filterListing">
                            <option>All</option>
                            <option>Project</option>
                            <option>Location</option>
                        </optgroup>
                    </select>
                    <button class="btn btn-default" type="button" id="generateReport">
                        Generate Report
                    </button>
                </div>
            </div>
        </div>
        <div class="panel-body fp-container-panel-body"  id="reportbody">

            <table class="table table-bordered">
                <thead>
                    <tr style="font-weight: bold">
                        <td>EmployeeId</td>
                        <td>EmployeeName</td>
                        <td>Location</td>
                        <td>Project</td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: ReportViewModel.ReportDetails">
                    <tr>
                        <td>
                            <input data-bind="value: Id" /></td>
                        <td>
                            <input data-bind="value: EmployeeName" /></td>
                        <td>
                            <input data-bind="value: Location" /></td>
                        <td>
                            <input data-bind="value: Project" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

模型类

public class ReportViewModel
    {
        public ReportViewModel()
        {
            ReportDetails = new List<ReportModel>();
        }

        public List<ReportModel> ReportDetails { get; set; }
    }

    public class ReportModel
    {
        public int Id { get; set; }
        public string EmployeeName { get; set; }
        public string Location { get; set; }
        public string Project { get; set; }
    }

控制器类

public JsonResult Report(string reportId = null)
        {
            ReportViewModel model = new ReportViewModel();
            using (var context = new CGIFloorContext())
            {
                var details = from emp in context.Employees select emp;
                foreach (var detail in details)
                {
                    model.ReportDetails.Add(
                        new ReportModel
                        {
                            Id = detail.EmployeeId,
                            EmployeeName = detail.FirstName + " " + detail.LastName,
                            Location = detail.Location,
                            Project = detail.Project,
                        });
                }
            }
            return Json(model);
        }

我没有得到数据，它在某个地方抛出异常。我没有任何线索，我是MVC和淘汰赛的新手。

任何人都可以帮助我吗？

Answer 1

我认为你的问题是在javascript文件中试试这个

var ReportViewModel = {
     ReportDetails: ko.observableArray()
};
//init knockout
ko.applyBindings(ReportViewModel) 


function GetReport() {
$(window).resize();


$.ajax({
    type: 'Post',
    url: '/Floor/Report',
    data: ko.mapping.toJSON({
        reportId: $("#reportlist option:selected").val()
    }),
    cache: false,
    contentType: "application/json; charset=utf-8",
    error: function (error) {
        alert(error.responseText);
    },
    success: function (data) {
        ReportViewModel.ReportDetails(data.ReportDetails);
    }
  });
}

//I don't know when you call GetReport so i call it here
GetReport();