Question

尝试在angularjs中实现删除功能。 asp.net中的后端工作正常。当我检查邮递员工作正常。现在我正在尝试前端。当我点击删除按钮。它没有得到UId。它的表现就像这样。

http://localhost:50802/api/User/BUser/[object%20Object]

对于角度来说，我是全新的。我不知道这个角度代码是否正确。另一件事是我还需要实现用户确认弹出窗口。请帮帮我......

角度控制器。

$scope.DeleteUser = function (data, UId) {
        $http({
            method: "post",
            url: urls.api + 'User/BUser/' + UId,

            data: JSON.stringify(data)
        }).then(function (response) {
            alert(response.data);

        })
    };

HTML

 <tr ng-repeat="d in UserList">

                        <td>{{d.description}}</td>
                        <td>{{d.path}}</td>
                        <td><button ng-click="DeleteUser()">Delete </button></td>

                    </tr>

这里是我的Asp.net控制器

[HttpDelete]
        [Route("DeleteBanner/{UId}")]
        public async Task<IHttpActionResult> DeleteBanner(int UId)
        {
            int? result = await _service.DeleteBannerAsync(UId);

            return Ok();

        }

Answer 1

您在控制器内的功能需要参数Id和数据，我假设您的数据引用了对象 var array = {"nR": 22, "nH": 7, "totB": "2761", "nSR": 16, "htRb": "91981"} var parskey = 0; for (var key in array) { parskey = parseInt(array[key]); sum += parskey; }; return(sum); ，更改html如下，

user

然后，

  <td><button ng-click="DeleteUser(d)">Delete </button></td>

Answer 2

要遵循许多模式。但是，让我先回答你的问题，然后建议一个更好的模式：您的ng-click事件没有采用任何参数，它应该如下所示：

<tr ng-repeat="d in UserList">
  ...
  <td><button ng-click="DeleteUser(d.UId)">Delete </button></td>
</tr>

由于您的.NET API Controller需要一个名为 UId 的参数，如下所示，

[HttpPost]
[Route("BUser/{UId}")] 
public async Task<IHttpActionResult> DeleteUser(int UId) {
//Implementation
}

然后在Angular中，您必须使用该标记名称标记该参数： params：{UId：id} 。此外，由于您要提示用户确认操作，我建议您使用Bootbox Js，如下所示：它是一个小巧，功能强大，易于使用的JavaScript库。只需在索引文件中提供指向它的链接。

$scope.DeleteUser = function (id) {
    var url = urls.api + 'User/BUser/' + id;
    bootbox.confirm("Are you sure you want to delete this user?", function (result) {
        if (result) {
            $http.post(url, { params: { UId: id } })
            .then(function (response) {
                alert(response.data);
            });
        }
    });
}

更好的模式：我建议控制器服务模式如下：服务如下所示：

function deleteUser(id) {
    var url = urls.api + 'User/BUser/' + id;
    var deferred = $q.defer();
    $http.post(url, { params: { UId: id } })
        .then(success).catch(deferred.reject);
    return deferred.promise;

    function success(response) {
        var data = response && response.data;
        deferred.resolve(data);
    }
}

然后在控制器：

$scope.DeleteUser = function (id) {
    bootbox.confirm("Are you sure you want to delete this user?", function (result) {
        if (result) {
            /*
             * You can use Angular blockUI to show progress here
            */
            return userService.deleteUser(id).then(function (response) {
                alert(response);
            }).catch(function (error) {
                alert(error);
            }).finally(function () {
                 //You can stop the blockUI instance here.
                //appBlockUI.stop();
            });
        }
    });
}

这只是你在这条思路上进行研究的一个提示。

Answer 3

试试这个，将tr改为

<tr ng-repeat="d in UserList">
  <td>{{d.description}}</td>
  <td>{{d.path}}</td>
  <td><button ng-click="DeleteUser(d, d.UId)">Delete </button></td>
</tr>

Answer 4

感谢您的宝贵意见。我发现了错误。在asp.net控制器中，我使用 HttpDelete 。但是这里是在发布方法中的数据。那就是问题所在。而且正如菲尔所说，我不需要考虑那些Json.stringify(data)事。

这是答案。

角度控制器

 $scope.DeleteUser = function (Uid) {
        deleteUser = $window.confirm('Are you sure you want to delete?');
        //console.log(Uid);
        if (deleteUser) { 
            $http({
                method: "Delete",
                url: urls.api + 'User/BUser/' + Uid,
            }).then(function (response) {
                alert(response.data);
            })
        }
    };

HTML

<button ng-click="DeleteUser(d.Uid)">Delete </button>

好吧，如果我浪费你的时间真的很抱歉。再次感谢

在尝试在angularjs中实现删除时，id显示未定义

4 个答案: