DropDownList之后的HTTP Post 400(错误请求)

我的程序基本上是让技术人员在修复计算机后输入他们的服务报告。

我有一个功能可以让他们创建一个新的报告，报告的一部分是键入客户的名字，换句话说，就是公司的名字。

我首先很难制作一个下拉列表，这样技术人员就可以很容易地选择已经在服务器中的客户的名字。我放弃了一段时间，决定放一个正常的

<input type="text"/>

当我使用post方法时，一切都很好。

然而，在成功地为客户的名字创建了一个dropdownlist之后，由于POST 400（错误请求），我再也无法执行POST方法了。我查看了开发人员工具，注意到它只是插入了"Object"，而不是客户的名称。

我的问题是，有人能告诉我正确的方向吗？我整个上午都在挠头，不知道为什么。

CreateReport.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts {
    @Scripts.Render("~/bundles/app")
}
<div class="page-header">
    <h1>Add New Report</h1>
</div>
<br>
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">Create New Report</h2>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" data-bind="submit: addReport">
                    <div class="form-group">
                        <label for="inputCustName" class="col-sm-2 control-label">Customer's Name</label>
                        <div class="col-sm-12">
                            <select data-bind="options:customers, optionsText: 'Name', value: newReport.CustomerName"></select>
                            <span data-bind="value"
                        </div>
                    </div>
                    <div class="form-group" data-bind="with: newReport">
                        <label for="inputRepId" class="col-sm-2 control-label">Report Id</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="inputRepId" data-bind="value:Id" />
                        </div>
                        <br>
                        <label for="inputDate" class="col-sm-2 control-label">Date</label>
                        <div class="col-sm-12">
                            <input type="date" class="form-control" id="inputDate" data-bind="value:Date" />
                        </div>
                        <br>
                        <label for="inputWarranty" class="col-sm-2 control-label">Warranty</label>
                        <div class="col-sm-12">
                            <input type="radio" name="Warranty" value="true" data-bind="checked:Warranty">Yes
                            <br>
                            <input type="radio" name="Warranty" value="false" data-bind="checked:   Warranty">No
                        </div>
                        <br>
                        <label for="inputNature" class="col-sm-2 control-label">Nature of Service</label>
                        <div class="col-sm-12">
                            <input type="radio" name="ServiceNature" value="Installation" data-bind="checked:ServiceNature">Installation <input type="radio" name="ServiceNature" value="Repair" data-bind="checked:ServiceNature">Repair
                            <br>
                            <input type="radio" name="ServiceNature" value="Terminate" data-bind="checked:ServiceNature">Terminate <input type="radio" name="ServiceNature" value="Maintenance" data-bind="checked:ServiceNature">Maintenance
                        </div>
                        <br>
                        <label for="inputLabCost" class="col-sm-2 control-label">labour Charge</label>
                        <div class="col-sm-12">
                            <input type="number" class="form-control" id="inputLabCost" data-bind="value:LabourCharge" />
                        </div>
                        <br>
                        <label for="inputMatCost" class="col-sm-2 control-label">Material Cost</label>
                        <div class="col-sm-12">
                            <input type="number" class="form-control" id="inputMatCost" data-bind="value:TotalMaterial" />
                        </div>
                        <br>
                        <label for="inputTransport" class="col-sm-2 control-label">Transport</label>
                        <div class="col-sm-12">
                            <input type="number" class="form-control" id="inputTransport" data-bind="value:Transport" />
                        </div>
                        <br>
                        <label for="inputTotal" class="col-sm-2 control-label">Total</label>
                        <div class="col-sm-12">
                            <input type="number" class="form-control" id="inputTotal" data-bind="value:Total" />
                        </div>
                        <br>
                        <label for="inputComments" class="col-sm-2 control-label">Comments</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="inputComments" data-bind="value:Comments" />
                        </div>
                        <br>
                        <label for="inputCusId" class="col-sm-2 control-label">Customer's ID</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="inputCusId" data-bind="value:CustomerId" />
                        </div>
                        <br>
                        <label for="inputEngId" class="col-sm-2 control-label">Engineer's ID</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="inputEngId" data-bind="value:UserId" />
                        </div>
                        <br>
                        <!--
                        <script>
                            function myFunction() {
                                var y = document.getElementById("inputMatCost").value;
                                var z = document.getElementById("inputTransport").value;
                                var x = +y + +z;
                                document.getElementById("inputTotal").value = x;
                            }
                        </script>
                            -->

                        <!-- <select id="CustomerDropDown"></select> -->

                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- This is using bootstrap modal component. This replace the simple native javascript alert as Selenium (Assignment 2) has problem detecting native javascript alert and therefore unable to do recording correctly
    It is a bit longer but it also looks more presentatble as you can further style it if you like-->
<<div class="modal fade" tabindex="-1" role="dialog" id="reportAlert">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>New Report Has Been Successfully Added!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Back To Reports</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

app.js（视图连接到的脚本）

var ViewModel = function () {
    var self = this;
    self.reports = ko.observableArray();
    self.customers = ko.observableArray();
    self.error = ko.observable();
    self.detail = ko.observable();
    self.newReport = {
        Id: ko.observable(),
        CustomerName: ko.observable(),
        Date: ko.observable(),
        Warranty: ko.observable(),
        ServiceNature: ko.observable(),
        LabourCharge: ko.observable(),
        TotalMaterial: ko.observable(),
        Transport: ko.observable(),
        Total: ko.observable(),
        Comments: ko.observable(),
        CustomerId: ko.observable(),
        UserId: ko.observable()
    }
    var reportsUri = 'http://localhost:64744/api/report/';
    var customersUri = 'http://localhost:64744/api/customer/';
    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }
    function getAllReports() {
        ajaxHelper(reportsUri, 'GET').done(function (data) {
            self.reports(data);
        });
    }
    function getCustomers() {
        ajaxHelper(customersUri, 'GET').done(function (data) {
            self.customers(data);
        });
    }
    self.getReportDetail = function (item) {
        ajaxHelper(reportsUri + item.Id, 'GET').done(function (data) {
            self.detail(data);
        });
    }
    //GET method, addReport
    self.addReport = function (formElement) {
        var report = {
            Id: self.newReport.Id(),
            CustomerName: self.newReport.CustomerName(),
            Date: self.newReport.Date(),
            Warranty: self.newReport.Warranty(),
            ServiceNature: self.newReport.ServiceNature(),
            LabourCharge: self.newReport.LabourCharge(),
            TotalMaterial: self.newReport.TotalMaterial(),
            Transport: self.newReport.Transport(),
            Total: self.newReport.Total(),
            Comments: self.newReport.Comments(),
            CustomerId: self.newReport.CustomerId(),
            UserId: self.newReport.UserId()
        };
        ajaxHelper(reportsUri, 'POST', report).done(function (item) {
            self.reports.push(item);
            $('#reportAlert').modal('show');
        });
    }
    $('#reportAlert').on('hidden.bs.modal', function (e) {
        window.location = "ReportInfo";
    })
    //DELETE METHOD deleteReportMethod
    self.deleteReport = function (item) {
        ajaxHelper(reportsUri + item.Id, 'DELETE').done(function (data) {
            //just to inform the user that delete has been performed
            $('#deleteRepAlert').modal('show');
        });
    }
    // jquery event to detect when the user dismiss the modal.... to redirect back to the home page
    $('#deleteRepAlert').on('hidden.bs.modal', function (e) {
        window.location = "ReportInfo";
    })
    // Fetch the initial data.
    getAllReports();
    getCustomers();
};
ko.applyBindings(new ViewModel());