I am using SmtpClient's Send method in ASP.NET to send email from a contact-us page. While the message is being sent, I want to show a loading image. More specifically, when a user presses the send button to send the email, the loading image will appear, and once the message is sent, the loading image will disappear. I know I can use onclick method to display the loading image. But how can I remove this image once the message is sent?
Add a comment
|
4 Answers
Encapsulate your button in an update panel.
You can use the updateprogress template to show a loading sign then.
<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>
If you are new to update panels take a look at this introduction to update panels
Comments
I would invoke your send method/action via ajax, and then on the success callback, hide the loading div.
You may also want to add an error handler to the ajax call, so that if the message can't be sent, the loading text won't just stay there.
Comments
If you are using 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!");
}
});
});
});
Assuming btnId is the ID of the button to send and loadingDiv is the ID of the div where you want to show loading message and after sending the email, you are returning a string "sent", if it is successful.
Comments
Best way to do so , if you're using ajax , is to invoke the loading image when the user clicks the button , and dispose it when the transaction is done.
Here's an example using 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();
});
