id showing undefined when trying to implement delete in angularjs

Question

Trying to implement delete funtion in angularjs. The backend in asp.net is working fine. when i check with postman its working fine. now am trying to the front end for that. when i hit the delete button. its not getting the UId. its showing like this.

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

am totally new to angular. i dont know whether this angular code is correct or not.And another thing is i need to implement user confirmation popup window also. please help me...

angular controller.

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

here my Asp.net Controller

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

            return Ok();

        }

Answer 1

Your function inside the controller expects the parameter Id and data, i assume your data refers to the Object user, change the html as follows,

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

and then,

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

Answer 2

There are many patterns to follow. But let me answer your question first, then suggest a better pattern: Your ng-click event is not taking any parameter, it should look like:

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

And since your .NET API Controller expects a parameter called UId as shown below,

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

then in Angular, you must tag that parameter with that tag name: params: { UId: id }. Also, since you want to prompt the user to confirm the action, I'd suggest you to use Bootbox Js as follows: It's a small, powerful, easy to use javascript library. Just provide a link to it on your index file.

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

Better Pattern: I would suggest controller-service pattern as follows: The service would look like:

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

Then in the controller:

$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();
            });
        }
    });
}

That's just a tip for you to research in that line of thought.

Answer 3

Try this, Change your tr to

<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

Thanks for the valuable comments. i found the error. in the asp.net controller i used HttpDelete. But here Am geting the data in Post method. that is the problem. and Also as Phil said, I dont need to mind about that Json.stringify(data) things.

here is the Answer.

angular Controller

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

well if i wasted your time really sorry for that. thanks again