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

Question

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.

Copied and pasted your code and it worked perfectly fine. Where are you getting null ? — Shyju
– Shyju, Commented Sep 8, 2016 at 0:34

Trepid · Accepted Answer · 2016-09-08 03:24:34Z

1

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.

answered Sep 8, 2016 at 3:24

Trepid

153 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrew Shepherd Over a year ago

Interesting: If you press the F12 developer tools and look at the network communication, you could see how the http message differs between $http.get and $http({ method: "GET", ...)

Trepid Over a year ago

I'll check that. While testing, it worked when I've tried to send an integer as param, but not with the complex object. I was checking my code here at my work, I used a solution using that sintax you suggested.

Trepid Over a year ago

Is there any way of following in SO? I'd like to follow you. =)

Andrew Shepherd Over a year ago

There's no way you can follow people on stackexchange. I remember the stackoverflow creators debating it, and deciding it was against the spirit of the site. It's all about information and learning, not personalities :-)

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related