Question

我是AngularJS技术的新手，我创建了一个演示应用程序，我想将一些数据更新到数据库中。我使用Web API使用了MVC AngularJS。

我有下面的Web API函数，用于更新记录。

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

其中reposotory.Update（product）是处理数据库更新操作的函数，下面是代码。

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页面。

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



});

带Web API的AngularJS不会将数据更新到数据库中

2 个答案: