asp.net mvc 3 - tipo - La forma correcta de utilizar AJAX Post en jquery para pasar el modelo de la vista MVC3 fuertemente tipada

mvc ajax post

Question

Soy un programador web novato, así que por favor, perdónenme si algo de mi "jerga" no es correcta. Tengo un proyecto que usa ASP.NET usando el framework MVC3.

Estoy trabajando en una vista de administrador donde el administrador modificará una lista de equipos. Una de las funciones es un botón de "actualización" que quiero usar jquery para editar dinámicamente la entrada en la página web después de enviar una publicación al controlador MVC.

Supongo que este enfoque es "seguro" en una configuración de administración única en la que hay una preocupación mínima de que la página web no se sincronice con la base de datos.

Creé una vista fuertemente tipada y esperaba pasar los datos del modelo al control MVC usando una publicación de AJAX.

En la siguiente publicación, encontré algo que es similar a lo que estoy viendo hacer: JQuery Ajax y ASP.NET MVC3 causan parámetros nulos

Usaré la muestra del código de la publicación anterior.

Modelo:

public class AddressInfo 
{
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

Controlador:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Check(AddressInfo addressInfo)
    {
        return Json(new { success = true });
    }
}

secuencia de comandos en la vista:

<script type="text/javascript">
var ai = {
    Address1: "423 Judy Road",
    Address2: "1001",
    City: "New York",
    State: "NY",
    ZipCode: "10301",
    Country: "USA"
};

$.ajax({
    url: ''/home/check'',
    type: ''POST'',
    data: JSON.stringify(ai),
    contentType: ''application/json; charset=utf-8'',
    success: function (data.success) {
        alert(data);
    },
    error: function () {
        alert("error");
    }
});
</script>

No he tenido la oportunidad de utilizar lo anterior aún. Pero me preguntaba si este era el "mejor" método para pasar los datos del modelo al control MVC utilizando AJAX.

¿Debería preocuparme por exponer la información del modelo?

Answer 1

Encontré 3 formas de implementar esto:

Clase C #:

public class AddressInfo {
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

Acción:

[HttpPost]
public ActionResult Check(AddressInfo addressInfo)
{
    return Json(new { success = true });
}

JavaScript puede hacerlo de tres maneras:

1) Cadena de consulta:

$.ajax({
    url: ''/en/Home/Check'',
    data: $(''#form'').serialize(),
    type: ''POST'',
});

Los datos aquí son una cadena.

"Address1=blah&Address2=blah&City=blah&State=blah&ZipCode=blah&Country=blah"

2) matriz de objetos:

$.ajax({
    url: ''/en/Home/Check'',
    data: $(''#form'').serializeArray(),
    type: ''POST'',
});

Los datos aquí son una matriz de pares clave / valor:

=[{name: ''Address1'', value: ''blah''}, {name: ''Address2'', value: ''blah''}, {name: ''City'', value: ''blah''}, {name: ''State'', value: ''blah''}, {name: ''ZipCode'', value: ''blah''}, {name: ''Country'', value: ''blah''}]

3) JSON:

$.ajax({
      url: ''/en/Home/Check'',
      data: JSON.stringify({ addressInfo:{//missing brackets
          Address1: $(''#address1'').val(),
          Address2: $(''#address2'').val(),
          City: $(''#City'').val(),
          State: $(''#State'').val(),
          ZipCode: $(''#ZipCode'').val()}}),
      type: ''POST'',
      contentType: ''application/json; charset=utf-8''
});

Los datos aquí son una cadena JSON serializada. Tenga en cuenta que el nombre debe coincidir con el nombre del parámetro en el servidor.

=''{"addressInfo":{"Address1":"blah","Address2":"blah","City":"blah","State":"blah", "ZipCode", "blah", "Country", "blah"}}''

Answer 2

Esta es la forma en que funcionó para mí:

$.post("/Controller/Action", $("#form").serialize(), function(json) {       
        // handle response
}, "json");

[HttpPost]
public ActionResult TV(MyModel id)
{
    return Json(new { success = true });
}

Answer 3

Puede omitir la declaración var y la stringify. De lo contrario, eso funcionará bien.

$.ajax({
    url: ''/home/check'',
    type: ''POST'',
    data: {
        Address1: "423 Judy Road",
        Address2: "1001",
        City: "New York",
        State: "NY",
        ZipCode: "10301",
        Country: "USA"
    },
    contentType: ''application/json; charset=utf-8'',
    success: function (data) {
        alert(data.success);
    },
    error: function () {
        alert("error");
    }
});

Answer 4

lo que tienes está bien; sin embargo, para ahorrar algo de tipeo, simplemente puedes usarlo para tus datos

data: $(''#formId'').serialize()

ver http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/ para más detalles, la sintaxis es bastante básica.

Answer 5

Si usa MVC 5, lea esta solución.

Sé que la pregunta específicamente llamaba a MVC 3, pero me encontré con esta página con MVC 5 y quería publicar una solución para cualquier otra persona en mi situación. Probé las soluciones anteriores, pero no funcionaron para mí, nunca se llegó al filtro de acción y no pude entender por qué. Estoy usando la versión 5 en mi proyecto y terminé con el siguiente filtro de acción:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Filters;

namespace SydHeller.Filters
{
    public class ValidateJSONAntiForgeryHeader : FilterAttribute, IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            string clientToken = filterContext.RequestContext.HttpContext.Request.Headers.Get(KEY_NAME);
            if (clientToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Header does not contain {0}", KEY_NAME));
            }

            string serverToken = filterContext.HttpContext.Request.Cookies.Get(KEY_NAME).Value;
            if (serverToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Cookies does not contain {0}", KEY_NAME));
            }

            System.Web.Helpers.AntiForgery.Validate(serverToken, clientToken);
        }

        private const string KEY_NAME = "__RequestVerificationToken";
    }
}

- Anote el using System.Web.Mvc y el using System.Web.Mvc.Filters , no las bibliotecas http (creo que es una de las cosas que cambió con MVC v5.

Luego, simplemente aplique el filtro [ValidateJSONAntiForgeryHeader] a su acción (o controlador) y debería recibir una llamada correcta.

En mi página de diseño justo arriba de </body> tengo @AntiForgery.GetHtml();

Finalmente, en mi página Razor, hago la llamada ajax de la siguiente manera:

var formForgeryToken = $(''input[name="__RequestVerificationToken"]'').val();

$.ajax({
  type: "POST",
  url: serviceURL,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: requestData,
  headers: {
     "__RequestVerificationToken": formForgeryToken
  },
     success: crimeDataSuccessFunc,
     error: crimeDataErrorFunc
});