javascript - 在 ASP.NET MVC 上运行 JavaScript FileResult

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>

典型的 Controller 方法:

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

Answer 1

由于您正在执行完整的 POST，而不是 ajax 调用，并且返回文件，而不是刷新 View ，因此您可以做的事情在某种程度上受到限制。

看起来有人针对这个问题提出了一个相当创新的解决方案:

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

它涉及从返回文件的 Controller 设置一个 cookie。然后，当您提交表单时，您开始检查您是否拥有该 cookie。如果您有该 cookie，则意味着请求已发送给用户。