Отправить информацию в код без обратной передачи

Question

Во-первых, я студент, хотя это не для школы. Я пытаюсь создать контактную страницу для сайта моей церкви (http://fpcoakwood.azurewebsites.net). Я еще не опубликовал контактную страницу, поскольку я пытаюсь ее создать. Я использую Bootstrap/jQuery/ASP.NET для создания сайта. Существует страница видео, которая использует ASP для получения списка видеороликов с YouTube для нашего канала, а затем заполняет элемент select html, и я работаю так, чтобы выбор другого видео загружал это видео в плеер без обратной передачи (хотя я бы хотел, чтобы я сделал кнопку «Назад», вернул меня на предыдущую страницу, вместо того, чтобы сначала ездить на велосипеде по предыдущим видео).

На этой странице моя задача состоит в том, что я пытаюсь отправить электронное письмо. У меня есть код для работы, так что я могу отправить электронное письмо, но я также пытаюсь отключить кнопку отправки и fadeIn в результате div, который будет показывать либо успех, либо отказ отправить электронное письмо. Проблема в том, что, поскольку происходит обратная передача, страница перезагружается, и я теряю отключение кнопки и отображение статуса. Вот некоторые из кода, который я до сих пор:

HTML:

<div class="form-group"> 
<asp:Button class="btn btn-success" ID="sendMail" OnClick="sendMail_Click" OnClientClick="sendMail(); return false;" runat="server" UseSubmitBehavior="false" Text="Send Message" /> 
</div> 

<div id="sendSuccess" runat="server">Success!</div> 
<div id="sendFailed" runat="server">Unable to send message. Please try again later.</div> 

JS:

$("#sendMail").click(function (event) { 
     event.preventDefault(); 
     $("#sendSuccess").fadeOut(); 
     $("#sendFailed").fadeOut(); 
     $("#sendMail").attr("disabled", true); 
     $("#sendMail").attr("text", "Sending..."); 
     return true; 
    }); 

C#:

protected void sendMail_Click(object sender, EventArgs e) 
     { 
      //sendMail.Enabled = false; 
      //sendMail.Text = "Sending..."; 
      SendMessage(); 
     } 

Если я избавлюсь от яваскрипта функции , Я могу отправить электронное письмо. Это без проблем. Но с функцией javascript точка останова в функции C# никогда не попадает, поэтому она не попадает на сервер. Я хочу, чтобы иметь возможность проверять в js перед отправкой на сервер, а затем отправлять на сервер без обратной передачи и отправлять сервер сообщения js, позволяя fadeIn() для отказа или сообщения об успешном завершении.

Любая помощь будет ОЧЕНЬ высоко оценена. Заранее спасибо!

Answer 1

В итоге я использовал ответ в этом сообщении (How to call code behind method from a javascript function?), чтобы сделать то, что я хотел сделать. Конечно, это могло быть сделано с ответом Филипе, но на данный момент я уже пил из пожарного шланга, пытаясь узнать, что я могу узнать, так что это было легче для меня, поскольку у меня уже есть полное понимание всех части.

Вот мой HTML:

<form runat="server"> 

       <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> 

        <div class="col-md-8 col-md-offset-2" runat="server"> 
         <div class="form-group"> 
          <label for="userName">Your name (requrired):</label> 
          <input type="text" class="form-control" id="userName" runat="server" /> 
         </div> 

         <div class="form-group"> 
          <label for="email">Email address (required):</label> 
          <input type="email" class="form-control" id="email" runat="server" /> 
         </div> 

         <div class="form-group"> 
          <label for="message">Message:</label> 
          <textarea class="form-control" id="message" rows="5" runat="server"></textarea> 
         </div> 

         <div class="form-group"> 

          <asp:Button class="btn btn-success" ID="sendMail" runat="server" OnClientClick="sendMail(); return false;" UseSubmitBehavior="false" Text="Send Message" /> 
         </div> 

        <div id="sendSuccess" runat="server">Your message has been sent. Thank you for contacting First Pentecostal Church of Oakwood. You are important to us!</div> 
        <div id="sendFailed" runat="server">Unable to send message. Please try again later. You are important to us!</div> 

        </div> 

       </form> 

Существует ошибка в HTML, так как OnClientClick не находит функцию, но без нее и возвращения ложного, страница делает постбэк. Я не уверен, как это исправить, поскольку preventDefault() в JS не решает его, и использование UseSubmitBehavior само по себе тоже не делает этого. Но это работает, хотя это проявляется как ошибка в инструментах разработчика в браузере.

Вот CSS:

#sendSuccess, 
#sendFailed { 
    display:none; 
    border: 1px solid black; 
    border-radius: 5px; 
    padding: 5px; 
} 

#sendSuccess { 
    background-color: rgba(147, 197, 75, .7); 
} 

#sendFailed { 
    background-color: rgba(201, 48, 44, .7); 
} 

Вот JavaScript:

//Set up event handler for send message contact page button 
    $("#sendMail").click(function (event) { 
     event.preventDefault(); 
     sendMail(); 
    }); 
//above is in the $(document).ready function 


function sendMail() { 
    $("#sendSuccess").fadeOut(); 
    $("#sendFailed").fadeOut(); 
    $("#sendMail").prop("value", "Sending..."); 
    $("#sendMail").attr("disabled", true); 

    var name = $("#userName").val(); 
    var email = $("#email").val(); 
    var msg = $("#message").val(); 

    PageMethods.SendMessage(name, email, msg, onSuccess, onError); 

} 

function onSuccess(result) { 
    if (result) { 
     $("#sendSuccess").fadeIn(); 
     $("#userName").prop("value", ""); 
     $("#email").prop("value", ""); 
     $("#message").prop("value", ""); 
     $("#sendMail").prop("value", "Send Message"); 
     $("#sendMail").attr("disabled", false); 
    } 
    else { onError(result); } 
} 

function onError(result) { 
    $("#sendFailed").fadeIn(); 
    $("#sendMail").prop("value", "Try Again"); 
    $("#sendMail").attr("disabled", false); 
} 

А вот C#:

[System.Web.Services.WebMethod()] 
public static bool SendMessage(string user, string email, string msg) 
{ 
    string to = "xxxxxxxxx@outlook.com"; 
    string from = "xxxxxxxxxx@outlook.com"; 
    string subject = "Message from OakwoodFPC.org Contact Page"; 
    string body = "From: " + user + "\n"; 
    body += "Email: " + email + "\n"; 
    body += msg; 

    MailMessage o = new MailMessage(from, to, subject, body); 
    NetworkCredential cred = new NetworkCredential("xxxxxxxxxx@outlook.com", "password"); 
    SmtpClient smtp = new SmtpClient("smtp.live.com", 587); 
    smtp.EnableSsl = true; 
    smtp.Credentials = cred; 

    try 
    { 
     smtp.Send(o); 
     return true; 
    } 
    catch (Exception) 
    { 
     return false; 
    }   
}  

Answer 2

Функция jquery работает до кода C# и мешает ее результату. Чтобы сделать то, что вы хотите, вы можете выполнять всю работу на стороне сервера. Вы можете использовать ajax для этого. Используйте панель обновления вокруг элементов управления и updateprogress с сообщением «отправка ...». Захватите результат sendmessage(), а затем покажите #sendsuccess или #sendFailed в соответствии с ним.