Question

首先，我是一名学生，虽然这不是为了学校。我正试图为我教会的网站（http://fpcoakwood.azurewebsites.net）创建一个联系我们页面。我还没有发布联系页面，因为我正在尝试构建它。我使用Bootstrap / jQuery / ASP.NET构建网站。有一个视频页面使用ASP从我们的频道获取YouTube视频列表，然后从中填充选择的html元素，我让它工作，以便选择一个不同的视频将该视频加载到播放器而无需回发（虽然我希望我可以让后退按钮带我回到前一页，而不是先通过之前的视频循环播放。）

在此页面上，我的挑战是我尝试发送电子邮件。我有代码背后工作，以便我可以发送电子邮件，但我也尝试禁用发送按钮和淡入结果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功能，我可以发送电子邮件。它没有遇到任何问题。但是使用javascript函数，C＃函数中的断点永远不会被命中，因此它不会命中服务器。我想要的是能够在发送到服务器之前在js中进行验证，然后在没有回发的情况下发送到服务器，并让服务器向js发送消息，允许失败或成功消息div为fadeIn（）。

任何帮助都将非常感激。提前谢谢！

Answer 1

jquery函数在C＃代码之前运行并干扰它的结果。要做你想做的事，你可以在服务器端完成所有工作。你可以使用ajax来做到这一点。使用围绕控件的updatepanel和使用＆＃34;发送...＆＃34;的updateprogress;信息。捕获sendmessage（）结果，然后根据它显示#sendsuccess或#sendFailed。

Answer 2

我最后使用这篇文章中的答案（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没有找到该函数，但如果没有它并且返回false，则页面会进行回发。我不确定如何修复它，因为JS中的preventDefault（）并没有解决它，并且使用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;
    }           
}

发送信息到后面没有回发的代码

2 个答案: