Arquivo da tag: ajax

Como criar um formulário de contato em Ajax para Umbraco

Como criar um formulário de contato em Ajax para Umbraco

por Carlos Casalicchio

Ao criar uma página responsiva em Umbraco rapidamente encontra-se algumas restrições relativas ao que a atual oferece. E, apesar da comunidade já ter desenvolvido várias coisas úteis, algumas vezes não encontramos o que precisamos.

Por esse motivo acabei por desenvolvendo um formulário de email simples que possibilite o envio de e-mails em Ajax, sem Postback da página.

Para tanto, criei o formulário na página (está fora do escopo discutir o html envolvido na criação do formulário) como na figura:

Como criar um formulário de contato em Ajax para Umbraco

Neste artigo, mostro como criar um formulário de contato em Ajax para Umbraco. O código do formulário é este:

Html

div class="contact_form">
    <div id="note"></div>
    <div id="fields">
        <form id="ajaxSendmail" action="">
            <input type="text" name="name" value="" placeholder="Name" />
            <input type="text" name="email" value="" placeholder="Email" />
            <textarea name="message" id="message" placeholder="Message"></textarea>
            <div class="clear"></div>
            <input type="reset" class="contact_btn" value="Clear Form" />
            <input type="submit" class="contact_btn send_btn" value="Send" />
            <div class="clear"></div>
        </form>
    </div>
</div>

CSS

#note {
            position: relative;
        }

            #note .notification_ok {
                position: absolute;
                top: 0;
                margin-top: 20px;
                padding: 7px 10px;
                text-align: center;
                text-transform: uppercase;
                background: #444;
                font-family: 'Lato', sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #fff;
            }

            #note .notification_error {
                position: absolute;
                top: 115px;
                font-family: 'Lato', sans-serif;
                font-weight: 400;
                font-size: 16px;
                color: #f00;
            }

Script AJAX

$("#ajaxSendmail").submit(function () {

            $(this).children().each(function () {
                $(this).css("border", "");
            });
            $('#note').html("");

            if ($("input[name='name']").val() === "" || $("input[name='email']").val() === ""
                || $("input[name='message']").val() === "") {
                $("#ajaxSendmail").children().each(function () {
                    if ($(this).val() === "") $(this).css("border", "2px solid #FF0000");
                });

                $('#note').html('<div class="notification_error">All values are required</div>');
                return false;
            }
            else {

                var str = $(this).serialize();

                $.ajax({
                    type: "POST",
                    url: "/SendMail.aspx",
                    data: str,
                    success: function (msg) {
                        // Message Sent - Show the 'Thank You' message and hide the form
                        if (msg.trim() == 'OK') {
                            result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
                            $("#fields").hide();
                        } else {

                            result = msg;
                        }
                        $('#note').html(result);
                    }
                });
                return false;
            }
        });

Para fazer o formulário funcionar, é preciso criar uma página macro (em Razor) que faça o processo de enviar o email:

Razor

@inherits umbraco.MacroEngines.DynamicNodeContext
@{
	var name = Request["name"];
	var email = Request["email"];
	var message = Request["message"];

	string host = "relay-hosting.secureserver.net",
                subject = "Contact Received from Site",
                body = "<h3>{0}</h3><p>From: {1}<br /><br /> Email: {2} </p><p>Message: {3}</p>",
                from = "mailer@zueuz.com",
                to = "email@myemail.com";
            int port = 25;

           System.Net.Mail.SmtpClient SmtpServer = new System.Net.Mail.SmtpClient(host, port);
           System.Net.Mail.MailMessage mail = new System.Net.Mail.MailMessage();

            mail.From = new System.Net.Mail.MailAddress(from, "Corporate Mailer");
            mail.To.Add(new System.Net.Mail.MailAddress(to, "Admin"));
            mail.Subject = subject;
            mail.Body = string.Format(body, subject, name, email, message);
            mail.IsBodyHtml = true;

	try
            {

                SmtpServer.Send(mail);
                <text>OK</text>;
            }
            catch (Exception e)
            {
                <text>@e.Message</text>;
            }

}

E também uma página sendmail
Template

Webforms do Umbraco

<%@  Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

       <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
           <umbraco:macro alias="Sendmail" runat="server"></umbraco:macro>
       </asp:Content>

Com esses componentes o formulário já envia e-mails

contact_form_success

contact_form_error

Abstraindo Multiplas chamadas jQuery (Ajax)

Abstraindo Multiplas chamadas jQuery (Ajax)

Quando se tem várias chamadas AJAX (jQuery) na mesma página, ou projeto, fica mais fácil abstrair as chamadas de forma que as chamadas na página diminuam a complexidade e possibilidade de erro. Para tal, pode-se criar um método Generico de acordo com o tipo de submissão ajax. Neste caso, usa-se post:

  function  Post(method,  datanames,  data,  callback)  {
                        var  datastring  =  "";

                        var  size  =  $(datanames).size();

                        if  (datanames  !=  null  &&  data  !=  null)  {
                                if  (size  >  0)  {
                                        $(datanames).each(function  (index,  value)  {
                                                datastring  +=  value  +  ":'"  +  data[index]  +  "'";
                                                if  (index  <  size  -  1)  datastring  +=  ",";
                                        });

                                }  else  datastring  =  datanames  +  ":'"  +  data  +  "'";
                        }

                        var  response  =  $.ajax({
                                type:  "POST",
                                url:  page  +  method,
                                data:  "{  "  +  datastring  +  "  }",
                                contentType:  "application/json;  charset=utf-8",
                                dataType:  "json",
                                success:  function  (d)  {
                                        callback(d);
                                }
                        });
                }

Note que os argumentos precisam ser processados, por isso temos que fazer algumas validações no código.

Após a criação do método, é possível fazer uma chamada mais simples, de qualquer outra parte do projeto:

  
  //Nova  tabela  completa
                        $("#btnNovaTabela").click(function  ()  {
                                var  nome,  sobrenome,  pontos,  method;

                                nome  =  $("#txtNome").val();
                                sobrenome  =  $("#txtSobrenome").val();
                                pontos  =  $("#txtPontos").val();
                                method  =  "NovaTabela";

                                var  args  =  [nome,  sobrenome,  pontos];
                                var  argnames  =  ["nome",  "sobrenome",  "pontos"];

                                Post(method,  argnames,  args,  function  (response)  {
                                        $("#conteudo-dinamico-table").append(response.d);
                                        $("input").each(function  ()  {  $(this).val("");  });
                                });
                        });

Faça o download  do código deste exemplo

Faça o download  do código pronto para rodar (unzip em C:\)