CODEWITHSUNDEEP
angularjsasp.net-mvc
Trepid
Trepid

Reputation: 15

Angularjs sending null object to asp mvc action on $http get

I'm trying to use Angularjs to send an object to an asp mvc controller on submit, but the value is going as null.

What I'm missing here?

My controller:

public class RelatorioIndiceController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GerarRelatorio(RelatorioFiltroPesquisa filtro)
    {
        throw new NotImplementedException();
    }
}

My parameter class:

public enum TipoRelatorio
{
    IndiceCapacidade,
    ImpactoMedio,
    TempoMedio
}

public class RelatorioFiltroPesquisa
{
    public TipoRelatorio TipoRelatorio { get; set; }
    public string NomeRelatorio { get; set; }
    public string Data { get; set; }
}

And my view:

    <div ng-app="mainApp" id="body">
    <div ng-controller="myCtrl" id="form">
        <div class="radio">
            <label>
                <input type="radio" ng-model="Filtro.TipoRelatorio" value="0" name="TiposRelatorio" />
                Índice Capacidade
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" ng-model="Filtro.TipoRelatorio" value="1" name="TiposRelatorio" />
                Impacto Médio
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" ng-model="Filtro.TipoRelatorio" value="2" name="TiposRelatorio" />
                Tempo Médio
            </label>
        </div>
        <div class="input-group">
            <label>Nome Relatório</label>
            <input type="text" ng-model="Filtro.NomeRelatorio" class="form-control" />
        </div>
        <div class="input-group">
            <label>Data</label>
            <input type="text" ng-model="Filtro.Data" class="form-control" placeholder="__/__/____" />
        </div>
        <input type="submit" ng-click="Submit()" value="Gerar Relatório" />
    </div>
</div>


@section scripts
{
    <script src="~/Scripts/angular.min.js"></script>

    <script>
        angular.module('mainApp', [])
        .controller('myCtrl', ['$scope', '$http', function ($scope, $http) {

            $scope.Submit = function () {
                $http({

                    method: "GET",
                    url: "/RelatorioIndice/GerarRelatorio/",
                    params: { filtro: $scope.Filtro }

                })
                .success(function (data) {
                    console.log("Sucesso");
                });
            }

        }]);
    </script>
}

I've checked if the object has the same properties names and they are ok, I made of copy and paste them. I've already checked another similar questions here on SO, but they didn't help me on this issue.

Upvotes: 0

Views: 199

Answers (1)

Trepid
Trepid

Reputation: 15

It happened the problem was with this code:

$http({
   method: "GET",
   url: "/RelatorioIndice/GerarRelatorio/",
   params: { filtro: $scope.Filtro }
      })
      .success(function (data) {
          console.log("Sucesso");
      });

Changing it to this version solved the problem:

$scope.submit = function() {
 $http.get("/RelatorioIndice/GerarRelatorio/", $scope.Filtro)
     .success("Sucesso");
};

In the controller you need to allow get requests:

public JsonResult GerarRelatorio(FiltroRelatorioPesquisa filtro)
{
   ...
   return Json(result, JsonRequestBehavior.AllowGet);
}

The old code is a working solution, but only with earlier versions of Angular (I'm not sure which we use at my work. There I'm used to that sintax). As for 1.5.8 the new code was what worked.

Upvotes: 1

Related Questions