Display Loading Image (spinner) when AJAX call in Progress using jQuery in ASP.Net Core MVC

tex
 
on Dec 05, 2021 09:44 PM
Sample_175010.zip
6286 Views

I have an ajax call and while the API is executed I want to show loading on screen (please wait ..)

I'm using ASP.Net CORE

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Dec 06, 2021 03:09 AM

Hi tex,

Use ajax beforeSend and complete event.

Refer below sample.

Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public JsonResult AjaxMethod()
    {
        return Json(new { Status = "success", Time = DateTime.Now.ToString() });
    }
}

View

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        .modal {
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.8;
        }

        .center {
            z-index: 1000;
            margin: 10px auto;
            padding: 10px;
            width: 105px;
            background-color: White;
            border-radius: 10px;
            filter: alpha(opacity=100);
            opacity: 1;
            -moz-opacity: 1;
        }

        .center img {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <input type="button" value="Submit" id="btnSubmit" />
    <hr />
    <span id="lblTime"></span>
    <div class="modal" style="display: none">
        <div class="center">
            <img alt="" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/images/bx_loader.gif" />
        </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnSubmit').on('click', function () {
                $.ajax({
                    type: 'POST',
                    url: '/Home/AjaxMethod',
                    data: '{}',
                    contentType: 'application/json',
                    beforeSend: function (xhr) {
                        $(".modal").show();
                    },
                    success: function (response) {
                        if (response.Status === "success") {
                            $("#lblTime").html(response.Time);
                        }
                    },
                    complete: function () {
                        $(".modal").hide();
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>

Screenshot