1

Tengo el siguiente codigo Ajax y HTML.

 $("#filter_frm").submit(function (e) {
    e.preventDefault();


        var data = $(this).serialize();
        myChart.showLoading({
            text: 'Cargando',
            color: '#c23531',
            textColor: '#000',
            maskColor: 'rgba(255, 255, 255, 0.8)',
            zlevel: 0
        });
        $(".chart_container").show();
        $.ajax(
            {
                url: "/calls/received",
                type: "post",
                contentType: 'application/json',
                data: data,
                traditional: true,
                success: function (response) {
...

<form action="/calls/received" method="post" id="filter_frm" autocomplete="off" enctype="multipart/form-data">
     <div class="form-group">
            <select id="filter" class="form-control js-data-example-ajax col-sm-12" multiple="">
                       <option value="x" name="valor[]">
                       <option value="x" name="valor[]">
                                        </select>
                                    ...

Serializo el array de OPTIONS pero al pasar al controlador MVC me viene como error.

    [HttpPost]
    [Route("calls/received")]
    public ContentResult Received(List<String> users)
    {
          ...
    }

Porque puede ser? Gracias.

1 respuesta 1

1

Hay varias cosas que resaltar acá. A ver si puedo ayudarte.

ContentType incorrecto.

Si estás enviando el formulario serializado, el contentType no debe ser application/json. Elimínalo del request.

¿Cómo funciona $(form).serialize()?

Si a esta función de jquery le pasamos un html form (como en tu caso), los elementos "exitosos" (suena raro pero se llaman así, mira este link para más info) del formulario son serializados a una cadena en notación de URL codificada (URL-encoded notation). Una de las cosas que debe tener un control para ser serializado, es que tenga un nombre (atributo name) así que en tu ejemplo el select debe tener un name.

<form action="/calls/received" method="post" id="filter_frm" ... >
     <div class="form-group">
        <select name="filter" ... >
            ...
        </select>
</form>

MVC Model Binder.

Cuando envías el formulario al controlador, el model binder (que es quien se encarga de interpretar el contenido de la petición y llenar los parámetros de la acción de una forma inteligente) debe poder encontrar en el contenido de la petición las claves que corresponden al objeto que quieres recibir.

Así que en tu caso, como tu acción recibe una lista de cadenas llamada users necesitas asegurarte de enviar ese mismo nombre en tu petición. Esto puede cambiarse y modificarse, manipulando los parámetros del model binder, pero lo mejor es no pelear contra el framework.

Voy a asumir que quieres recibir los filtros en el controller en vez de algo que se llama users que puede ser que tengas en otro control del formulario, así que cambiaré el nombre del parámetro a filter en la acción:

[HttpPost]
[Route("calls/received")]
public JsonResult Received(string[] filter)
{   
    return Json(filter);
}

A modo de ilustración solamente enviaré el valor de los filtros hacia la vista tal cual los recibí. Pero obviamente aquí es donde tendrías que manipular esos filtros e invocar una clase de servicio o repositorio para ejecutar alguna operación de negocio.

Fíjate que deliberadamente cambié el tipo del parámetro a ser un array de string (string[]) en vez de una lista (List<string>) para mostrar que el model binder es lo suficientemente inteligente como para saber llenar ese objeto no importa si es lista o arreglo.

Resumiendo

Con todos estos cambios creo que puedes seguir adelante con esto. Te dejo este fiddle por acá para que veas este ejemplo funcionando.

Ejemplo: https://dotnetfiddle.net/QGETbI

Espero que te sirva!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.