Problems Posting in a Model with AJAX in ASP.NET CORE MVC

问题

I'm having trouble doing a Post from a Complex Model using JAX in Asp.net. The model has some properties that represent other models, but at the moment, I only need to initialize them with NULL. I do not know what is missing, but my controller is getting "null" value ... There is some problem in the conversion done on the Client side. Does anyone know how to help me?

var pessoaContatoViewModel = {
    Id: 0,
    PessoaId: 0,
    FormaContatoId: formaContatoId,
    FormaContatoDescricao: '',
    FormasContatos: null,
    ContatosTipos: null,
    FormaContatoTipoId: 0,
    Contato: contato,
    Observacao: observacao,
    ContatoPrincipal: contatoPrincipal,
    PessoaContatoChamadaViewModel: null,
    PessoaContatoRedeSocialViewModel: null,
    PessoaContatoEmailViewModel: null
};

$.ajax({
    url: "/pessoa-gerenciar/changeFormaContato",
    type: "POST",
    data: JSON.stringify(pessoaContatoViewModel),
    contentType: "application/json",
    dataType: "json",
    success: function (result) {
        alert('ok');
    },
    error: function () {
        alert("Oops! Algo deu errado.");
        console.log(pessoaContatoViewModel);
    }
});


[HttpPost]
[Route("pessoa-gerenciar/changeFormaContato")]
public IActionResult ChangeFormaContato([FromBody] PessoaContatoViewModel pessoaContatoViewModel)
{
    //ViewBag.indice_new = indice;
    //return PartialView("~/Views/Pessoa/PessoaContato/_PessoaContatoAdd.cshtml", _pessoaContatoAppService.CreateNew(pessoaNatureza, formaContatoId));
    return null;
}


public class PessoaContatoViewModel
{
    [Key]
    public int Id { get; set; }

    public int PessoaId { get; set; }

    [DisplayName("Forma de Contato")]
    [Required(ErrorMessage = "Escolha a Forma de Contato")]
    [JsonConverter(typeof(StringEnumConverter))]
    public int FormaContatoId { get; set; }
    public string FormaContatoDescricao { get; set; }
    public IEnumerable<SelectListItem> FormasContatos { get; set; }

    public IEnumerable<SelectListItem> ContatosTipos { get; set; }

    [DisplayName("Forma de Contato")]
    [Required(ErrorMessage = "Selecione uma Forma de Contato")]
    public int FormaContatoTipoId { get; set; }

    [DisplayName("Contato")]
    [Required(ErrorMessage = "O campo Contato é obrigatório")]
    [MaxLength(100, ErrorMessage = "O campo {0} deve ter no máximo {1} caracteres")]
    public string Contato { get; set; }

    [DisplayName("Observação")]
    [MaxLength(150, ErrorMessage = "O campo {0} deve ter no máximo {1} caracteres")]
    public string Observacao { get; set; }

    [DisplayName("Principal")]
    public bool ContatoPrincipal { get; set; }

    public FormaContatoTipoViewModel FormaContatoTipoViewModel { get; set; }
    public PessoaContatoChamadaViewModel PessoaContatoChamadaViewModel { get; set; }
    public PessoaContatoRedeSocialViewModel PessoaContatoRedeSocialViewModel { get; set; }
    public PessoaContatoEmailViewModel PessoaContatoEmailViewModel { get; set; }
}

回答1:

You have null passed to action because model binder got invalid values for some fields. It means that if the property is int you need to pass valid number, if it is bool you need to pass true or false and nothing else. If you need to initialize property with default value (null) you can just omit these properties

var pessoaContatoViewModel = {
    //Id: 0, omit default value
    //PessoaId: 0,
    FormaContatoId: formaContatoId, //make sure this is valid integer
    FormaContatoDescricao: '',
    //FormasContatos: null, omit default value
    //ContatosTipos: null, omit default value
    //FormaContatoTipoId: 0, omit default value
    Contato: contato,
    Observacao: observacao,
    ContatoPrincipal: contatoPrincipal, //make sure this boolean or string "true" or "false"
    //PessoaContatoChamadaViewModel: null, omit default value
    //PessoaContatoRedeSocialViewModel: null, omit default value
    //PessoaContatoEmailViewModel: null omit default value
};

If you pass the following model everything will work fine

var pessoaContatoViewModel = {
    FormaContatoId: 7,
    FormaContatoDescricao: '',
    Contato: "val",
    Observacao: "some string",
    ContatoPrincipal: true
};

Also condsider creating separate model for post request accepting only data you need (but this is not required)

public class PessoaContatoModel
{
    public int FormaContatoId { get; set; }
    public string FormaContatoDescricao { get; set; }
    public string Contato { get; set; }
    public string Observacao { get; set; }
    public bool ContatoPrincipal { get; set; }
}

[HttpPost]
[Route("pessoa-gerenciar/changeFormaContato")]
public IActionResult ChangeFormaContato([FromBody] PessoaContatoModel pessoaContatoViewModel)

回答2:

I think if you remove [From body] and in javascript "Json.Stringify" then it will work fine. I also remove content type.

var pessoaContatoViewModel = {
                Id: 1,
                PessoaId: 3,
                FormaContatoId: 0,
                FormaContatoDescricao: '',
                FormasContatos: null,
                ContatosTipos: null,
                FormaContatoTipoId: 0,
                Contato: null,
                Observacao: null,
                ContatoPrincipal: null,
                PessoaContatoChamadaViewModel: null,
                PessoaContatoRedeSocialViewModel: null,
                PessoaContatoEmailViewModel: null
            };

            $.ajax({
                url: "/Home/changeFormaContato",
                type: "POST",
                data: pessoaContatoViewModel,
                //contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    alert('ok');
                },
                error: function () {
                    alert("Oops! Algo deu errado.");
                    console.log(pessoaContatoViewModel);
                }
            });

来源：https://stackoverflow.com/questions/55179737/problems-posting-in-a-model-with-ajax-in-asp-net-core-mvc