por - mostrar datos json javascript




¿Cómo pasar los datos json POST al método de la API web como un objeto? (6)

¡Trabajar con POST en webapi puede ser complicado! Me gustaría añadir a la respuesta ya correcta ...

Se centrará específicamente en POST, ya que tratar con GET es trivial. No creo que muchos buscarían para resolver un problema con GET con webapis. De todos modos ..

Si su pregunta es: En MVC Web Api, ¿cómo: usar nombres de métodos de acción personalizados que no sean los verbos HTTP genéricos? - ¿Realizar múltiples publicaciones? - ¿Publicar múltiples tipos simples? - ¿Publicar tipos complejos a través de jQuery?

Entonces las siguientes soluciones pueden ayudar:

Primero, para usar Métodos de acción personalizados en la API web, agregue una ruta de api web como

public static void Register(HttpConfiguration config)
{
    config.Routes.MapHttpRoute(
        name: "ActionApi",
        routeTemplate: "api/{controller}/{action}");
}

Y luego puedes crear métodos de acción como:

[HttpPost]
public string TestMethod([FromBody]string value)
{
    return "Hello from http post web api controller: " + value;
}

Ahora, dispare el siguiente jQuery desde la consola de su navegador

$.ajax({
    type: 'POST',
    url: 'http://localhost:33649/api/TestApi/TestMethod',
    data: {'':'hello'},
    contentType: 'application/x-www-form-urlencoded',
    dataType: 'json',
    success: function(data){ console.log(data) }
});

Segundo, para realizar múltiples publicaciones , es simple, crear múltiples métodos de acción y decorar con el atributo [HttpPost]. Use [ActionName ("MyAction")] para asignar nombres personalizados, etc. Llegará a jQuery en el cuarto punto a continuación.

En tercer lugar, en primer lugar, no es posible publicar varios tipos SIMPLE en una sola acción. Además, hay un formato especial para publicar incluso un solo tipo simple (además de pasar el parámetro en la cadena de consulta o el estilo REST). Este fue el punto que me hizo golpear mi cabeza con Rest Clients (como Fiddler y la extensión de cliente REST avanzado de Chrome) y buscar en la web durante casi 5 horas cuando, finalmente, la siguiente URL resultó ser de ayuda. ¡Citaré el contenido relevante para que el enlace se vuelva muerto!

Content-Type: application/x-www-form-urlencoded
in the request header and add a = before the JSON statement:
={"Name":"Turbo Tina","Email":"[email protected]"}

PD: notado la sintaxis peculiar ?

http://forums.asp.net/t/1883467.aspx?The+received+value+is+null+when+I+try+to+Post+to+my+Web+Api

De todos modos, vamos a superar esa historia. Moviéndose en

Cuarto, la publicación de tipos complejos a través de jQuery, por supuesto, $ .ajax () entrará rápidamente en el rol:

Digamos que el método de acción acepta un objeto Person que tiene un ID y un nombre. Así, desde javascript:

var person = { PersonId:1, Name:"James" }
$.ajax({
    type: 'POST',
    url: 'http://mydomain/api/TestApi/TestMethod',
    data: JSON.stringify(person),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data){ console.log(data) }
});

Y la acción se verá como:

[HttpPost]
public string TestMethod(Person person)
{
    return "Hello from http post web api controller: " + person.Name;
}

Todo lo anterior, funcionó para mí !! ¡Aclamaciones!

La aplicación web de ASP.NET MVC4 API define el método de publicación para salvar al cliente. El cliente se pasa en formato json en el cuerpo de solicitud POST. El parámetro del cliente en el método posterior contiene valores nulos para las propiedades.

¿Cómo solucionar esto para que los datos publicados pasen como objeto del cliente?

Si es posible, se debería usar Content-Type: application / x-www-form-urlencoded ya que no sé cómo cambiarlo en el método javascript que se publica.

Controlador:

public class CustomersController : ApiController {

  public object Post([FromBody] Customer customer)
        {
            return Request.CreateResponse(HttpStatusCode.OK,
            new
            {
                customer = customer
            });
        }
    }
}

public class Customer
    {
        public string company_name { get; set; }
        public string contact_name { get; set; }
     }

Solicitud:

POST http://localhost:52216/api/customers HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=UTF-8

{"contact_name":"sdfsd","company_name":"ssssd"}

1) En su lado del cliente, puede enviar su solicitud http.post en una cadena como la que se muestra a continuación

var IndexInfo = JSON.stringify(this.scope.IndexTree);
this.$http.post('../../../api/EvaluationProcess/InsertEvaluationProcessInputType', "'" + IndexInfo + "'" ).then((response: any) => {}

2) Luego en tu web api controlador puedes deserializarlo

public ApiResponce InsertEvaluationProcessInputType([FromBody]string IndexInfo)
    {
var des = (ApiReceivedListOfObjects<TempDistributedIndex>)Newtonsoft.Json.JsonConvert.DeserializeObject(DecryptedProcessInfo, typeof(ApiReceivedListOfObjects<TempDistributedIndex>));}

3) Tu clase ApiReceivedListOfObjects debería ser como abajo

public class ApiReceivedListOfObjects<T>
    {
        public List<T> element { get; set; }

    }

4) asegúrese de que su cadena serializada (IndexInfo aquí) se convierta en una estructura inferior a la del comando JsonConvert.DeserializeObject en el paso 2

var resp = @"
    {
        ""element"": [
        {
            ""A"": ""A Jones"",
            ""B"": ""500015763""
        },
        {
            ""A"": ""B Smith"",
            ""B"": ""504986213""
        },
        {
            ""A"": ""C Brown"",
            ""B"": ""509034361""
        }
        ]
    }";

Asegúrese de que su servicio WebAPI esté esperando un objeto fuertemente tipado con una estructura que coincida con el JSON que está pasando. Y asegúrate de que tienes la cadena JSON que estás POSTANDO.

Aquí está mi JavaScript (usando AngluarJS):

$scope.updateUserActivity = function (_objuserActivity) {
        $http
        ({
            method: 'post',
            url: 'your url here',
            headers: { 'Content-Type': 'application/json'},
            data: JSON.stringify(_objuserActivity)
        })
        .then(function (response)
        {
            alert("success");
        })
        .catch(function (response)
        {
            alert("failure");
        })
        .finally(function ()
        {
        });

Y aquí está mi controlador WebAPI:

[HttpPost]
[AcceptVerbs("POST")]
public string POSTMe([FromBody]Models.UserActivity _activity)
{
    return "hello";
}


EDITAR : 31/10/2017

El mismo código / enfoque también funcionará para Asp.Net Core 2.0 . La principal diferencia es que, en el núcleo de asp.net, tanto los controladores de API web como los controladores Mvc se fusionan en un solo modelo de controlador. Por lo tanto, su tipo de retorno podría ser IActionResult o una de sus implementaciones (Ej: OkObjectResult )

Utilizar

contentType:"application/json"

JSON.stringify utilizar el método JSON.stringify para convertirlo en una cadena JSON cuando lo envíe,

Y la carpeta del modelo enlazará los datos json a su objeto de clase.

El siguiente código funcionará bien (probado)

$(function () {
    var customer = {contact_name :"Scott",company_name:"HP"};
    $.ajax({
        type: "POST",
        data :JSON.stringify(customer),
        url: "api/Customer",
        contentType: "application/json"
    });
});

Resultado

contentType propiedad contentType le dice al servidor que estamos enviando los datos en formato JSON. Desde que enviamos una estructura de datos JSON, el enlace del modelo se realizará correctamente.

Si inspecciona los encabezados de la solicitud ajax, puede ver que el valor de Content-Type se establece como application/json .

Si no especifica contentType explícitamente, utilizará el tipo de contenido predeterminado que es application/x-www-form-urlencoded;

Edite en noviembre de 2015 para abordar otras posibles cuestiones planteadas en los comentarios.

Publicar un objeto complejo

Supongamos que tiene una clase de modelo de vista compleja como su parámetro de método de acción de API web como este

public class CreateUserViewModel
{
   public int Id {set;get;}
   public string Name {set;get;}  
   public List<TagViewModel> Tags {set;get;}
}
public class TagViewModel
{
  public int Id {set;get;}
  public string Code {set;get;}
}

y su punto final de API es como

public class ProductController : Controller
{
    [HttpPost]
    public CreateUserViewMode Save([FromBody] CreateUserViewModel m)
    {
        // I am just returning the posted model as it is. 
        // You may do other stuff and return different response.
        // Ex : missileService.LaunchMissile(m);
        return m;
    }
}

En el momento de escribir este artículo, ASP.NET MVC 6 es la última versión estable y en MVC6, tanto los controladores de api web como los controladores de MVC se heredan de la clase base Microsoft.AspNet.Mvc.Controller .

Para enviar datos al método desde el lado del cliente, el siguiente código debería funcionar bien

//Build an object which matches the structure of our view model class
var model = {
    Name: "Shyju",
    Id: 123,
    Tags: [{ Id: 12, Code: "C" }, { Id: 33, Code: "Swift" }]
};

$.ajax({
    type: "POST",
    data: JSON.stringify(model),
    url: "../product/save",
    contentType: "application/json"
}).done(function(res) {       
    console.log('res', res);
    // Do something with the result :)
});

El enlace del modelo funciona para algunas propiedades, pero no todas! Por qué ?

Si no decora el parámetro del método de api web con el atributo [FromBody]

[HttpPost]
public CreateUserViewModel Save(CreateUserViewModel m)
{
    return m;
}

Y envíe el modelo (objeto javascript en bruto, no en formato JSON) sin especificar el valor de la propiedad contentType

$.ajax({
    type: "POST",
    data: model,
    url: "../product/save"
}).done(function (res) {
     console.log('res', res);
});

El enlace del modelo funcionará para las propiedades planas del modelo, no para las propiedades donde el tipo es complejo / otro tipo. En nuestro caso, las propiedades Id y Name se vincularán correctamente al parámetro m , pero la propiedad Tags será una lista vacía.

El mismo problema ocurrirá si está utilizando la versión corta, $.post que utilizará el Tipo de contenido predeterminado al enviar la solicitud.

$.post("../product/save", model, function (res) {
    //res contains the markup returned by the partial view
    console.log('res', res);
});

Siguiendo el código para devolver datos en formato json, en lugar de xml -Web API 2:

Ponga la siguiente línea en el archivo global.asax

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
        GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);




asp.net-web-api