在ASP.NET MVC FileResult上运行JavaScript

Question

我想在表单提交上切换一个微调器，该表单提交在经过一些处理后从服务器返回FileResult。但是，由于我不刷新页面，因此使用我当前的实现不会自动禁用微调器。

如何通过JavaScript检测成功响应以正常下载我的文件，并在生成后禁用微调器？

我想避免使用涉及刷新页面或使用JavaScript下载文件的环绕方法，如果可能的话。

以下是我的网页的修改版本作为代码段。在我的实际代码中，我使用@using (Html.BeginForm())而不是原始HTML表单。

    window.onload = function() {
      $("form").on("submit", function() {
        startSpinner();
      });
    };

    window.onbeforeunload = function() {
      stopSpinner();
    };

    function startSpinner() {
      $(".overlay").css("display", "initial");
    }

    function stopSpinner() {
      $(".overlay").css("display", "none");
    }

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.loader {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
}
.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.circular {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" style="display: none;">
  <div class="loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" />
    </svg>
  </div>
</div>

<!-- Some fields... -->
<form>
  <button type="submit" class="btn btn-primary" id="analysis-submit-btn">Submit</button>
</form>

典型的控制器方法：

var myPackage = myFunction(myParameters);
var myFileName = "filename";
return File(myPackage, MediaTypeNames.Application.Octet, myFileName);

Answer 1

由于您正在执行完整的POST，而不是ajax调用并且正在返回文件，而不是刷新视图，因此您可能会受到限制。

看起来有人想出了一个相当创新的解决方案来解决这个问题：

http://dejanstojanovic.net/jquery-javascript/2015/march/detect-when-file-download-request-is-finished-with-jquery/

它涉及从返回文件的控制器设置cookie。然后，当您提交表单时，您开始检查是否有该cookie。如果您有该cookie，则表示请求已发送给用户。