Lưu dữ liệu biểu mẫu bằng API Web và AngularJS (danh sách lựa chọn)

Question

Tôi có biểu mẫu hiển thị dữ liệu nhân sự và cung cấp khả năng cập nhật thông tin nhân sự và lưu các thay đổi vào cơ sở dữ liệu của tôi. Xem mẫu dưới đây:

Các lĩnh vực được ràng buộc với textbox Tôi không có vấn đề cập nhật. Mặc dù, khi nói đến danh sách chọn HTML (danh sách thả xuống), tôi không thể lưu giá trị mới được chọn.

LƯU Ý Tôi có thể thay đổi bất kỳ số hộp văn bản nào và thay đổi lựa chọn trong danh sách lựa chọn và phần còn lại của biểu mẫu lưu đúng cách, không cần thay đổi danh sách lựa chọn không xuất hiện ở bất cứ đâu.

Tôi không nhận được bất kỳ lỗi nào; tuy nhiên, tôi thấy một yêu cầu OPTIONS bổ sung trước PUT, điều mà tôi không chắc chắn (vì vậy, bất kỳ lời khuyên bổ sung nào về lý do tại sao điều đó cũng sẽ được đánh giá cao).

Dưới đây là hình thức của tôi:

<form name="personForm" novalidate ng-controller="PersonnelEditCtrl as vm"> 
<fieldset class="col-md-4"> 
    <legend>Basic Personnel Information</legend> 
    <div class="form-group row" ng-class="{'has-error':personForm.inputLastName.$invalid && personForm.inputLastName.$dirty}"> 
     <label class="col-md-3 control-label" for="inputLastName">Last Name</label> 
     <div class="col-md-4"> 
      <input class="form-control" id="inputLastName" name="inputLastName" 
        type="text" placeholder="Last Name (required)" 
        ng-model="vm.person.lastName" required ng-minlength="1" ng-maxlength="30" /> 
     </div> 
     <span class="help-block" has-error"> 
      <span ng-show="personForm.inputLastName.$error.required"> 
       Last name is required. 
      </span> 
      <span ng-show="person.form.inputLastName.$error.minlength"> 
       Last name must be at least 1 character in length. 
      </span> 
      <span ng-show="person.form.inputLastName.$error.maxlength"> 
       Last name cannot exceed 30 characters in length. 
      </span> 
     </span> 
    </div> 
    <div class="form-group row" ng-class="{'has-error':personForm.inputFirstName.$invalid && personForm.inputFirstName.$dirty}"> 
     <label class="col-md-3 control-label" for="inputFirstName">First Name</label> 
     <div class="col-md-4"> 
      <input class="form-control" id="inputFirstName" name="inputFirstName" 
        type="text" placeholder="First Name (required)" 
        ng-model="vm.person.firstName" required ng-minlength="1" ng-maxlength="30" /> 
     </div> 
     <span class="help-block" has-error"> 
      <span ng-show="personForm.inputFirstName.$error.required"> 
       First name is required. 
      </span> 
      <span ng-show="person.form.inputFirstName.$error.minlength"> 
       First name must be at least 1 character in length. 
      </span> 
      <span ng-show="person.form.inputFirstName.$error.maxlength"> 
       First name cannot exceed 30 characters in length. 
      </span> 
     </span> 
    </div> 
    <div class="form-group row" ng-class="{'has-error':personForm.inputMiddleInitial.$invalid && personForm.inputMiddleInitial.$dirty}"> 
     <label class="col-md-3 control-label" for="inputMiddleInitial">Middle Initial</label> 
     <div class="col-md-4"> 
      <input class="form-control" id="inputMiddleInitial" name="inputMiddleInitial" 
        type="text" placeholder="Middle Initial (required)" 
        ng-model="vm.person.middleInitial" required ng-minlength="1" ng-maxlength="1" /> 
     </div> 
     <span class="help-block" has-error"> 
      <span ng-show="personForm.inputMiddleInitial.$error.required"> 
       Middle initial is required. 
      </span> 
      <span ng-show="person.form.inputMiddleInitial.$error.minlength"> 
       Middle initial must be at least 1 character in length. 
      </span> 
      <span ng-show="person.form.inputMiddleInitial.$error.maxlength"> 
       Middle initial cannot exceed 1 characters in length. 
      </span> 
     </span> 
    </div> 
    <div class="form-group row"> 
     <label class="col-md-3 control-label" for="inputDateOfBirth">Date of Birth</label> 
     <div class="col-md-4"> 
      <input class="form-control" ng-model="vm.person.dob" type="date" /> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <label class="col-md-3 control-label" for="selectPayband">Payband</label> 
     <div class="col-md-4"> 

      <select id="selectPayband" name="selectPayband" 
        ng-model="vm.person.payband" ng-options="payband.name for payband in vm.paybands track by payband.id"> 
      </select> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <div class="col-md-4"> 
      <span> 
       <button class="btn btn-primary" style="width:80px; margin-right:10px" 
         ng-click="vm.submit()" ng-disabled="personForm.$invalid">Save</button> 
      </span> 
      <span> 
       <button class="btn btn-default" style="width:70px" 
         ng-click="vm.cancel(personForm)">Cancel</button> 
      </span> 
     </div> 
    </div> 
    <div class="form-group row" ng-show="vm.message"> 
     <div class="col-md-6"> 
      <pre style="font: inherit">{{ vm.message }}</pre> 
     </div> 
    </div> 
</fieldset> 

personnelEditCtrl.js

angular 
.module("personnelService") 
.controller("PersonnelEditCtrl", 
      PersonnelEditCtrl); 

function PersonnelEditCtrl(personnelResource, paybandResource, $filter) { 
var vm = this; 
vm.person = {}; 
vm.message = ''; 
vm.paybands = []; 

paybandResource.query(function (data) { 
    vm.paybands = $filter('orderBy')(data, 'Name'); 
}); 

personnelResource.get({ id: 2 }, 
    function (data) { 
     vm.person = data; 
     vm.person.dob = new Date(vm.person.dob); 
     vm.originalPerson = angular.copy(data); 
    }); 

if (vm.person && vm.person.personId) { 
    vm.title = "Edit: " + vm.person.firstName + " " + vm.person.lastName; 
} 
else { 
    vm.title = "New Person"; 
} 

vm.submit = function() { 
    vm.message = ''; 
    if (vm.person.personId) { 
     vm.person.$update({ id: vm.person.personId }, 
      function (data) { 
       vm.message = '... Save Complete'; 
      }) 
    } 
    else { 
     vm.person.$save(
      function (data) { 
       vm.originalPerson = angular.copy(data); 
       vm.message = '... Save Complete'; 
      }) 
    } 
}; 

vm.cancel = function (editForm) { 
    editForm.$setPristine(); 
    vm.person = angular.copy(vm.originalPerson); 
    vm.message = ""; 
}; 
} 

personnelResource.js

(function() { 
"use strict"; 

angular 
    .module("common.services") 
    .factory("personnelResource", 
      ["$resource", 
      "appSettings", 
       personnelResource]) 

function personnelResource($resource, appSettings) { 
    return $resource(appSettings.serverPath + "/api/people/:id", null, 
     { 
      'update':{method:'PUT'} 
     }); 
} 
}()); 

paybandResource.js

01.235.

(function() { 
"use strict"; 

angular 
    .module("common.services") 
    .factory("paybandResource", 
      ["$resource", 
      "appSettings", 
       paybandResource]) 

function paybandResource($resource, appSettings) { 
    return $resource(appSettings.serverPath + "/api/paybands/:id"); 
} 
}()); 

Cơ sở dữ liệu Cấu trúc:

dbo.People

PersonId : int (PK) 
FirstName : string 
MiddleInitial: string 
LastName : string 
DateOfBirth: datetime 
PaybandId : int (FK) 

dbo.Paybands

Id : int (PK) 
Name : string 

Nó có lẽ không có gì để làm với nó, nhưng tôi sẽ đăng mã Bộ điều khiển API Web của tôi cho "Mọi người":

using System.Linq; 
using System.Web.Http; 
using CPS.WebAPI.Models; 
using System.Web.Http.Cors; 
using System.Data.Entity; 

namespace CPS.WebAPI.Controllers 
{ 
[EnableCorsAttribute("http://localhost:53265", "*", "*")] 
public class PeopleController : ApiController 
{ 
    private CPS_Context db = new CPS_Context(); 

    public IQueryable<Person> GetPeople() 
    { 
     return db.Person; 
    } 

    public Person Get(int id) 
    { 
     Person person; 

     if (id > 0) 
     { 
      var people = db.Person; 
      person = people.FirstOrDefault(p => p.PersonId == id); 
     } 
     else 
     { 
      person = db.Person.Create(); 
     } 

     return person; 
    } 

    public void Post([FromBody]Person person) 
    { 
     CPS_Context db = new CPS_Context(); 
     var newPerson = db.Person.Add(person); 
     db.SaveChanges(); 
    } 

    public void Put(int id, [FromBody]Person person) 
    { 
     CPS_Context db = new CPS_Context(); 
     db.Entry(person).State = EntityState.Modified; 
     var updatedPerson = db.SaveChanges(); 
    } 

    public void Delete(int id) 
    { 

    } 
} 
} 

Đừng để ý đến mã tối thiểu cho API Web, tôi chỉ làm mọi thứ từ đầu và làm mọi thứ càng ít càng tốt để làm cho nó hoạt động trong thời gian trung bình.

Cảm ơn bạn rất nhiều vì bất kỳ trợ giúp nào bạn có thể cung cấp trong việc giúp tôi lưu tùy chọn đã chọn trong danh sách lựa chọn của mình. Vui lòng cho tôi biết nếu bạn có bất kỳ câu hỏi nào khác hoặc cần thêm bất kỳ thông tin nào - Tôi đã cố gắng hết sức nhất có thể. Cảm ơn bạn trước vì bất kỳ trợ giúp nào có thể cung cấp!

Answer 1

Vấn đề của tôi hóa ra là dữ liệu JSON bao gồm Thuộc tính điều hướng. Bản cập nhật không thành công vì có xung đột toàn vẹn tham chiếu.

Giải pháp cho vấn đề của tôi là cập nhật mô hình dữ liệu Khung thực thể của tôi để loại trừ các thuộc tính điều hướng khỏi JSON.Tôi đã làm điều này bằng cách thêm thuộc tính [JsonIgnore] như sau:

[ForeignKey("Payband")] 
public virtual int PaybandId { get; set; } 

[JsonIgnore] 
public virtual Payband Payband { get; set; }