Question

我在ASP.NET中使用SmtpClient的{{1}}方法从联系我们页面发送电子邮件。在发送消息时，我想显示加载图像。更具体地，当用户按下发送按钮以发送电子邮件时，将出现加载图像，并且一旦发送消息，加载图像将消失。我知道我可以使用Send方法来显示加载图像。但是，如果发送邮件，我该如何删除此图像？

Answer 1

在更新面板中封装您的按钮。

您可以使用updateprogress模板显示加载标志。

<asp:updatepanel id="MailUpdatePanel" runat="server">    
<contenttemplate>


<asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="MailUpdatePanel" dynamiclayout="true">
      <progresstemplate>
            <img src="images/loading.gif">
        </progresstemplate>
 </asp:updateprogress>
<asp:Button ID="SendMail" runat="server" OnClick="SendMail_Click" Text="Mail" />
</contenttemplate>
</asp:updatepanel>

如果您不熟悉更新面板，请查看此introduction to update panels

Answer 2

我会通过ajax调用你的发送方法/动作，然后在success回调中隐藏加载div。

你可能还想在ajax调用中添加一个错误处理程序，这样如果无法发送消息，加载文本就不会停留在那里。

Answer 3

如果您使用的是jQuery

$("#btonId").click(function(e){
 e.preventDefault();

 $("#loadingDiv").html("Sending...").fadeIn(300,function(){
   $.post("yourserverpage.aspx", { data : somedata },function(response){
       if(response=="sent")
       {
         $("#loadingDiv").html("Email Sent")
       }
       else
       {
           $("#loadingDiv").html("error in sending!");
       }       
   });

 });
});

假设btnId是要发送的按钮的ID，loadingDiv是要显示加载消息的div的ID，并且在发送电子邮件后，您将返回一个字符串“sent” ，如果成功的话。

Answer 4

如果您使用ajax，最好的方法是在用户点击按钮时调用加载图片，并在交易完成后进行处理。
这是使用jquery ajax的一个例子：

HTML：

<input type='submit' ... onlick='$("#loading").fadeIn();'>

Js：

 $.post($('FORM').attr('action'),
        {{args you wanna pass}},
        function (data) {
            process_callback_data(data);
            $("#loading").fadeOut();
        });

想用javascript显示“正在加载”文字？

4 个答案: