将按钮类标记为禁用

Question

我有一个像下面这样的标签

<a class="button button-3d button-rounded btn-success" asp-page-handler="Download">
   <i class="fa fa-download"></i>
</a>

使用处理程序：

public async Task<FileResult> OnGetDownloadAsync()
{
    return File(await export.ExportAsync(), MediaTypeNames.Application.Octet, fileName + ".xlsx");
}

export.ExportAsync 调用有时可能很长。所以我想在系统工作时禁用该按钮。我怎样才能做到这一点？有人可以帮帮我吗？

Answer 1

<a> 无法获取数据传输的状态。虽然点击后禁用，但数据请求完成后标签的状态无法修改。我建议你使用 ajax，因为它可以跟踪请求的状态。

<button onclick="tap()" id="mybtn" class="btn-primary ">click</button>
@section Scripts{ 
<script>
function tap() {
    $('#mybtn').attr("class", "disabled");

    var url = '/?handler=Download';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = "blob"; //  return type:blob
    xhr.onload = function (data, textStatus, request) {// finish request
        if (this.status === 200) {
            $('#mybtn').attr("class", "btn-primary");

            var blob = this.response;// get the return value
            var a = document.createElement('a');
            var fileName = xhr.getResponseHeader('Content-Disposition').split(";")[1].split("=")[1];
            a.download = fileName

            a.href = window.URL.createObjectURL(blob);
            a.click();
        }
    };

    // send request
     xhr.send();
}

</script>
}