calling a web service api http from angular2

Question

I am calling a web service api of type httpGet, from angular sends it a parameter of type CopiadoraBusquedaModel and the service retrieves the parameter of type CopiadoraBusqueda, but when i check de parameter on the service web API, the value is null. I have been able to check that the model from angular matches the object from C#. Any ideas?

copiadorabusquedamodel.ts:

 export class CopiadoraBusquedaModel {
 public codigoCopiadora: string;
 public numeroSerie: string;
 public numeroInventario: string;
 public nombrePersonaEncargada: string;
 public idCliente: number;
 public idContrato: number;
 public idProveedor: number;
 public idMarca: number;
 public idModelo: number;
 public fechaInstalacion: string;
 public fechaFinFacturacion: string;  
 }

service.ts

import { Http, RequestOptions, Headers} from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ListadoCopiadorasModel } from '../../models/listadocopiadoras.model';
import { CopiadoraBusquedaModel } from '../../models/copiadorabusqueda.model';

@Injectable()
export class ListadoCopiadorasService {
headers: Headers;
options: RequestOptions;

private url: any;
// La variable data cachea los datos del servicio.
private data: any;
constructor (private _http: Http) {}

 getListadoCopiadorasByFiltro(CopiadoraBusqueda : CopiadoraBusquedaModel): Observable<ListadoCopiadorasModel[]> {
    this.url = 'api/copiadoras/get/listadoCopiadorasByFiltro';
    this.headers = new Headers({'Content-Type': 'application/json','Accept': 'q=0.8;application/json;q=0.9'});

    //this.options = new RequestOptions({ headers: this.headers, params: { 'filtro': JSON.stringify(CopiadoraBusqueda) } });
    this.options = new RequestOptions({ headers: this.headers, params: { 'filtro': CopiadoraBusqueda } });
    // Si la variable data está vacía se llama al servicio.
    // Si tiene datos, se devuelve la variable como observable.
    if (!this.data) {
        return this._http.get(this.url, this.options)
            .map((response: any) =>
                response.json() as ListadoCopiadorasModel[])
            .do(data => this.data = data);
    } else {
        return Observable.of(this.data)
            .map((response: any) =>
                response as ListadoCopiadorasModel[]);
    }
}

Copiadoras.Controller.cs: // Some stuff....

[ScriptService]
[RoutePrefix("api/copiadoras")]
public class CopiadorasController: ApiController
{

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
[Route("get/listadoCopiadorasByFiltro")]
[HttpGet]
public IEnumerable<Copiadora> GetListadoCopiadorasByFiltro(CopiadoraBusqueda filtro)
{
  IEnumerable<Copiadora> listadoCopiadoras = null;    
  using (var servicioCopiadoras = new ServicioCopiadoraClient())
  {
    listadoCopiadoras = servicioCopiadoras.ObtenerCopiadorasByFiltro(filtro);
  }

  return listadoCopiadoras.AsEnumerable();
}

CopiadoraBusqueda.cs:

  public class CopiadoraBusqueda
  {

    [DataMember]
    public string CodigoCopiadora { get; set; }

    [DataMember]
    public string NumeroSerie { get; set; }

    [DataMember]
    public string NumeroInventario { get; set; }

    [DataMember]
    public string NombrePersonaEncargada { get; set; }

    [DataMember]
    public Int32 IdCliente { get; set; }

    [DataMember]
    public Int32 IdContrato { get; set; }

    [DataMember]
    public Int32 IdProveedor { get; set; }

    [DataMember]
    public Int32 IdMarca { get; set; }

    [DataMember]
    public Int32 IdModelo { get; set; }

    [DataMember]
    public string FechaInstalacion { get; set; }

    [DataMember]
    public string FechaFinFacturacion { get; set; }
}

score 0 · Accepted Answer · answered Sep 27 '17 at 19:10

0

Try to add [FromUri] attribute to GetListadoCopiadorasByFiltro function like this:

public IEnumerable<Copiadora> GetListadoCopiadorasByFiltro([FromUri]CopiadoraBusqueda filtro)

This will force WebApi to get the parameter from URL. Here is a good post about it: https://learn.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

answered Sep 27 '17 at 19:10

vzayko

337
2
11

Thank you vzayko, I add [FromUri] attribute, but de properties are empty, I have to put something else? – ararb78 Sep 28 '17 at 07:12
Could be field mapping. In CopiadoraBusqueda.cs try to change a property (i.e. CodigoCopiadora) to the same case as in JS (i.e. codigoCopiadora) and retest. If you will get this value, so do the same with the rest. Also, you can specify DataMember name as it seen in JS. Good luck! – vzayko Sep 28 '17 at 07:19
I change a property CodigoCopiadora in the c# class "CopiadoraBusqueda.cs" and model "copiadorabusquedamodel.ts", and only use this one, the other properties I have commented, but de value are being null y the web api method, I don´t know if the method "getListadoCopiadorasByFiltro" in "listadocompiadoras.service.ts" file is correctly implemented, – ararb78 Sep 28 '17 at 07:49

Jonathan Collins · Answer 2 · 2017-11-08T09:59:56.033

Hi if you want to use [FromUri] you must pass the parametes in the url, as vzayko said. This requires a change in your client code.

Your url would have to look something like api/copiadoras/get/listadoCopiadorasByFiltro?CodigoCopiadora=0000&NumeroSerie=XXXXX&NumeroInventario=12345

There is no out-of the-box support for parameter binding from the header data. You can however implement you own HttpParameterBinding. You can see an example of this here

calling a web service api http from angular2

2 Answers2