MVC5如何在函数运行时显示加载条/旋转圈/加载器

Question

我正在使用 MVC5/C# 中的函数来发送电子邮件。但是，该函数在将用户重定向到显示“成功发送”的页面之前确实需要一段时间才能运行。所以我想显示一个加载窗口/栏来告诉用户等到函数完成。但是我对如何实现这一点感到困惑，因为我查看的大多数文章/问题只涉及在加载页面而不是运行函数时实现这一点。感谢任何帮助或代码示例，谢谢。

编辑：这是我用来发送电子邮件的代码

[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

Pratham 的答案似乎是关于您想要什么。您离将其转换为 Ajax 不远了，这意味着您可以在同一页面上显示绿色成功消息，而不是重定向。您需要查看jQuery ajax。然后，您在上面发布的函数不会重定向，而是返回类似

的内容

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

Answer 2

如果是ajax调用，那么你可以按照下面的方法进行操作。这将显示带有微调器的全屏覆盖。

在 _Layout 视图上使用下面的 JQuery，以便它适用于所有 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

在您的 Ajax 函数中，假设您使用一个来调用发送电子邮件的端点，请调用 showLoading() 函数。您将不得不使用引导模式或类似的东西来实现这个。然后，在您的 ajax 调用成功或错误时，只需调用您的 hideLoading 函数，您将不得不再次实现。