Delete Operation using ASP.Net MVC and Angular JS

Question

I am new to ASP.Net MVC and Angular JS. I am performing delete operations using these two technologies but I am getting 404 : page not found error while performing these operation. My Controller Code:

[HttpDelete]
    public ActionResult DeleteBranchMaster(int branchId)
    {
         //Deletion Logic.
    }

Angular Code:

//Delete Branch Data
$scope.deleteBranchData = function (dataId) {
    $http.delete('/Master/DeleteBranchMaster?branchId=' + dataId);
};

Error: enter image description here

Answer 1

  // Delete action...
    [HttpPost]
    public string DeleteBranchMaster(string fsBranchId)
    {
         //Add your delete operation logic here... 
         //You can return success/fail string message

            return "Record deleted successfully.";
    }


//add following script...    
var app = angular.module("mvcCRUDApp", []); 
app.controller("mvcCRUDCtrl", function ($scope, crudAJService) {

$scope.deleteBranchData = function (dataId) {
        var getBranchData = crudAJService.DeleteBranchService(dataId);
        getBranchData.then(function (msg) {
            alert(msg.data);            
        }, function () {
            alert('Error while delete operation..!! Try again after sometime..');
        });
    }
});

//this is angularjs service..Service name is crudAJService..
app.service("crudAJService", function ($http) {

    //Delete service.. It will call Master controller's DeleteBranchMaster action.
    this.DeleteBranchService = function (branchId) {
        var response = $http({
            method: "post",
            url: "Master/DeleteBranchMaster",
            params: {
                fsBranchId: JSON.stringify(branchId)
            }
        });
        return response;
    }
});

Answer 2

Change the controller - action as per shown or use route name to define the id name properly

[HttpDelete]
public ActionResult DeleteBranchMaster(int id)
{
     //Deletion Logic.
}

//Delete Branch Data

$scope.deleteBranchData = function (dataId) {
  $http.delete('/Master/DeleteBranchMaster/' + dataId);
};

Or

[HttpDelete("{branchId}")]
public ActionResult DeleteBranchMaster(int branchId)
{
     //Deletion Logic.
}