バックエンドで何かが処理されているときに「アイコンをロードする」と背景を薄暗くする方法を教えてください。

Question

私はasp.net、javascriptの初心者です。

MVC5 Razorエンジンを使用して実装されているASP.NETアプリケーションのページに複数のビューがあります。各ビューはパネルのように見え、cshtmlファイルです。 aspxではありません。各パネルには、Ajax.BeginFormオプションを使用して独自のAPIに接続されているボタンが個別に送信されます。

[処理/読み込み]アイコンを画面の中央に追加して、送信が完了して自分のビューに戻されるまで背景を薄暗くするにはどうすればいいですか？ APIの

@using (Ajax.BeginForm("FilterReport", "Report", new AppAjaxOptions() 
{ 
    ExtendOnSuccess = "ReportView.onFilteringCompleted(data)", 
    UpdateTargetId = "filterContent", 
})) 
{ 

//some <div> .... </div> here 

<button type="submit" class="btn btn-primary">@LanguagesFacade.GetValue(DictionaryKey.Filter)</button> 
} 

署名は次のようになります。

public PartialViewResult FilterReport(ReportFilterViewModel reportFilterViewModel) 

私は同時に、このAPIの実行中に画面上のローディングアイコンを実装する方法を教えてください？

ありがとうございます。

Answer 1

ここにサンプルスニペットがあります。これは役立つはずあなた

//for demo 
 
$('button').on('click', function() { 
 
    showLoadingIcon(); //call this when you want to show loading icon 
 
}); 
 

 
//----------------------------Core functionality----------------------------------// 
 
function showLoadingIcon() { 
 
    var loadingImage = '<div class="loading-div">' + 
 
    '<span class="loading-icon " style="opacity:none;">' + 
 
    '<i class="fa fa-refresh fa-2x fa-spin" style="margin-left: 47px;"></i>' + 
 
    '</span></div>'; 
 

 
    $('body').append(loadingImage); 
 
} 
 

 
function hideLoadingIcon() {  //call this when you want to hide loading icon 
 
$('#loading_icon_div').remove(); 
 
}

div { 
 
    background-color: pink; 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 

 
.loading-div { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    z-index: 9999; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
.loading-icon { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: -50px 0px 0px -50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button>show loading icon..</button> 
 
    some random text goes here.. 
 
</div>