I have an 'Upload' method and I want to display a spinner while data is processing. I'm using EPPlus 'IFormfile' to read the data from the input. I have no issue sending the InputFile to my upload method and i wonderin for alternative option where I can pass the 'InputFile' via ajax and pass the upload method as parameter instead using the form method"post" or any better approach on this?

$('#upload').click(function () {
    $('#load').show();

    $.ajax({
        url: '@Url.Action("Upload","ExposureController")',
        type: 'POST',
        cache: false,
        success: function(data) {
            $('#load').hide();
        }
    });
});

<form enctype="multipart/form-data" method="post" asp-controller="Exposure" asp-action="Upload">

  <div >
    <input type="file"  name="InputFile" />
  </div>

  <button type="submit" id="upload" name="Submit" >Upload</button>
  <div id="load" style="display:none">
    <img src="~/custom/loading.gif" width="500" height="500">                   
  </div>
</form>


<--Method-->
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload(IFormFile InputFile)
{

}

CodePudding user response：

beforeSend might solve your problem. It accepts a function so that you can toggle the loader while handling your request.

$('#upload').click(function () {
    $('#load').show();

    $.ajax({
        url: '@Url.Action("Upload","ExposureController")',
        type: 'POST',
        cache: false,
        beforeSend: function(){
          $('#load').show();
        }
        success: function(data) {
            $('#load').hide();
        }
    });
});

CodePudding user response：

Add this code in your _Layout.cshtml file

<script type="text/javascript">
$(document).ajaxStart(function () {
        showLoader();
    }).ajaxStop(function () {
        hideLoader();
    });

    function showLoader() {
        $('.loader').show();
    }

    function hideLoader() {
        $('.loader').hide();
    }

</script>

Add this code in your body tag in _Layout.cshtml

<div  style="display:none">
            <div >Please wait while loading your request</div>
        </div>

Add this code in your css file which is calling in _Layout.cshtml

/*Start: Loader Css*/
.loader {
    position: relative;
    width: 5.5em;
    height: 3.5em;
    margin: 0px;
    padding: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(102, 102, 102,0.8);
    z-index: 30001;
}

    .loader > div {
        position: fixed;
        top: 54%;
        color: black;
        font-size: larger;
        text-align: center;
        display: block;
    }

    .loader:before, .loader:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0.5em;
        height: 0.5em;
        border-radius: 0.25em;
        transform: translate(-50%, -50%);
    }

    .loader:before {
        animation: before 2s infinite;
    }

    .loader:after {
        animation: after 2s infinite;
    }

@keyframes before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }

    35% {
        width: 3.5em;
        box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
    }

    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
    }

    100% {
        box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
}

@keyframes after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }

    35% {
        height: 3.5em;
        box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
    }

    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
    }

    100% {
        box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
}
/**
 * Attempt to center the whole thing!
 */
/*End: Loader Css*/