用javascript调用get方法

Question

我正在使用 Web Api Asp。 Net 并想使用 javascript 运行我的控制器，例如：

JS

 function cargarCatalogo() {
            apiService.get("../../api/CatalogoRegistro/get/", null,
                function (res) {
                    $scope.Catalogos = res.data.Nombre; 
                },
                errorCatalogo);
        }

控制器

[AllowAnonymous]
    [HttpGet]
    [Route("{catalogo}")]
    public HttpResponseMessage Get(HttpRequestMessage request, string catalogo)
    {
        return CreateHttpResponse(request, () =>
        {
            HttpResponseMessage response = null;                
            var cr = _pService.Listar(param => param.Catalogos.Nombre.Equals(catalogo));
            IEnumerable<CatalogoRegistroViewModel> crs = Mapper.Map<IEnumerable<CatalogoRegistro>, IEnumerable<CatalogoRegistroViewModel>>(cr);
            var version = request.Headers.GetValues("Version").FirstOrDefault();// ServerVariables.Get("HTTP_X_MY_CUSTOM_HEADER_NAME");
            List<string> errores = new List<string>();

            if(cr==null)
            {
                errores.Add("El Catalogo no existe" );
                //response = request.CreateResponse<string>(HttpStatusCode.BadRequest, "El parametro no existe");                 
            }
            if(errores.Count>0)
                response = request.CreateResponse(HttpStatusCode.BadRequest, new { success = false, errores });
            else 
            {
                response = request.CreateResponse<IEnumerable<CatalogoRegistroViewModel>>(HttpStatusCode.OK, crs);   
            }

            return response;
        });
    }

角度视图

<div class="page-head">
    <div class="page-title">
        <h1>
            Cat&aacute;logos Gen&eacute;ricos
            <small>Administrar Cat&aacute;logos Gen&eacute;ricos de las Aplicaciones</small>
        </h1>
    </div>
</div>
<div class="row">
<div class="col-md-12">
    <!-- BEGIN Portlet PORTLET-->
    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption">
                Cat&aacute;logos Gen&eacute;ricos
            </div>
            <div class="tools">
                <a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
                <a href="javascript:;" class="reload" data-original-title="" title="" ng-click="actualizar();"> </a>
                <a href="javascript:;" class="fullscreen" data-original-title="" title=""> </a>
            </div>
        </div>
        <div class="portlet-body">
            <div class="form-group" ng-model="filterConductores">
                <br/>
                <div class="row">
                     <div class="col-md-12">
                    <div class="col-md-2">
                        <button id="agregar" type="submit" class="btn blue btn-lg" ng-click="nuevo();">Agregar</button>
                    </div>
                         <div class="col-md-2">
                             <button id="eliminar" type="submit" class="btn blue btn-lg" ng-click="eliminar();">Eliminar</button>
                         </div>
                    </div>
                <br/>
                <br/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row margin-top-10 form-horizontal">
                                <div class="col-md-10 text-right ">
                                    <label class="control-label">Mostrar: </label>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-control input-sm" name="Catalogo" id="Catalogo" ng-change="filtro('Estatus')" ng-model="f.Estatus">
                                        <!--ng-options="item.Nombre as item.Nombre for item in EstatusViaje"> -->
                                        <option value="" selected>TODOS</option>
                                        <option ng-repeat="item in Catalogos" value="{{item.Nombre}}" label="{{item.Nombre}}"></option>
                                    </select><br />
                                </div>
                                </div>
                            </div>
                            <div class=" col-md-12">
                                <table class="table table-striped table-hover table-bordered dt-bootstrap no-footer" id="tabla_conductores" role="grid" aria-describedby="sample_editable_1_info">
                                    <thead>
                                        <tr>
                                            <th class="hidden"></th>
                                            <th style="width: 200px;"> Codigo </th>
                                            <th> Nombre </th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>

                            </div>
                        </div>


                </div>

            </div>
        </div>
    </div>
</div>
    </div>

但我有问题

GET http://localhost:55720/api/CatalogoRegistro/get/ 404（未找到）

我的 api 路由有什么问题？没看懂

Answer 1

您正尝试使用api/CatalogoRegistro/get 呼叫[RoutePrefix("api/Catalogo")]。我不确定您打算作为参数传递什么，但您需要/api/Catalogo/{catalogo} 格式的内容，其中{catalogo} 是您的GET 调用的合适值。

Answer 2

[RoutePrefix("api/Catalogo")] 基本上说 URL 应该是api/Catalogo 而不是api/CatalogoRegistro。

function cargarCatalogo() {
   apiService.get("../../api/Catalogo", null,
   function (res) {
      $scope.Catalogos = res.data.Nombre; 
   },
   errorCatalogo);
}

如果你想将 catalogo 从 Angular 传递到 Web API，我相信你需要使用第二个参数 -

function cargarCatalogo() {
   apiService.get("../../api/Catalogo", catalogo,
   function (res) {
      $scope.Catalogos = res.data.Nombre; 
   },
   errorCatalogo);
}

Answer 3

试试这个：

在您的 WebApi 中

[Route("api/CatalogoRegistro/get/{catalogo}")]

来自 JS

 function cargarCatalogo() {
        var catalogoValue = "somevalueHere";
        apiService.get("/api/CatalogoRegistro/get/" + catalogoValue, null,
            function (res) {
                $scope.Catalogos = res.data.Nombre; 
            },
            errorCatalogo);
    }