javascript - tutorial - Generación de un cliente JS basado en un controlador WebAPI de ASP.NET

web api rest c#

Question

En los proyectos web modernos que usan API RESTful, a menudo vemos llamadas AJAX como la que se encuentra debajo de nuestros archivos JavaScript.

$.ajax({
    type: "POST",
    url: myapp.baseUrl + ''Api/Note'',
    data: ko.mapping.toJSON(note),
    contentType: ''application/json'',
}).done(function (response) {
    // do something
}).fail(function (jqxhr) {
    // do something else
});

Me encanta WebAPI, me encanta Knockout y me encanta atar a los dos juntos. Sin embargo, estas llamadas AJAX son bastante detalladas y contienen todo tipo de detalles que realmente no me interesan. Por lo tanto, creo un contenedor alrededor de estos métodos:

myapp.api.saveNote(note)

Sin embargo, esto todavía me obliga a escribir un contenedor que contiene la llamada AJAX. Me preguntaba si realmente podrías generar estos envoltorios . Básicamente, estaría generando un cliente basado en JS para mi WebAPI, similar a cómo Java y .NET pueden generar clientes basados ​​en WSDL.

1. Ha hecho esto antes?
2. ¿Hay otras formas de vincular ASP.NET WebAPI y JavaScript sin escribir un montón de código repetitivo de AJAX?
3. En otras palabras, ¿hay marcos para crear interfaces JS basadas en interfaces del lado del servidor como ASP.NET WebAPI?

Ya he analizado amplifyJS, pero esto solo resuelve parcialmente el problema. Estoy buscando una solución que realmente cree una interfaz basada en los controladores WebAPI en mi solución. Si esto no existe, comenzaré a retocarme. Ya tengo una idea para un WebAPIClientGenerator que usa la reflexión para iterar sobre todos los ApiController .

Answer 1

Este excelente otro proyecto te permite hacer lo que pediste. Este proyecto genera automáticamente proxies JavaScript para controladores MVC y WebApi. Y este proyecto cubre las características de WebApi, como los atributos personalizados de ActionName. Con este proyecto, también tendrás el Intellisense.
http://jsnet.codeplex.com/

Ejemplo de Intellisense

window.test = function test() {
/// <summary>
///This example works.
///You have the Intellisense. It''s great!!!
///No hard coded url.
///</summary>

//-- settings of ajax request.
var a = $dpUrlSet.Customer.Create.$action0.$AjaxSettings();

//-- your parameters of action method
a.data.name = "Scott Gu";
a.data.address = "Somewhere in Redmond";

//-- stringify
a.data = JSON.stringify(a.data);

//-- send ajax request
var xhr = $.ajax(a);

xhr.success(function (id) {
    /// <summary>Response of ajax request</summary>

    //-- settings of ajax request.
    var a = $dpUrlSet.Customer.Update.$action0.$AjaxSettings();

    //-- your parameters of action method
    a.data.id = id;
    a.data.name = "Scott Gu";
    a.data.address = "Somewhere in Seattle";

    //-- stringify
    a.data = JSON.stringify(a.data);

    //-- send ajax request
    var xhr = $.ajax(a);

});
}

Answer 2

Estoy trabajando en la cadena de herramientas de código abierto Swagger NSwag para .NET: con esta herramienta puedes generar el cliente de TypeScript para uno o varios controladores de API web .

En la interfaz de usuario solo

1. Seleccione la DLL de API web
2. Seleccione las clases de controlador
3. Genere código de cliente de TypeScript (en su caso, seleccione la plantilla JQueryCallbacks o JQueryPromises )

Eche un vistazo a http://nswag.org

FYI: TypeScript es un lenguaje que se transfiere a JavaScript

Answer 3

Acabo de encontrar un proyecto llamado: ProxyApi

ProxyApi es una biblioteca que crea automáticamente objetos proxy de JavaScript para los controladores ASP.NET MVC y WebApi.

GitHub: https://github.com/stevegreatrex/ProxyApi

Blog: http://blog.greatrexpectations.com/2012/11/06/proxyapi-automatic-javascript-proxies-for-webapi-and-mvc/

ProxyApi generó JavaScript no válido para mi solución que contenía más de cien acciones WebAPI separadas. Probablemente esto se deba a que ProxyApi no cubre todas las funciones de WebApi, como los atributos personalizados de ActionName. Además, la biblioteca ProxyApi es un poco voluminosa para mi gusto. Tiene que haber una manera más eficiente de hacer esto ...

Así que decidí echar un vistazo al código fuente ASP.NET WebAPI y resulta que WebAPI tiene incorporada la funcionalidad de autodescripción. Puede utilizar el siguiente código desde cualquier lugar de su solución ASP.NET para acceder a los metadatos de WebAPI:

var apiExplorer = GlobalConfiguration.Configuration.Services.GetApiExplorer();

Basado en el resultado de apiExplorer.ApiDescriptions , apiExplorer.ApiDescriptions mi propio proveedor de metadatos:

public class MetadataController : Controller
{
    public virtual PartialViewResult WebApiDescription()
    {
        var apiExplorer = GlobalConfiguration.Configuration.Services.GetApiExplorer();
        var apiMethods = apiExplorer.ApiDescriptions.Select(ad => new ApiMethodModel(ad)).ToList();
        return PartialView(apiMethods);
    }

    public class ApiMethodModel
    {
        public string Method { get; set; }
        public string Url { get; set; }
        public string ControllerName { get; set; }
        public string ActionName { get; set; }
        public IEnumerable<ApiParameterModel> Parameters { get; set; }

        public ApiMethodModel(ApiDescription apiDescription)
        {
            Method = apiDescription.HttpMethod.Method;
            Url = apiDescription.RelativePath;
            ControllerName = apiDescription.ActionDescriptor.ControllerDescriptor.ControllerName;
            ActionName = apiDescription.ActionDescriptor.ActionName;
            Parameters = apiDescription.ParameterDescriptions.Select(pd => new ApiParameterModel(pd));
        }
    }

    public class ApiParameterModel
    {
        public string Name { get; set; }
        public bool IsUriParameter { get; set; }

        public ApiParameterModel(ApiParameterDescription apiParameterDescription)
        {
            Name = apiParameterDescription.Name;
            IsUriParameter = apiParameterDescription.Source == ApiParameterSource.FromUri;
        }
    }
}

Use este controlador junto con la siguiente vista:

@model IEnumerable<Awesome.Controllers.MetadataController.ApiMethodModel>
<script type="text/javascript">
    var awesome = awesome || {};

    awesome.api = {
        metadata: @Html.Raw(Json.Encode(Model))
    };

    $.each(awesome.api.metadata, function (i, action) {
        if (!awesome.api[action.ControllerName]) {
            awesome.api[action.ControllerName] = {};
        }
        awesome.api[action.ControllerName][action.ActionName] = function (parameters) {
            var url = ''/'' + action.Url;
            var data;
            $.each(action.Parameters, function (j, parameter) {
                if (parameters[parameter.Name] === undefined) {
                    console.log(''Missing parameter: '' + parameter.Name + '' for API: '' + action.ControllerName + ''/'' + action.ActionName);
                } else if (parameter.IsUriParameter) {
                    url = url.replace("{" + parameter.Name + "}", parameters[parameter.Name]);
                } else if (data === undefined) {
                    data = parameters[parameter.Name];
                } else {
                    console.log(''Detected multiple body-parameters for API: '' + action.ControllerName + ''/'' + action.ActionName);
                }
            });
            return $.ajax({
                type: action.Method,
                url: url,
                data: data,
                contentType: ''application/json''
            });
        };
    });
</script>

El controlador usará ApiExplorer para generar metadatos sobre todas las acciones de WebAPI disponibles. La vista representará estos datos como JSON y luego ejecutará algo de JavaScript para transformar estos datos en funciones de JavaScript ejecutables reales.

Para utilizar este poco de magia, inserte la siguiente línea en el encabezado de su página de diseño después de su referencia de jQuery.

@Html.Action(MVC.Metadata.WebApiDescription())

A partir de ahora, puede hacer que sus llamadas WebAPI se vean así:

// GET: /Api/Notes?id={id}
awesome.api.Notes.Get({ id: id }).done(function () {
    // .. do something cool       
});

// POST: /Api/Notes
awesome.api.Notes.Post({ form: formData }).done(function () {
    // .. do something cool       
});

Este proxy simple distinguirá automáticamente los parámetros de la cadena de consulta de los parámetros del cuerpo de la solicitud. Los parámetros faltantes o los múltiples parámetros corporales generarán un error para evitar errores tipográficos u otros errores comunes de desarrollo de WebAPI.