MVC5 Как отобразить загрузочный бар/вращающийся круг/загрузчик при запуске функции

Question

Я использую функцию в MVC5/C# для отправки электронной почты. Однако для выполнения этой функции требуется некоторое время, прежде чем перенаправить пользователя на страницу с сообщением «успешно отправлено». Поэтому я хочу отобразить окно загрузки/бар, чтобы сообщить пользователю подождать, пока функция не будет выполнена. Но я смущен тем, как реализовать это, поскольку большинство статей/вопросов, на которые я смотрел, включает только реализацию этого при загрузке страницы вместо запуска функции. Спасибо за помощь или пример кода, спасибо.

EDIT: Это код, я использую для отправки электронной почты

[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

В функции Ajax, если вы используете один, чтобы вызвать конечную точку, которая отправляет электронную почту, вызовите функцию showLoading(). Вам придется реализовать это, с загрузочным модальным или с чем-то похожим. Затем, в своем успехе или ошибке вашего вызова ajax, просто вызовите функцию hideLoading, чтобы снова вам нужно было реализовать.

Answer 2

Если это вызов ajax, вы можете следовать ниже. Это покажет полноэкранное наложение с помощью счетчика.

Используйте ниже JQuery в представлении _Layout, чтобы это работало для всех вызовов ajax.

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

Загрузка Div разметки

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

и 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

Ответ на Pratham выглядит о том, что вы хотите. Вы не за горами превращаете это в Ajax, а это означает, что вместо перенаправления вы можете показать сообщение об успешном зеленом на той же странице. Вы хотите посмотреть на jQuery ajax. Затем вместо перенаправления функция, которую вы указали выше, вместо этого вернет что-то вроде

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