c# - Display a loading screen using anything -

i have operation takes while compute. able display something, kind of grey layer covering everything, or loading screen, while operation computes. frankly have no idea how it.

i'm building mvc app using mvc4, i'm beginning jquery , opened suggestions. how might that?

edit

here's sample of page i've been building:

<h2>load cards</h2>  <script type="text/javascript">     $(document).ready(function () {         $("form").submit(function (event) {             event.preventdefault();              alert("event prevented"); // code goes here             //display loading             $("#loadingdialog").dialog("open");              alert("dialog opened"); // never reaches here.              $.ajax({                 type: $('#myform').attr('method'),                 url: $('#myform').attr('action'),                 data: $('#myform').serialize(),                 accept: 'application/json',                 datatype: "json",                 error: function (xhr, status, error) {                     //handle error                     $("#loadingdialog").dialog("close");                 },                 success: function (response) {                     $("#loadingdialog").dialog("close");                 }             });             alert("ajax mode ended");         });     }); </script>  @using (html.beginform()) {     <div class="formstyle">         <div class="defaultbasestyle bigfontsize">             <label>                 select set import from:             </label>         </div>         <div class="defaultbasestyle basefontsize">             set: @html.dropdownlist("_setname", "--- select set")<br/>             </div>         <div id="buttonfield" class="formstyle">             <input type="submit" value="create list" name="_submitbutton" class="createlist"/><br/>         </div>     </div> } 

here's snippet of code javascript file:

$(document).ready(function () {     $(".createlist").click(function() {         return confirm("the process of creating cards takes time. " +             "do wish proceed?");     }); } 

as bonus (this not mandatory), i'd displayed after user has confirmed, if possible. else not mind replacing code.

edit

following rob's suggestion below, here's controller method:

[httppost] public jsonresult loadcards(string _submitbutton, string _cardsetname) {       return json(true); } 

and here's "old" actionresult method:

[httppost] public actionresult loadcards(string _submitbutton, string _setname) {     // work      populatecardsetddl();     return view(); } 

as of code never reaches json method. enter ajax method there (see updated code), don't know how make work out.

we hide main content, while displaying indicator. swap them out after loaded. jsfiddle

html

<div>     <div class="wilma">actual content</div>     <img class="fred" src="http://harpers.org/wp-content/themes/harpers/images/ajax_loader.gif" /> </div> 

css

.fred {     width:50px; } .wilma {     display: none; } 

jquery

$(document).ready(function () {     $('.fred').fadeout();     $('.wilma').fadein(); });