c# - ASP.Net 模式不显示

Question

我有一个 ASP.Net 表单，当单击“提交”按钮时，它会发送一封电子邮件。这可能需要一些时间，所以我想添加一个处理模式，让用户知道正在发生某些事情。

现在我有模式显示，但它只在电子邮件发送失败后显示。我需要在单击按钮后立即显示此模式，然后在电子邮件操作已发送或发送失败后关闭。

如果失败，我的页面当前会显示一条错误消息。

我的 HTML 是

    <div class="form-group">
        <div class="col-xs-12">
            <div class="pull-right">
                <asp:LinkButton ID="pg3button" runat="server" OnClick="pg3button_Click" CssClass="btn btn-primary"><span aria-hidden="true" class="glyphicon glyphicon-ok"></span> Send & complete</asp:LinkButton>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">
                                <asp:Label ID="lblModalTitle" runat="server" Text="">Processing</asp:Label>
                            </h4>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblModalBody" runat="server" Text="">
                                <p class="text-center">IMAGE GOES HERE</p>
                            </asp:Label>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

我的提交按钮的 onclick 代码是

protected void pg3button_Click(object sender, EventArgs e)
{
    try
    {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
        upModal.Update();

        //Create the msg object to be sent
        MailMessage msg = new MailMessage();

        //Add your email address to the recipients
        msg.To.Add("test@test.co.uk");

        //Configure the address we are sending the mail from
        MailAddress address = new MailAddress("test@test.co.uk");
        msg.From = address;

        //Append their name in the beginning of the subject
        msg.Subject = "Enquiry";

        msg.Body = Label1.Text + " " + Session["pg1input"].ToString()
                    + Environment.NewLine.ToString() +
                    Label2.Text + " " + Session["pg1dd"].ToString()
                    + Environment.NewLine.ToString() +
                    Label3.Text + " " + Session["pg2"].ToString();

        //Configure an SmtpClient to send the mail.
        SmtpClient client = new SmtpClient("smtp.live.com", 587);
        client.EnableSsl = true; //only enable this if your provider requires it

        //Setup credentials to login to our sender email address ("UserName", "Password")
        NetworkCredential credentials = new NetworkCredential("test@test.co.uk", "Password10");
        client.Credentials = credentials;

        //MODAL CODE TO GO HERE

        //Send the msg
        client.Send(msg);

        Response.Redirect("/Session/pg4.aspx");
    }
    catch
    {
        //If the message failed at some point, let the user know
        lblResult.Text = "<div class=\"form-group\">" + "<div class=\"col-xs-12\">" + "There was a problem sending your request. Please try again." + "</div>" + "</div>" + "<div class=\"form-group\">" + "<div class=\"col-xs-12\">" + "If the error persists, please contact us." + "</div>" + "</div>";
    }
}

我还尝试将以下代码移到我的 try

之外

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
    upModal.Update();

我在想，如果有一种方法可以调用我的按钮点击，然后调用一个函数，其中包含我的电子邮件代码，但我是 ASP.Net 和 webforms 的新手

我所需要的只是在页面重定向(如果成功)或显示我的错误时单击并删除按钮的那一刻显示模态

Answer 1

只需使用 JavaScript 而不是服务器端代码进行模态弹出

当您单击按钮时添加 OnClinetClick 事件并使用类似 javascript 的函数

<asp:button id="pg3button" runat="server" OnClick="pg3button_Click" OnClientclick="ShowPopup();"></asp:button>

<script>
    function ShowPopup()
    {
       $('#myModal').modal();
    }
<script>

同时删除更新面板，它在这种情况下没有用。