Sering kali kita mengeksekusi logika yang membutuhkan waktu yang cukup lama pada saat mensubmit sebuah form. secara default form yang disubmit akan menampilkan loading pada bagian tab saja, hal ini tentunya tidak akan diperhatikan oleh user yang awam.
Berikut merupakan cara menampilkan loading screen pada saat form telah disubmit agar dapat menginfokan ke user bahwa sedang ada proses yang sedang berjalan.
Yang digunakan adalah ASP.net C#
Buat sebuah function javascript pada bagian footer halaman :
<script type="text/javascript">
function ShowLoading(e) {
var div = document.createElement('div');
var img = document.createElement('img');
img.src = 'loading_bar.GIF';
div.innerHTML = "Loading...<br />";
div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
div.appendChild(img);
document.body.appendChild(div);
return true;
// These 2 lines cancel form submission, so only use if needed.
//window.event.cancelBubble = true;
//e.stopPropagation();
}
</script>
lalu pada saat form submit panggil function tersebut.
<form runat="server" onsubmit="ShowLoading()">
</form>
untuk razor mvc code
@using (Html.BeginForm("ActionMethod", "ControllerName", FormMethod.Post, new { onsubmit = "ShowLoading()" }))
Refrensi : https://stackoverflow.com/questions/27026323/show-loading-gif-after-clicking-form-submit-using-jquery/27026355
