HTTP Post 400（Bad Request）DropDownList後

Question

我的程序基本上是讓技術人員在修好電腦後輸入他們的服務報告。

我有一個功能，允許他們創建一個新的報告，報告的一部分是鍵入客戶的名字或換句話說，公司的名稱。

我第一次努力做出下拉列表，以便技術人員可以輕鬆選擇已在服務器中的客戶的名稱。我放棄了一段時間，並決定把正常

<input type="text"/> 

當我做了一個post方法，一切工作正常。

但是，在成功爲客戶的名稱創建下拉列表之後，由於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()); 

Answer 1

您不告訴Knockout哪些屬性保存要存儲在options綁定中的值。我猜測customers數組擁有複雜的對象。所以你需要告訴Knockout這些對象的哪個屬性擁有該值。如果你想存儲的名稱屬性的值，以及：

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

Answer 2

HTTP狀態400表明你的參數是錯誤的。可能參數類型或參數名稱