MVC5 comment afficher une barre de chargement/cercle tournant/chargeur lorsqu'une fonction est en cours

Question

J'utilise une fonction dans MVC5/C# pour envoyer des emails. Cependant, la fonction prend un certain temps à s'exécuter avant de rediriger l'utilisateur vers une page indiquant "envoyé avec succès". Je veux donc afficher une fenêtre/barre de chargement pour dire à l'utilisateur d'attendre que la fonction soit terminée. Mais je suis confus quant à la façon de l'implémenter car la plupart des articles/questions que j'ai regardés impliquent seulement de mettre en œuvre ceci en chargeant une page au lieu d'exécuter une fonction. Tout aide ou code exemple est apprécié, merci.

EDIT: Voici le code que je utilise pour envoyer des emails

[HttpPost] 
[ValidateAntiForgeryToken] 
public async Task<ActionResult> sendEmails() 
{ 
    var body = "Mail Content"; 
    var message = new MailMessage(); 
    message.To.Add(new MailAddress("example.mail@companydomain.com")); // replace with valid value 
    message.From = new MailAddress("from.mail@companydomain.com"); // replace with valid value 
    message.Subject = "Mail Subject"; 
    message.Body = body; 
    message.IsBodyHtml = true; 

    using (var smtp = new SmtpClient()) 
     { 
      var credential = new NetworkCredential 
      { 
       UserName = "from.mail@companydomain.com", // replace with valid value 
       Password = "password" // replace with valid value 
      }; 
      smtp.Credentials = credential; 
      smtp.Host = "smtp.office365.com"; 
      smtp.Port = 587; 
      smtp.EnableSsl = true; 
      await smtp.SendMailAsync(message); 

     } 
    return RedirectToAction("Index"); 
} 

Answer 1

Dans votre fonction Ajax, en supposant que vous utilisez un pour appeler le point final qui envoie l'e-mail, appelez la fonction showLoading(). Vous devrez implémenter celui-ci, avec un bootstrap modal ou quelque chose de similaire. Ensuite, dans votre succès ou erreur de votre appel ajax, il suffit d'appeler votre fonction hideLoading, encore une fois, vous devrez mettre en œuvre.

Answer 2

S'il s'agit d'un appel ajax, vous pouvez suivre l'approche ci-dessous. Cela affichera une superposition en plein écran avec spinner.

Utilisez ci-dessous JQuery sur _Layout pour que cela fonctionne pour tous les appels ajax.

$(document).ajaxStart(function() { 
    $("#loading").show(); 
}); 
$(document).ajaxComplete(function() { 
    $("#loading").hide(); 
}); 

balisage Loading Div

<div id="loading" class="loading" style="display:none"></div> 

et CSS

/***loading screen***/ 
/* Absolute Center Spinner */ 
.loading { 
    position: fixed; 
    z-index: 999; 
    height: 2em; 
    width: 2em; 
    overflow:show; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

/* Transparent Overlay */ 
.loading:before { 
    content: ''; 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.3); 
} 

/* :not(:required) hides these rules from IE9 and below */ 
.loading:not(:required) { 
    /* hide "loading..." text */ 
    font: 0/0 a; 
    color: transparent; 
    text-shadow: none; 
    background-color: transparent; 
    border: 0; 
} 

.loading:not(:required):after { 
    content: ''; 
    display: block; 
    font-size: 10px; 
    width: 1em; 
    height: 1em; 
    margin-top: -0.5em; 
    -webkit-animation: spinner 1500ms infinite linear; 
    -moz-animation: spinner 1500ms infinite linear; 
    -ms-animation: spinner 1500ms infinite linear; 
    -o-animation: spinner 1500ms infinite linear; 
    animation: spinner 1500ms infinite linear; 
    border-radius: 0.5em; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; 
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; 
} 

/* Animation */ 

@-webkit-keyframes spinner { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 
@-moz-keyframes spinner { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 
@-o-keyframes spinner { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 
@keyframes spinner { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 
/***loading end****/ 

Answer 3

La réponse par Pratham semble être ce que vous voulez. Vous n'êtes pas loin de transformer cela en Ajax, ce qui signifie qu'au lieu de rediriger, vous pouvez afficher un message de succès vert sur la même page. Vous voulez regarder dans jQuery ajax. Alors au lieu d'une redirection la fonction que vous avez posté ci-dessus retournerait plutôt quelque chose comme

new JsonResult{ 
    Data = new object{status = "Success"} 
}