Null object with jquery ajax MVC3

Question

I know I must be forgetting something.

I am making a request ajax jquery to send a message via contact form, however the object is coming null on controller.

I tried doing with the JSON.stringfy and without it, with it comes the object with all null properties, without it the object itself comes null

I made the same request in another form and it worked. This has more fields and is not working, follow my code:

HTML

<form onsubmit="return EnviarMensagem()">
    <div class="w-form form-wrapper">
        <div class="w-clearfix" id="email-form" name="email-form" data-name="Email Form">
            <div class="w-row">
                <div class="w-col w-col-4">
                    <address class="form-content-box">
                        <p class="form-content-box-title">
                            @ViewBag.Contato_Box_Titulo
                        </p>
                        <p class="contact-form-info">
                            @ViewBag.Contato_Box_Texto
                            <br><br>
                            <a class="contact-form-info-phone" href="tel:[phone]">
                                @ViewBag.Contato_Box_Rodape
                            </a>
                        </p>
                    </address>
                </div>
                <div class="w-col w-col-4">
                    <input type="text" id="Nome" placeholder="Seu Nome (obrigatório)" class="w-input form-text-field" data-name="Nome" required />
                    @*@Html.TextBoxFor(m => m.Nome, new { @class = "w-input form-text-field", placeholder = "Seu Nome (obrigatório)", required = "required" })*@
                    <input type="text" id="Email" placeholder="Seu E-mail (obrigatório)" required data-name="EMail" class="w-input form-text-field" />
                    @*@Html.TextBoxFor(m => m.Email, new { @class = "w-input form-text-field", placeholder = "Seu E-mail (obrigatório)", required = "required" })*@
                    <input type="text" id="Telefone" placeholder="Telefone)" required data-name="Telefone" class="w-input form-text-field" />
                    @*@Html.TextBoxFor(m => m.Telefone, new { @class = "w-input form-text-field", placeholder = "Seu Telefone" })*@
                </div>
                <div class="w-col w-col-4">
                    <textarea class="w-input form-text-area" cols="20" id="Mensagem" name="Mensagem" placeholder="Deixe a sua mensagem" rows="2"></textarea>
                    @*@Html.TextAreaFor(m => m.Mensagem, new { @class = "w-input form-text-area", placeholder = "Deixe a sua mensagem" })*@
                </div>
            </div>
            <input type="submit" value="Enviar" class="w-button form-button-submit" data-wait="Aguarde..." wait="Aguarde..." />
        </div>
        <br />
        <div class="w-form-done form-message-success" style="display: none;" id="BoxMensagem">
            <p class="form-message-text" id="mensagemSucesso">Obrigado pelo interesse! Em breve você receberá novidades sobre casos de sucesso em seu e-mail.</p>
        </div>
    </div>
</form>

jQuery

   function EnviarMensagem() {
        var data = ObterData();

        $.ajax({
            type: "POST",
            url: "/Mensagem/EnviarMensagem",
            data: data,
            contentType: 'application/json',
            beforeSend: function () {
                $('#BoxMensagem').css('display', 'block').css('background-color', '#00626b');
                $('#mensagemSucesso').html('Aguarde, estamos registrando seu contato.');
            },
            success: function (result) {
                $('#mensagemSucesso').html('Obrigado pelo interesse! Em breve você receberá as melhores oportunidades em seu e-mail.');
            }
        });

        return false;
    }

    function ObterData() {
        var data = '{ ';

        data += '"Nome": "' + $('#Nome').val() + '", ';
        data += '"Email": "' + $('#Email').val() + '", ';
        data += '"Telefone": "' + $('#Telefone').val() + '", ';
        data += '"Mensagem": "' + $('#Mensagem').val() + '", ';
        data += '"TipoMensagem": 2 }';

        return data;
    }

Controller

[HttpPost]
public ActionResult EnviarMensagem(MensagemDto mensagem)
{
    var mensagemHtml = GerarMensagemHtml(mensagem);
    var tipoMensagem = (TipoMensagem)mensagem.TipoMensagem;

    EnviarEmail(mensagemHtml, tipoMensagem);
    SalvarContato(mensagem);

    return Json(new { Sucesso = true });
}

Object - Message

public class MensagemDto
{
    public string Nome { get; set; }
    public string Email { get; set; }
    public string Telefone { get; set; }
    public string Mensagem { get; set; }

    public string TipoVenda { get; set; }
    public string TipoImovel { get; set; }
    public string Cidade { get; set; }
    public string Tamanho { get; set; }
    public string CodigoCenture { get; set; }
    public string Preco { get; set; }

    public string Endereco { get; set; }

    public int TipoMensagem { get; set; }
}

Answer 1

The problem was really the bind of the object. As my dto has a property called Message, the same could not do because everything practically calls Message (Controller, Dto).

I switched my Dto and now he’s like this:

    public class MensagemDto
    {
        public string Nome { get; set; }
        public string Email { get; set; }
        public string Telefone { get; set; }
        public string MensagemContato { get; set; }

        public string TipoVenda { get; set; }
        public string TipoImovel { get; set; }
        public string Cidade { get; set; }
        public string Tamanho { get; set; }
        public string CodigoCenture { get; set; }
        public string Preco { get; set; }

        public string Endereco { get; set; }

        public int TipoMensagem { get; set; }
    }

I could only notice after reading about the Binds in the link left by Tácio Brito, follows:

ASP.NET MVC Model Binding