ASP.NET Core 3.0：加载 GIF

Question

I'm trying to insert a loading GIF into my project. I'm using ASP.NET Core 3.0 with Razor Pages, and I understand that I have to use a little bit of Javascript or Ajax to do this. I'm new to all of this, so I don't really understand how to implement this, but I've given it a shot. When I load the page, the GIF is there immediately, but the issue is that I only want it to show up when I click my submit button.

This is the code I have for my Upload.cshtml:

@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>

When I run the program and don't click Upload File, this is what I get:

How can I make this GIF only appear when I hit Upload File? The program goes to the OnPost() function when I click 'Upload File' because it has to run a large algorithm with the given file and I want the GIF there for when that program runs.

Answer 1

Your jquery script targets a class loadingImage but the element has that as id. Use $('#loadingImage') instead.