如何在 ASP.NET 中动态更改按钮文本

Question

I want to change my button text dynamically using c# in asp.net. I also tried dynamic javascript alert popup, however it also shows after mail sent.

Currently i have;

 protected void btnSend_Click(object sender, EventArgs e)
    {
        btnSend.Text = "Sending.."; // Changing Button text
    ScriptManager.RegisterStartupScript(btnSend,GetType(), "Javascript", "javascript:helloWorld(); ", true); // Also popup javascript test output

         using (MailMessage mm = new MailMessage("info@oratify.com", "info@oratify.com"))
        {

            mm.Subject = "Dropped Mails";
            string body = Request.Form["email"];
            body+="<br>" + "<br>" + Request.Form["message"];
            mm.Body = body;
            mm.IsBodyHtml = true;
            SmtpClient smtp = new SmtpClient();
            smtp.Host = "smtp.office365.com";
            smtp.EnableSsl = true;
            NetworkCredential NetworkCred = new NetworkCredential("info@oratify.com", "Bensezer10.");
            smtp.UseDefaultCredentials = true;
            smtp.Credentials = NetworkCred;
            smtp.Port = 587;
            smtp.Send(mm);
        }
   }

and in aspx side;

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <section class="cid-qKKEwJNZ1Q mbr-fullscreen mbr-parallax-background" id="header15-2p">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>

                                        <div>
                                            <table style="width: 100%; text-align: center; margin-top: 0px; height: 78px;">
                                                <tr>
                                                    <td style="text-align: center;">
                                                        <asp:Button ID="btnSend" runat="server" Text="SEND" Width="200px" BorderStyle="None" Height="60px" Font-Names="SF Pro Display" Font-Size="14pt" CssClass="ButtonClass" OnClick="btnSend_Click" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSend" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </section>
    </form>

Well, it changes the buttontext after sending mail function is completed which is 3 second later.

How can i make this dynamically?

Answer 1

You're changing the button text while the server is still processing the request. Only when the email has sent does the client receive the server's response and can actually display the results.

What you'd need to do is use JQuery/Javascript to change the button text before initiating a post back to the server via an ajax request and then update the text back once the server has finished sending the emails.

There's a much more detailed How To (as there are a fair few steps involved), to be found here .

Answer 2

You need to use javascript to update the button text. In its simplest form, add this OnClientClick="this.value = 'Sending....';" to your button.

<asp:Button ID="btnSend" OnClientClick="this.value = 'Sending....';" runat="server" Text="SEND" Width="200px" BorderStyle="None" Height="60px" Font-Names="SF Pro Display" Font-Size="14pt" CssClass="ButtonClass" OnClick="btnSend_Click" />

And in the code-behind:

protected void btnSend_Click(object sender, EventArgs e)
{
    using (MailMessage mm = new MailMessage("info@oratify.com", "info@oratify.com"))
    {
        // do your things...
    }
    btnSend.Text = "Sent";
}

Answer 3

In Chrome, I've seen that this.value = '...'; does not work when the page is rendered by IIS Express in Visual Studio 2019. In my case, what worked is:

<asp:LinkButton ID="myButton" runat="server" OnClick="doSomething()" OnClientClick="this.style.background='#36648B';this.text='Wait...';">Click!</asp:LinkButton>