Question 69528 in Ajax Question posted in
You can find the official documentation here.

how to implement spinner while data is being process – Jquery ajax

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?

var formData = new FormData();
formData.append('inputFile', $('.custom-file-input')[0].files[0]);
var _url = '@Url.Action("Upload", "Exposure")';
    debugger;
    $.ajax({
        url: _url,
        type: 'POST',
        data: formData,
        processData: false,  
        contentType: false, 
        
        success: function (result) {
        },
        error: function (jqXHR) {
        },
        complete: function (jqXHR, status) {
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post" asp-controller="Exposure" asp-action="Upload">

      <div class="custom-file">
        <input type="file" class="custom-file-input" name="InputFile" />
      </div>

      <button type="submit" id="upload" name="Submit" class="btn btn-info">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)
{

}
Tags:

2

Answers


  1. 0

    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 class="loader" style="display:none">
            <div class="col-md-12">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*/
    Login or Signup to reply.
  2. 0

    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();
        }
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search