Complex type bind with Angularjs

Question

I am studying Angularjs and Asp.net MVC and could not bind a property CPF class Person when performing a POST:

Classe Pessoa:

public class Pessoa
{
   protected PessoaFisica() { }

   public Int32 PessoaFisicaID{ get; set; }
   public String Nome { get; set; }
   public Cpf CPF { get; set; } 
   ...

}

Class CPF:

public partial class Cpf
{
        protected Cpf() { }        
        public Int64 Numero { get; private set; }
        ...
}

Controller Angularjs:

...
vm.salvar = function () {

            var pessoaFisica = new Object();
            pessoaFisica.PessoaFisicaID = vm.PessoaFisicaID;
            pessoaFisica.Nome = vm.Nome;

            //Bind do CPF com problema :-(

            //Tentativa 1:
            //pessoaFisica.CPF = new Object();
            //pessoaFisica.CPF.Numero = vm.CPF; 

            //Tentativa 2:
            pessoaFisica.CPF = vm.CPF;

            //Uso o $http.post()
            ajaxService
                    .ajaxPost(
                        pessoaFisica,
                        '/Home/Criar',
                        this.salvarPessoaFisicaOnSuccess,
                        this.salvarPessoaFisicaOnError
                    );   
        }
        ...

My Canvas:

At first try I used the code below, but it did not work:

//Tentativa 1:
pessoaFisica.CPF = new Object();
pessoaFisica.CPF.Numero = vm.CPF; 

Error: System.Missingmethodexception: No constructor without parameters has been defined for this object.

In the second attempt I used the code below and also did not work:

//Tentativa 2:
pessoaFisica.CPF = vm.CPF;

Arrives null in Asp.net MVC controller:

What I might be adjusting to be able to make the CPF bind informed?

Answer 1

You can solve this problem by creating the Object in this way:

var pessoaFisica = {
    id: 1,
    Nome: 'Renan',
    Cpf: {
        Numero: '232432'
    }
};

But this way you’re not using Angularjs itself, but creating a normal object in javascript.

Using Angular, your object would be something like this:

$scope.person = {
  'id': '1',
  'nome': 'Renan',
  'Cpf': {
     'Numero': '1234678'
  },
}

And that way you pass the $scope.person as an object.

$http.post("Pessoa/Criar/", { person : $scope.person});

On this website you have some examples of how to use Angular.

In this question you have some answers on how to use Angular for this purpose.

Answer 2

You need to adjust your Viewmodel to receive the same structure that is coming from your post request.

public class PessoaViewModel
{
    public int PessoaFisicaID { get; set; }
    public string Nome { get; set; }
    public CPF cpf { get; set; }
}
public class CPFViewModel
{
    public string Numero { get; set; }
}

See if it settles, and a return.