Null object with jquery ajax MVC3

Asked

Viewed 78 times

0

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:3274-1710">
                                @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; }
}
  • Hello, I haven’t tested it here, and nor have I ever done the creation of an object the way it’s doing in function Obtaindate, but it wouldn’t be the fact that it’s creating the whole object within a string?

  • Hi @Táciobrito I believe that if it was this would not work in the other form as well. This kind of object I create for all the requisitions I’ve made so far. In the browser devtools Network, it shows the object converted to JSON normally. When it does not do so, JSON.stringfy is used.

  • Got it, I never did it that way. Anyway, research on the Bind and try to use in your controller: public Actionresult Send message(Bind Message)

  • @This gives compilation error. Does not recognize Bind. Some library I should use?

  • how is the message?

  • 1

    I use it in . Net MVC, this link has a better explanation: link

  • @Lucasmiranda updated the question with Dto.

  • tries to change its date in ajax to Json.stringfy({ messaging})

  • 1

    @Taciiobrito your link helped me find the answer.

Show 4 more comments

1 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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.