title: Display Loading Screen and Hide It After Formatting of Data
body: <p>My application calls API that returns list of data that will be displayed in tabular format. It will be place in a partial view.</p>
  
  <p>i want to display a loading screen when the page load and hide it after the formatting of table.
  How would I achieve this? i know i should use jquery but that's all i know, </p>
  
  <p>Here's my Code for displaying.</p>
  
  <pre><code>&lt;table&gt;
  
  &lt;tr&gt;
     @{ 
         var count = typeof(ModelType).GetProperties().Count() - 1;
         for (int i = count; i != 0; i--)
         {
          &lt;th&gt;&lt;/th&gt;
         }
       }
  &lt;tr&gt;
      @foreach (var item in Model)
      {
          &lt;tr&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.Phone)
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.Name)
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.LastName)
              &lt;/td&gt;
          &lt;/tr&gt;                    
      }     
  
  &lt;/table&gt;
  </code></pre>
  
  <h2>Edit</h2>
  
  <p>I want to display the blockUI until after the formatting of tabular data.</p>
  
  <p>my JS using BlockUI.</p>
  
  <pre><code>function LoadPartialFile()
  {
      $('#blocker').block({ message: null });
  
      $.ajax({
          cache: false,
          url: '/User/GetFilePartialTable',
          type: 'GET',
          dataType: 'html',
          contentType: 'application/html; charset=utf-8',
          success: function (viewHTML) {
              $('#replaced').html(viewHTML);
              },
          error: function (request, status, err) {
              alert(status);
              alert(err);
          }
      });
      $('#blocker').unblock();
  }
  </code></pre>
  
  <p>my view</p>
  
  <pre><code>&lt;div&gt;&lt;button onclick="LoadPartialFile()"&gt;Load Chart&lt;/button&gt; 
  &lt;button onclick="LoadPartialFile()"&gt;Load Chart&lt;/button&gt; 
  &lt;/div&gt;
  &lt;div id="blocker"&gt;        
      &lt;div id="replaced" style="height:500px;width:100%"&gt;          
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>