DropDownList 之后的 HTTP Post 400（错误请求）

Question

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

我有一项功能可以让他们创建新报告，并且报告的一部分是键入客户的姓名或公司名称。

我首先努力制作一个下拉列表，以便技术人员轻松选择服务器中已经存在的客户的名称。我放弃了一段时间，决定放一个正常的

<input type="text"/>

当我使用 post 方法时，一切正常。

但是，在成功为客户姓名创建下拉列表后，由于 POST 400（错误请求），我无法再执行 POST 方法。我检查了开发人员工具，发现它只是插入了“对象”而不是客户的姓名。

我的问题是，有人能指出我正确的方向吗？我整个早上都在摸不着头脑，我就是不知道为什么。

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());

Answer 1

您没有告诉 Knockout 哪个属性包含要存储在 options 绑定中的值。我猜customers 数组包含复杂的对象。因此，您需要告诉 Knockout 这些对象上的哪个属性持有该值。如果您还想将 Name 属性存储为值：

<select data-bind="options:customers, optionsText: 'Name', optionsValue: 'Name', value: newReport.CustomerName"></select>

Answer 2

HTTP 状态 400 表示您的参数错误。可能是参数类型或参数名称