Wie fügt man "Loading icon" hinzu und dimmt den Hintergrund, wenn etwas im Backend läuft?

Question

Ich bin ein Neuling auf asp.net, Javascript.

Ich habe mehrere Ansichten in einer Seite in meiner ASP.NET-Anwendung, die mit MVC5 Razor-Engine implementiert wird. Jede Ansicht sieht wie ein Panel aus und es handelt sich um cshtml-Dateien. Nicht aspx. Jedes Panel verfügt über Schaltflächen zum Senden, die über die Option Ajax.BeginForm mit einer eigenen API verbunden sind.

Ich möchte wissen, wie kann ich ein Bearbeitungs/Lade-Symbol in der Mitte des Bildschirms hinzufügen und den Hintergrund abblenden, bis das Senden abgeschlossen ist und zurück zu meiner Ansicht?

@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> 
} 

Unterschrift des API wie folgt aussieht:

public PartialViewResult FilterReport(ReportFilterViewModel reportFilterViewModel) 

Bitte lassen Sie mich wissen, wie bei der Ausführung dieser API gleichzeitig ein Ladesymbol auf dem Bildschirm implementieren ??

Vielen Dank im Voraus.

Answer 1

Hier ist ein Beispielschnipsel. Dies sollten Sie

//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>