AngularJS с Web API не обновляет данные в базе данных

Question

Я новичок в технологии AngularJS, и я создал демонстрационное приложение, в котором я хочу обновить некоторые данные в базе данных. Я использовал MVC AngularJS с помощью Web API.

У меня есть функция веб-API, которая используется для обновления записи.

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

Где reposotory.Update (продукт) является функцией, которая имеет дело с операцией обновления базы данных, ниже код.

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; 
     } 

Также, пожалуйста, найдите функцию управления угловыми функциями ниже, чтобы обновить модель в базе данных.

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 в соответствии с приведенным ниже кодом.

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

Теперь проблема в ниже, когда я изменить детали perticular продукта и я нажимаю на кнопку Update, он не будет обновлять данные, дающие мне сообщение об ошибке, как «не определено».

Может помочь мне понять, где я делаю ошибку.

Заранее спасибо.

Answer 1

Сначала необходимо инициализировать объект $scope.Product. Внутри demoCtrl контроллера, вставьте следующий код:

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

Однако, я не вижу какой-либо код, который устанавливает $scope.Product из бэкэнд API.

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 !!'); 
     } 
    }; 



});