The viewmodel does not update when I give Post using JS - Asp.net - asp.net-core-mvc

Question

I have a view model PesoaViewModel and inside it have 2 properties of type PersonFisicaViewModel and PessoaJuridicaViewModel. In my view Create I render PessoaFisiicaViewModel and PessoaJuridicaViewModel according to the nature of the person (Physical or Legal). In my case, when the user completes the data of individual and change to legal entity (the nature), the system must give a Post, move some data from the individual to legal entity and then return to the view and show them only in rendering legal entity.
I can do the Post and return the viewmodel, but the partial view does not update to the fields linked to ViewModelPessoaPhysica / ViewModelPessoaJuridica ... I've already tried doing it by JS, but it does not work .. Does anyone know how to help me?
Thank you!! :)
[HttpPost]
[Authorize(Policy = "CanWriteCustomerData")]
[Route("pessoa-gerenciamento/cadastrar-novo")]
[ValidateAntiForgeryToken]
public IActionResult Create(PessoaViewModel pessoaViewModel)
{
//Este bloco faz o tratamento que converte PessoaFisica em PessoaJuridica e vice-versa
if (pessoaViewModel.PessoaFisicaViewModel != null || pessoaViewModel.PessoaJuridicaViewModel != null)
{
var pessoa = _pessoaAppService.Change(pessoaViewModel);
return View(pessoa);
}
if (!ModelState.IsValid) return View(pessoaViewModel);
_pessoaAppService.RegisterPessoaFisica(pessoaViewModel);
if (IsValidOperation())
ViewBag.Sucesso = "Pessoa Cadastrada!";
return View(pessoaViewModel);
}
#using SistemaComercial.Domain.ValueObjects
#model SistemaComercial.Application.ViewModels.Pessoa.PessoaViewModel
#{
ViewData["Title"] = "Cadastrar Nova Pessoa";
}
<div class="panel">
<div class="panel-heading">
<h2 class="panel-title">Cadastrar nova Pessoa</h2>
</div>
<form asp-action="Create" id="frmCreate">
<div class="panel-body container-fluid">
#* Replacing classic Validation Summary to Custom ViewComponent as TagHelper *#
<vc:summary />
<!-- Example Tabs -->
<div class="example-wrap">
<div class="nav-tabs-horizontal">
<ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
<li class="active" role="presentation">
<a data-toggle="tab" href="#exampleTabsOne" aria-controls="exampleTabsOne" role="tab">Dados Pessoais</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#exampleTabsTwo" aria-controls="exampleTabsTwo" role="tab">Documentos</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#exampleTabsThree" aria-controls="exampleTabsThree" role="tab">Endereços</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#exampleTabsFour" aria-controls="exampleTabsFour" role="tab">Contatos</a>
</li>
</ul>
<div class="tab-content padding-top-20">
<div class="tab-pane active" id="exampleTabsOne" role="tabpanel">
<div class="form-horizontal">
<div class="form-group">
<label asp-for="Id" class="col-md-2 control-label"></label>
<div class="col-md-2">
<input asp-for="Id" class="form-control" disabled="disabled" />
<span asp-validation-for="Id" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="PessoaNatureza" class="col-md-2 control-label"></label>
<div class="col-md-3">
<select id="PessoaNatureza" asp-for="PessoaNatureza" asp-items="Model.PessoasNaturezas" class="form-control">
<option value="" data-id="#Model.PessoaNatureza.ObterIdEnum()">--SELECIONE--</option>
</select>
<span asp-validation-for="PessoaNatureza" class="text-danger"></span>
</div>
</div>
#await Html.PartialAsync("_PessoaFisica")
#await Html.PartialAsync("_PessoaJuridica")
#*<div id="divPessoaFisica">
#await Html.PartialAsync("_PessoaFisica")
</div>
<div id="divPessoaJuridica" style="display: none">
#await Html.PartialAsync("_PessoaJuridica")
</div>*#
#*#if (Model.PessoaNatureza == PessoaNatureza.Fisica)
{
<div id="divPessoaFisica">
#await Html.PartialAsync("_PessoaFisica")
</div>
<div id="divPessoaJuridica" style="display:none">
#await Html.PartialAsync("_PessoaJuridica")
</div>
}
else if (Model.PessoaNatureza == PessoaNatureza.Juridica)
{
<div id="divPessoaFisica" style="display:none">
#await Html.PartialAsync("_PessoaFisica")
</div>
<div id="divPessoaJuridica">
#await Html.PartialAsync("_PessoaJuridica")
</div>
}*#
</div>
</div>
<div class="tab-pane" id="exampleTabsTwo" role="tabpanel">
</div>
<div class="tab-pane" id="exampleTabsThree" role="tabpanel">
</div>
<div class="tab-pane" id="exampleTabsFour" role="tabpanel">
</div>
</div>
</div>
</div>
<!-- End Example Tabs -->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
#*<input type="submit" value="Gravar" class="btn btn-success" />
<a asp-action="Index" class="btn btn-info">Voltar à Lista</a>*#
<button type="submit" class="btn btn-success"><i class="icon wb-check" aria-hidden="true"></i> Gravar</button>
<a asp-action="Index" class="btn btn-danger">
<span title="Retornar à Lista" class="icon wb-arrow-left"></span> Retornar à lista
</a>
</div>
</div>
</div>
</form>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$(function () {
$('#PessoaNatureza').change(function () {
var data = $('#frmCreate').serialize();
if (this.value === 'Fisica') {
$.ajax({
type: "POST",
traditional: true,
url: '#Url.Action("Create", "Pessoa")',
data: data
});
$('#divPessoaFisica').show();
$('#divPessoaJuridica').hide();
}
else if (this.value === 'Juridica') {
$.ajax({
type: "POST",
traditional: true,
url: '#Url.Action("Create", "Pessoa")',
data: data
});
$('#divPessoaFisica').hide();
$('#divPessoaJuridica').show();
}
else {
$('#divPessoaFisica').hide();
$('#divPessoaJuridica').hide();
}
});
});
</script>
}
public class PessoaViewModel
{
[DisplayName("Código")]
public int Id { get; set; }
[DisplayName("Natureza")]
[Required(ErrorMessage ="Escolha uma Natureza")]
public PessoaNatureza PessoaNatureza { get; set; }
[DisplayName("Natureza")]
public string PessoaNaturezaDescricao { get; set; }
[DisplayName("Naturezas")]
public IEnumerable<SelectListItem> PessoasNaturezas { get; set; }
public PessoaFisicaViewModel PessoaFisicaViewModel { get; set; }
public PessoaJuridicaViewModel PessoaJuridicaViewModel { get; set; }
public PessoaViewModel()
{
PessoasNaturezas = ExtensaoDeEnumerador.EnumParaSelectListGenerico<PessoaNatureza>("U", PessoaNatureza.ToString()).OrderBy(x => x.Text);
}
}
public class PessoaFisicaViewModel
{
[DisplayName("Código")]
public int Id { get; set; }
[DisplayName("Nome Completo")]
[Required(ErrorMessage = "O campo Nome Completo é obrigatório")]
[MaxLength(200, ErrorMessage = "O campo {0} deve ter no máximo {1} caracteres")]
//[MinLength(5, ErrorMessage = "O campo {0} deve ter no mínimo {1} caracteres")]
public string NomeCompleto { get; set; }
[DisplayName("Apelido")]
[MaxLength(200, ErrorMessage = "O campo {0} deve ter no máximo {1} caracteres")]
//[MinLength(5, ErrorMessage = "O campo {0} deve ter no mínimo {1} caracteres")]
public string Apelido { get; set; }
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
[DataType(DataType.Date, ErrorMessage = "Data em formato inválido")]
[DisplayName("Nascimento")]
public DateTime? DataNascimento { get; set; }
[DisplayName("Sexo")]
[Required(ErrorMessage = "Escolha o Sexo")]
public Sexo Sexo { get; set; }
[DisplayName("Sexo")]
public string SexoDescricao { get; set; }
[DisplayName("Sexos")]
public IEnumerable<SelectListItem> Sexos { get; set; }
[DisplayName("Estado Civil")]
[Required(ErrorMessage = "Escolha o Estado Civil")]
public EstadoCivil EstadoCivil { get; set; }
[DisplayName("Estado Civil")]
public string EstadoCivilDescricao { get; set; }
[DisplayName("Estados Civis")]
public IEnumerable<SelectListItem> EstadosCivis { get; set; }
public PessoaFisicaViewModel()
{
Sexos = ExtensaoDeEnumerador.EnumParaSelectListGenerico<Sexo>("U", Sexo.ToString()).OrderBy(x => x.Text);
EstadosCivis = ExtensaoDeEnumerador.EnumParaSelectListGenerico<EstadoCivil>("U", EstadoCivil.ToString()).OrderBy(x => x.Text);
}
}
public class PessoaJuridicaViewModel
{
[DisplayName("Código")]
public int Id { get; set; }
[DisplayName("Razão Social")]
[Required(ErrorMessage = "O Campo Razão Social é obrigatório")]
[MaxLength(200, ErrorMessage = "O campo {0} deve ter no máximo {1} caracteres")]
public string RazaoSocial { get; set; }
[DisplayName("Nome Fantasia")]
[Required(ErrorMessage = "Campo Nome Fantasia é obrigatório")]
[MaxLength(200, ErrorMessage = "O campo {0} deve ter no máximo {1} caracteres")]
public string NomeFantasia { get; set; }
[DisplayName("Data de Abertura")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
[DataType(DataType.Date, ErrorMessage = "Data em formato inválido")]
public DateTime? DataAbertura { get; set; }
}

Answer 1

Please try if adding the attribute [FromBody] helps:
public IActionResult Create([FromBody] PessoaViewModel pessoaViewModel)
....
This attribute tells the MVC Model Binder where to look for the data that it should bind. For a Form POST it should almost always use data from the 'BODY'-part of the submitted data, but you have to tell it that explicitly.