Post ajax data to ASP.NET MVC Controller

Question

i have a problem sending data to a MVC Controller...

My model (please see the property "ArchivosDeNorma"):

public partial class CustomNormas
{
    #region Propiedades

    [Required(ErrorMessage = "Debe ingresar Titulo")]
    [StringLength(50, ErrorMessage ="Titulo no puede superar los 50 caracteres")]
    public string Titulo { get; set; }

    [Required(ErrorMessage = "Debe ingresar FechaDeVigencia")]
    public DateTime FechaDeVigencia { get; set; }

    public DateTime? FechaDePublicacion { get; set; }

    [Required(ErrorMessage = "Debe ingresar Ambito")]
    public int Ambito { get; set; }

    [Required(ErrorMessage = "Debe ingresar Tipo")]
    public int Tipo { get; set; }

    [Required(ErrorMessage = "Debe ingresar Numero")]
    public int Numero { get; set; }

    [Required(ErrorMessage = "Debe ingresar Anio")]
    public int Anio { get; set; }

    [StringLength(300, ErrorMessage ="Descripcion no puede superar los 300 caracteres")]
    public string Descripcion { get; set; }

    [Required(ErrorMessage = "Debe ingresar FechaAlta")]
    public DateTime FechaAlta { get; set; }

    public DateTime? FechaBaja { get; set; }

    [StringLength(2147483647, ErrorMessage ="Texto no puede superar los 2147483647 caracteres")]
    public string Texto { get; set; }

    [StringLength(500, ErrorMessage ="Firmantes no puede superar los 500 caracteres")]
    public string Firmantes { get; set; }

    **public ArchivosDeNormaC[] ArchivosDeNorma { get; set; }**

    public string DescripcionArchivo { get; set; }

    #endregion

}

**public class ArchivosDeNormaC
{
    public int id { get; set; }
    public string archivo { get; set; }
    public string descripcion { get; set; }
}**

The problem is when do an ajax post to the controller, the "ArchivosDeNormas" parameter is null. The ajax post call (aarchivos is an array):

 var data = v.form.serializeArray();
 data.push({ name: "ArchivosDeNorma", value: JSON.stringify(that.aarchivos) });
 $.ajax({
type: "POST",
url: "Normas/Crear"
data: data
 });

Ajax post in firebug:

And the breackpoint in the controller, the propertie ArchivosDeNormas is null:

Hope someone can help me! Thanks a lot and sorry for my english

Answer 1

You are submitting your JSON data as application/x-www-form-urlencoded and should instead just submit it as actual JSON:

application/json

This can be done pretty simply, but the .serializeArray(); method does not unbox things properly for a raw JSON object. Instead you can make use of the .serializeObject() method below:

Javascript Fixes:

• Set the ContentType as JSON
• Create the JSON object properly using serializeObject()

All done below:

jsFiddle Demo

var data = v.form.serializeObject();
data.ArchivosDeNorma = that.aarchivos;
$.ajax({
    type: "POST",
    contentType: 'application/json',
    url: "Normas/Crear",
    data: JSON.stringify(data)
});

jQuery.fn.serializeObject = function () {
        var arrayData, objectData;
        arrayData = this.serializeArray();
        objectData = {};

        $.each(arrayData, function () {
            var value;

            if (this.value != null) {
                value = this.value;
            } else {
                value = '';
            }

            if (objectData[this.name] != null) {
                if (!objectData[this.name].push) {
                    objectData[this.name] = [objectData[this.name]];
                }

                objectData[this.name].push(value);
            } else {
                objectData[this.name] = value;
            }
        });

        return objectData;
    };

Answer 2

The value is null because you are trying to bind a complex sub object using the default model binder. The default model binder doesn't know how to do this. One thing you could do is write a custom model binder or you can change what you are posting back to the server. Since you only need the Id that you are sending back, you could just send an array of ints back to the server. Asp.net mvc is quite happy to bind that.

Answer 3

You cannot mix Form.Serialize using application/x-www-form-urlencoded with Json. It either ALL has to be Form Querystring or ALL json.

In other words:

[{"archivo" : "DSC03907.JPG", "id" : "46", "descripcion" : "wqedas" }]

is not properly urlencoded (application/x-www-form-urlencoded).