Cấp bậc tác giả:

TRAINING

Hướng dẫn thực hiện loading trong ASP.NET MVC Core

Được viết bởi webmaster ngày 18/09/2023 lúc 07:37 PM
Hướng dẫn thực hiện loading trong ASP.NET MVC Core
  • 0
  • 1252

Hướng dẫn thực hiện loading trong ASP.NET MVC Core

Bước 1: Chèn thẻ loading - html
 <div class="processing-preview hidden">
</div>
Trong đó, hidden sử dụng để ẩn

Bước 2: Chèn CSS để ẩn hiện loadding và làm mờ màn hình
.processing-preview {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 32px;
    height: 32px;
    background: url(../images/loading.gif) center no-repeat;
    background-size: contain;
}

.submit-progress-bg {
    background-color: lightgray;
    opacity: .5;
}

Chú ý: Kiếm ảnh loadding.gif chèn vào thư mục tương ứng
Bước 3: Gọi hàm javascript tại button cần thực thi
<input type="submit" onclick="return DisplayProgressMessage(this, 'Searching...');"  class="btn btn-danger" value="Tìm kiếm" />
Bước 4: Viết hàm Javascript để xử lý sự kiện click
 
<script type="text/javascript">
        function DisplayProgressMessage(ctl, msg) {
            //if use the submit button, you can use event.preventDefault to prevent the default submit form behavior.
            event.preventDefault();
            // Turn off the "Save" button and change text
            $(ctl).prop("disabled", true).val(msg);
            // Gray out background on page
            $("body").addClass("submit-progress-bg");
            // Wrap in setTimeout so the UI can update the spinners
            $(".processing-preview").removeClass("hidden");
            //submit the form.
            setTimeout(function () {
                $("form").submit();
            }, 5000);
            return true;
        }
    </script>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML