从 angular2 调用 Web 服务 api http

Question

我正在调用 httpGet 类型的 Web 服务 api，从 angular 向它发送 CopiadoraBusquedaModel 类型的参数，服务检索 CopiadoraBusqueda 类型的参数，但是当我检查 de 参数时服务网站 API，值为空。我已经能够检查 angular 中的模型是否与 C# 中的对象相匹配。有什么想法吗？

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: // 一些东西....

[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; }
}

Answer 1

尝试将 [FromUri] 属性添加到 GetListadoCopiadorasByFiltro 函数，如下所示：

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

这将强制 WebApi 从 URL 获取参数。这是一个很好的post：https://docs.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

Answer 2

您好，如果您想使用 [FromUri]，您必须在 url 中传递参数，如 vzayko 所说。这需要更改您的客户端代码。

您的 url 必须看起来像 api/copiadoras/get/listadoCopiadorasByFiltro?CodigoCopiadora=0000&NumeroSerie=XXXXX&NumeroInventario=12345

头数据中的参数绑定没有开箱即用的支持。但是，您可以实现自己的 HttpParameterBinding。你可以看到这个 here

的例子

从 angular2 调用 Web 服务 api http

calling a web service api http from angular2

service

http-get

asp.net-web-api

typescript

angular