Отправка электронной почты без обновления страницы

Question

У меня есть страница с формой контакта, расположенной внизу.

Что я пытаюсь достичь - отправьте электронное письмо с сайта без обратной связи, которое перезагрузит всю страницу и переместит клиента в начало страницы (форма «контакт-мы» находится внизу).

Вместо этого - клиент нажмет кнопку отправки, а затем появится какой-то жест, по которому была отправлена ​​почта.

Я знаю, как отправлять почту с помощью обычного подхода, что я пытаюсь выполнить, это отправить его с клиентской стороны с помощью jquery.ajax - это лучший способ для этого сценария?

Что я сделал, что стороне клиента:

$('#btnSubmit').on('click', function() {  
var fullName = $('#txt_fullName').val(); 
var fromEmail = $('#txt_email').val(); 
var comments = $('#txtArea_message').val(); 
var fromPhone = $('#txt_phone').val(); 
var data = "{'name': '" + name + "', 'fromEmail': '" + 
     fromEmail + "', 'comments': '" + comments + "', 'fromPhone': '" + fromPhone + "'}"; 

if (contactus == 0) { 
    $.ajax({ 
     type: "POST", 
     url: "Default.aspx/sentMail", 
     data: data, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json" 
    }) 
}else if (contactus == 1) 
    return false; 
}) 

В стороне сервера у меня есть это:

tring sender_email = txt_email.Text; 
string sender_fullName = txt_fullName.Text; 
string sender_phone = txt_phone.Text; 
string sender_message = txtArea_message.Text; 

MailMessage MyMailMessage = new MailMessage(); 
MyMailMessage.From = new MailAddress("XXX@gmail.com", "Site"); 
MyMailMessage.To.Add("XXX@gmail.com"); 
MyMailMessage.Subject = "messge from site"; 
MyMailMessage.Body = "message"; 
MyMailMessage.IsBodyHtml = true; 
try 
{ 
    SmtpClient SMTPServer = new SmtpClient(); 
    SMTPServer.Send(MyMailMessage);   
} 

catch (Exception ex) 
{ 

} 

Это не работает - и я не знаете (почему я могу отлаживать это с помощью Google chrome?)

Answer 1

Рассмотрите возможность использования jquery для прокрутки вверху страницы aft er ajax-вызов завершен.

$.ajax({url: '/'}).done(function(data) {window.scrollTo(0,0);}); 

Answer 2

http://jsfiddle.net/uptownapps/QBvZu/

В этом примере, моя форма имеет id="contactForm", который, как я к нему доступ с JQuery.

// We are looking to intercept the "submit" event on the form 
    // whether that comes from a user clicking the "submit" button 
    // or hitting "enter" on their keyboard while on a form element. 
    $(document).on('submit', '#contactForm', function(event) { 

     // We are going to handle the interaction with the server ourselves 
     // so we want to prevent the browser from performing the default action 
     event.preventDefault(); 

     // serialize() on a from element will create the query string data 
     // like you would typically see in a GET request 
     // (i.e. "name=UptownApps&email=support@getuptownapps.com" etc.) 
     var formData = $('#contactForm').serialize(); 

     $.ajax({ 

      // Send the request to the same place the form was originally going to 
      url: $('#contactForm').attr('action'), 

      // In this case I'm using POST. 'GET' is also acceptable. 
      type: 'POST', 

      // This callback function fires after successfully communicating 
      // with the server 
      success: function(data) { // data contains server's response 

       $('#contactForm').slideUp(400); // Hide the form 
       $('#successMessage').slideDown(400); // Show the success message 

      }, 

      // Error callback fires if there was an issue communicating with the server 
      // Or a non-200 HTTP status is returned 
      error: function(data) { // data contains server's response 

       $('#errorMessage').slideDown(400); // Show the error message 

      } 
     }); 

    }); 

Answer 3

Общий ответ будет то, что вы бы добиться того, что с помощью AJAX и поэтому вы можете исследовать Microsoft ASP.NET AJAX. Однако, поскольку вы, как правило, понимаете это, но управляетесь по неправильному пути, вот несколько заметок.

Вы размещаете на странице Default.aspx/sentMail, что я не совсем уверен в том, как IIS обрабатывает его, но насколько я могу судить, он откроет Default.aspx и проигнорирует отправленную часть (она не отправит ее с параметр POST sentMail, поскольку он выглядит так, как вы ожидаете. Если вы хотите использовать этот подход, вам нужно будет отправить сообщение в Default.aspx (или любую другую страницу), но вам нужно будет установить параметр data для $.ajax как отметили here (найдите страницу для POST). Затем вместо отправленного вами кода на стороне сервера вам нужно будет получить переменные от POST, а не от элементов управления. Однако это не очень эффективный способ сделать этот тип поэтому я не буду вдаваться в подробности об этом.

Лучшим способом было бы сделать веб-сервис с помощью метода SendEmail и использовать его с использованием Microsoft ASP.NET AJAX. Это было бы намного проще, быстрее и чище.

Я также хотел бы добавить две заметки.

1. Вы писались на стороне клиента, вы используете $('#btnSubmit'). Если вы используете прогностическое именование для элемента управления (кнопки), это нормально, но это не поведение по умолчанию, поэтому, если вы не знаете, вы должны использовать $('#<%= btnSubmit.ClientID %>') для идентификатора клиента элемента управления.
2. Если вы открываете веб-службу для отправки электронных писем, каждый может просто позвонить ей, когда захочет, сколько раз они хотят, чтобы вы открыли все виды атак. Я предлагаю вам выполнить какую-либо проверку, возможно, сделать переменную (возможно, GUID) на странице, которую вы храните в сеансе, и сделать метод веб-службы проверкой, действительно ли отправленный параметр находится на сеансе перед отправкой почты. Обратите внимание, что вам нужно будет добавить атрибут EnableSession=true, как описано here, чтобы иметь возможность доступа к сеансу из веб-метода.

Answer 4

Ваш клиент Javascript кажется хорошо, но было бы лучше, если бы вы сопоставить свойства объекта, как это на C#:

public class Mail 
{ 
public string FullName {get; set;} 
public string FromEmail {get; set;} 
public string ToEmail{get; set;} 
public string Comments {get; set;} 
public string FromPhone {get; set;} 
} 

И изменить JQuery для этого (карты свойств класса почты на ваш Просмотр ввода контента):

$('#btnSubmit').on('click', function() {  
     var fullName = $('#txt_fullName').val(); 
     var fromEmail = $('#txt_email').val(); 
     var comments = $('#txtArea_message').val(); 
     var fromPhone = $('#txt_phone').val(); 
     var data = { 
        FullName: fullname, 
        FromEmail: fromEmail, 
        Comments: comments, 
        FromPhone: fromPhone, 
        }; 

     if (contactus == 0) { 
      $.ajax({ 
       type: "POST", 
       url: "Default.aspx/sentMail", 
       data: data, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json" 
      }) 
     }else if (contactus == 1) 
      return false; 
    }); 

и ваша функция на стороне сервера должен быть WebMethod и быть, как показано ниже:

[WebMethod] 
public string SentMail(Mail mail) 
{ 
    //use properties of Class Mail to send 
    MailMessage MyMailMessage = new MailMessage(); 
    MyMailMessage.From = new MailAddress("XXX@gmail.com", "Site"); 
    MyMailMessage.To.Add(mail.To); 
    MyMailMessage.Subject = mail.Comments; 
    MyMailMessage.Body = mail.Comments; 
    MyMailMessage.IsBodyHtml = true; 
    try 
    { 
     SmtpClient SMTPServer = new SmtpClient(); 
     SMTPServer.Send(MyMailMessage);   
    } 

    catch (Exception ex) 
    { 

    } 
    return ""; 
}