用javascript调用get方法

时间:2017-04-12 15:20:46

标签: javascript asp.net asp.net-web-api

我正在使用Web Api Asp。网并想用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>

但是我遇到了问题

  

获取http://localhost:55720/api/CatalogoRegistro/get/ 404(未找到)

我的api路线到底是什么?我不明白

3 个答案:

答案 0 :(得分:0)

您尝试使用[RoutePrefix("api/Catalogo")]致电api/CatalogoRegistro/get。我不确定您打算将哪些内容作为参数传递,但您希望采用/api/Catalogo/{catalogo}格式的内容,其中{catalogo}GET的适当值打电话。

答案 1 :(得分:0)

[RoutePrefix("api/Catalogo")]基本上说网址应为api/Catalogo而不是api/CatalogoRegistro

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

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

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

答案 2 :(得分:0)

试试这个:

在您的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);
    }