Get data using angularjs with restful web api in mvc

Question

I need to create an application which gets the data from store procedure and display it on view.

When i was passing id from view to angularjs controller, have the value of that field, but unable to get the same in web api, it displays null(while calling).

To be more specific, have tried various options, some of following:

• Used [FromBody]
• Passed string value in json from angularjs controller to webapi

So, when it is null, it always throws result with fail, not success.

Please help.

Code:

• Angularjs (controller)

app.controller('matchDetailController', function($scope, $http) {
  $scope.getAllMatchDetail = function(matchId) {
    var MatchId = matchId;
    $http.get('/api/[Apicontrollername]/GetAllMatchDetail', MatchId).success(function(data) {
      if (data.status == "success") {

      } else {

      }
    }).error(function(error) {
      debugger;
    })
  }
});

<div class="view_container" id="matchDetail" data-ng-controller="matchDetailController" data-ng-init="getAllMatchDetail(@ViewBag.MatchId)">

• webapi

  public object GetAllMatchDetail([FromBody]string MatchId) { SoccerWebviewMatchDetailRepository _SoccerWebviewMatchDetailRepository = new SoccerWebviewMatchDetailRepository();

      List<clsSoccerWebviewMatchDetail> objlstclsSoccerWebviewMatchDetail = _SoccerWebviewMatchDetailRepository.getAllSoccerWebviewMatchDetail(MatchId);
  
      if (objlstclsSoccerWebviewMatchDetail != null && objlstclsSoccerWebviewMatchDetail.Count() != 0)
      {
          var jsonObject = new
          {
              status = "success",
              objlstclsSoccerWebviewMatchDetail = _SoccerWebviewMatchDetailRepository.getAllSoccerWebviewMatchDetail(MatchId)
          };
  
          return jsonObject;
      }
      else
      {
          var jsonObject = new
          {
              status = "fail",
              message = "No match details found"
          };
  
          return jsonObject;
      }
  }
  

Check the code.

Answer 1

First This is HttpGet Method, you need to pass Parameter in URL.

Angular.js

$http.get('/api/[Apicontrollername]/GetAllMatchDetail/'+ MatchId ).success(function(data) {
  if (data.status == "success") {

  } else {

  }
}).error(function(error) {
  debugger;
})

Web API : Remove [FromBody]

public object GetAllMatchDetail(string MatchId) 
{ 
    SoccerWebviewMatchDetailRepository _SoccerWebviewMatchDetailRepository = new SoccerWebviewMatchDetailRepository();
}