웹 API가있는 AngularJS가 데이터를 데이터베이스로 업데이트하지 않습니다.

Question

저는 AngularJS 기술에 익숙하지 않아 일부 데이터를 데이터베이스로 업데이트하려는 데모 응용 프로그램을 만들었습니다. Web API를 사용하여 MVC AngularJS를 사용했습니다.

레코드를 업데이트하는 데 사용되는 아래의 웹 API 함수가 있습니다. reposotory.Update (제품) 데이터베이스 업데이트 작업으로 처리하는 기능입니다

public IEnumerable PutProduct(int id, TblProductList product) 
     { 
      product.ID = id; 
      if (repository.Update(product)) 
      { 
       return repository.GetAll(); 
      } 
      else 
      { 
       return null; 
      } 
     } 

, 아래의 코드입니다.

public bool Update(TblProductList item) 
     { 
      if(item == null) 
      { 
       throw new ArgumentNullException("item"); 
      } 

      var products = ProductDb.TblProductLists.Single(a => a.ID == item.ID); 
      products.Name = item.Name; 
      products.Category = item.Category; 
      products.Price = item.Price; 
      ProductDb.SaveChanges(); 

      return true; 
     } 

또한 데이터베이스에 모델을 업데이트 AngularJS와 컨트롤러 기능 아래를 찾아주십시오.

var app = angular.module('demoModule', []); 

app.controller('demoCtrl', function ($scope, $http, ProductService) { 
    $scope.ProductData = null; 
$scope.update = function() { 
     if ($scope.Product.Name != "" && 
     $scope.Product.Price != "" && $scope.Product.Category != "") { 
      alert($scope.Product.Id + ' ' + $scope.Product.Name + ' ' + $scope.Product.Category); 
      $http({ 
       method: 'PUT', 
       url: 'api/Product/PutProduct/' + $scope.Product.Id, 
       data: $scope.Product 
      }).then(function successCallback(response) { 
       $scope.productsData = response.data; 
       $scope.clear(); 
       alert("Product Updated Successfully !!!"); 
      }, function errorCallback(response) { 
       alert("Error : " + response.data.ExceptionDetails); 
      }); 
     } 
     else { 
      alert('Please Enter All the Values !!'); 
     } 
    }; 



}); 

그리고 컨트롤러 demoCtrl은 아래의 코드에 따라, Poduct.html 페이지에 바인딩됩니다. 내가 perticular 제품의 세부 사항을 변경하고 내가 업데이트 버튼을 클릭하면

<script src="~/Scripts/angular.min.js"></script> 
<script src="~/Scripts/AngularDemo.js"></script> 

<h2>Product</h2> 

<div ng-app="demoModule" id="body"> 

    <div ng-controller="demoCtrl"> 

<div> 
      <div> 
       <h2>Update Product</h2> 
      </div> 
      <div> 
       <label for="id">Id</label> 
       <input type="text" data-ng-model="Product.Id" /> 
      </div> 
      <div> 
       <label for="name">Name</label> 
       <input type="text" data-ng-model="Product.Name" /> 
      </div> 
      <div> 
       <label for="category">Category</label> 
       <input type="text" data-ng-model="Product.Category" /> 
      </div> 
      <div> 
       <label for="price">Price</label> 
       <input type="text" data-ng-model="Product.Price" /> 
      </div> 
      <br /> 
      <div> 
       <button data-ng-click="update()">Update</button> 
       <button data-ng-click="clear()">Cancel</button> 
      </div> 
     </div> 

    </div> 

</div> 

지금 아래의 문제는, 그것은 나에게 '정의되지 않은'와 같은 오류 메시지를주고 데이터를 업데이트하지 않습니다.

내가 실수를하고있는 곳을 이해하는 데 도움이 될 수 있습니다.

미리 감사드립니다.

Answer 1

먼저 $scope.Product 개체를 초기화해야합니다. demoCtrl 컨트롤러 내부, 다음 코드 삽입 :

$scope.Product = { 
    Id : '', 
    Name : '', 
    Category: '' , 
    Price 
}; 

는 그러나, 나는 백엔드 API에서 $scope.Product을 설정 코드를 볼 수 없습니다.

Answer 2

아래 코드를 참조하십시오.

var app = angular.module('demoModule', []); 

app.controller('demoCtrl', function ($scope, $http, ProductService) { 
    $scope.ProductData = null; 

$scope.Product = { 
     Id: '', 
     Name: '', 
     Price: '', 
     Category:'' 
    }; 

    $scope.clear = function() { 
     $scope.Product.Id = ''; 
     $scope.Product.Name = ''; 
     $scope.Product.Price = ''; 
     $scope.Product.Category = ''; 
    } 


$scope.update = function() { 
     if ($scope.Product.Name != "" && 
     $scope.Product.Price != "" && $scope.Product.Category != "") { 
      alert($scope.Product.Id + ' ' + $scope.Product.Name + ' ' + $scope.Product.Category); 
      $http({ 
       method: 'PUT', 
       url: 'api/Product/PutProduct/' + $scope.Product.Id, 
       data: $scope.Product 
      }).then(function successCallback(response) { 
       $scope.productsData = response.data; 
       $scope.clear(); 
       alert("Product Updated Successfully !!!"); 
      }, function errorCallback(response) { 
       alert("Error : " + response.data.ExceptionDetails); 
      }); 
     } 
     else { 
      alert('Please Enter All the Values !!'); 
     } 
    }; 



});