title: Display a loading screen using anything
body: <p>I sometimes have operation that takes a while to compute. I would like to be able to display something, like a kind of grey layer covering everything, or a loading screen, while the operation computes. But I frankly have no idea how to do it.</p>
  
  <p>I'm building an MVC app using MVC4, I'm beginning with jQuery and opened to any suggestions. How might I do that?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here's a sample of page I've been building:</p>
  
  <pre><code>&lt;h2&gt;Load cards&lt;/h2&gt;
  
  &lt;script type="text/javascript"&gt;
      $(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");
          });
      });
  &lt;/script&gt;
  
  @using (Html.BeginForm())
  {
      &lt;div class="formStyle"&gt;
          &lt;div class="defaultBaseStyle bigFontSize"&gt;
              &lt;label&gt;
                  Select a Set to import from:
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="defaultBaseStyle baseFontSize"&gt;
              Set: @Html.DropDownList("_setName", "--- Select a Set")&lt;br/&gt;    
          &lt;/div&gt;
          &lt;div id="buttonField" class="formStyle"&gt;
              &lt;input type="submit" value="Create List" name="_submitButton" class="createList"/&gt;&lt;br/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Here's a snippet of code from my javascript file:</p>
  
  <pre><code>$(document).ready(function ()
  {
      $(".createList").click(function() {
          return confirm("The process of creating all the cards takes some time. " +
              "Do you wish to proceed?");
      });
  }
  </code></pre>
  
  <p>As a bonus (this is not mandatory), I'd like it to be displayed after the user has confirmed, if it is possible. else I do not mind replacing this code.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Following Rob's suggestion below, here's my controller method:</p>
  
  <pre><code>[HttpPost]
  public JsonResult LoadCards(string _submitButton, string _cardSetName)
  {
  
  
      return Json(true);
  }
  </code></pre>
  
  <p>And here's the "old" ActionResult method:</p>
  
  <pre><code>[HttpPost]
  public ActionResult LoadCards(string _submitButton, string _setName)
  {
      // Do Work
  
      PopulateCardSetDDL();
      return View();
  }
  </code></pre>
  
  <p>As of now the code never reaches the Json method. It does enter the ajax method up there (see updated code), but I don't know how to make this work out.</p>