Javascript ASP.NET Core 3.0:加载GIF
我正在尝试将正在加载的GIF插入到我的项目中。我将ASP.NETCore3.0与Razor页面一起使用,我知道我必须使用一点Javascript或Ajax来实现这一点。我对这一切都不熟悉,所以我不太明白如何实现这一点,但我已经尝试过了。当我加载页面时,GIF会立即出现,但问题是我只希望在单击“提交”按钮时显示GIF 这是我的Upload.cshtml的代码:Javascript ASP.NET Core 3.0:加载GIF,javascript,html,jquery,ajax,razor,Javascript,Html,Jquery,Ajax,Razor,我正在尝试将正在加载的GIF插入到我的项目中。我将ASP.NETCore3.0与Razor页面一起使用,我知道我必须使用一点Javascript或Ajax来实现这一点。我对这一切都不熟悉,所以我不太明白如何实现这一点,但我已经尝试过了。当我加载页面时,GIF会立即出现,但问题是我只希望在单击“提交”按钮时显示GIF 这是我的Upload.cshtml的代码: @page @model CustomerPageTest.Pages.Assessment.UploadModel @{ Vie
@page
@model CustomerPageTest.Pages.Assessment.UploadModel
@{
ViewData["Title"] = "Upload";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="../Scripts/jquery-1.12.4.js"></script>
<script src="../Scripts/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$('.loadingImage').hide();
$("#buttonSubmit").click(function (event) {
$('.loadingImage').show();
});
});
</script>
<div class="col-md-offset-2 justify-content-center">
<h1 style="color:yellowgreen">3) Import RVTools Spreadsheet (.xls or .xlsx)</h1>
</div>
<br />
<br />
<div class="col-md-offset-3">
<form enctype="multipart/form-data" method="post">
<dl>
<dd>
<input asp-for="@Model.FormFile" type="file" class="text-light">
<span asp-validation-for="@Model.FormFile"></span>
<input asp-for="@Model.CustomerId" type="hidden" />
<span asp-validation-for="@Model.CustomerId"></span>
<input asp-for="@Model.AssessmentId" type="hidden" />
<span asp-validation-for="@Model.AssessmentId"></span>
</dd>
<dd>
<img id="loadingImage" src="~/css/Images/ajax-loader.gif" alt="Loading ..." style="display: none;" />
</dd>
</dl>
<dl>
<dd>
<button id="buttonSubmit" asp-page-handler="Upload" class="btn btn-dark" type="submit">Upload File</button>
</dd>
</dl>
</form>
</div>
@page
@模型CustomerPageTest.Pages.Assessment.UploadModel
@{
ViewData[“标题”]=“上传”;
}
$(文档).ready(函数(){
$('.loadingImage').hide();
$(“#按钮提交”)。单击(函数(事件){
$('.loadingImage').show();
});
});
3) 导入RVTools电子表格(.xls或.xlsx)
上载文件
当我运行程序且未单击“上载文件”时,我得到的结果如下:
如何使此GIF仅在点击“上载文件”时显示?当我单击“上载文件”时,程序将转到OnPost()函数,因为它必须对给定的文件运行一个大型算法,并且我希望在该程序运行时有GIF。您的jquery脚本以类loadingImage为目标,但元素的id为。使用$(“#loadingImage”)相反。只是尝试了一下,但不幸的是,程序没有改变