2017-02-13 23 views
11

Personel verilerini görüntüleyen ve personel bilgilerini güncelleme ve değişiklikleri veritabanıma kaydetme olanağı sunan bir formum var. Ben herhangi bir sorun güncelleme var textboxes bağlanmıştırWeb API ve AngularJS (liste seç) kullanarak Form Verilerini Kaydetme

Figure 1. Personnel Information Form

alanları: form aşağıya bakın. Yine de, HTML seçim listesine gelince (açılan), yeni seçilen değeri kaydedemiyorum.

NOT Ben metin kutularının herhangi sayısında bir değişiklik yapın ve Seçim listesinde seçime değişiklik ve formun geri kalanını yapabilirsiniz Götürmezse düzgün, sadece seçim listesine değişiklik olmadan, böylece tasarruf hiçbir yerde başarısız gibi görünmüyor.

Hata görmüyorum; ancak, emin değilim ki PUT'den önce ek bir OPTIONS talebi görüyorum (bu yüzden neden bununla ilgili ek ipuçları da takdir edilecektir). İşte

benim biçimi şöyledir:

<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

(function() { 
"use strict"; 

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

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

Veritabanı Yapısı:

dbo.People

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

dbo.Paybands

Id : int (PK) 
Name : string 

Muhtemelen onunla ilgisi yok, ama olacak "İnsanlar" için Web API Denetleyicisi kodumu da gönder:

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) 
    { 

    } 
} 
} 
Web API için minimum kodunu aldırma, ben sadece sıfırdan her şeyi yapıyor ve bu arada çalışmasını sağlamak üzere olabildiğince düşük her şeyi yapıyorum.

Seçtiğiniz listeden seçili seçeneği kaydetmeme yardımcı olacak herhangi bir yardım için çok teşekkür ederim. Başka sorularınız varsa veya daha fazla bilgiye ihtiyacınız varsa lütfen bize bildirin. Mümkün olduğunca kapsamlı olmaya çalıştım. Herkesin sağlayabileceği herhangi bir yardım için şimdiden tekrar teşekkürler!

+0

Eğer ng-modeli geçen seçme üzerine ng-değişim denedim ve orada değişti olmadığını görmek? – stackg91

+0

Henüz yapmadım - Hala Angular'ın asılmasını sağlıyorum. Şimdi bu direktifin içine bakacağım. Teşekkürler – Element808

+0

Evet, iş için ng-update aldım (sadece seçilen değeri bir diziye bastı ve görüntüledim). Bu yüzden, neden seçilen listeden yeni seçilen değeri kaydetmek istemediğinden emin değilim, ancak bir metin kutusunda varsa her şeyi kaydeder. – Element808

cevap

5

Sorunum, JSON verilerinin Gezinme Özelliklerini içerdiği ortaya çıktı. Güncelleme bütünlüğü çakışması olduğundan güncelleme başarısız oldu.

Sorunumun çözümü, JSON'un gezinme özelliklerini dışlamak için Entity Framework veri modelimi güncellemekti.Ben [JsonIgnore] ekleyerek bunu böyle bağlıyor:

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

[JsonIgnore] 
public virtual Payband Payband { get; set; } 
İlgili konular