title: Rendering partial views in MVC 3 with Ajax loading image
body: <p>I have just started using Html.RenderPartial(usercontrol, model) to render my user controls.  Is it possible to change this functionality to show an Ajax loading image while the partial view loads?  </p>
  
  <p>EDIT : Had a try at this, but have been unable to get it to work.  I have a partial view like this (_FixtureList.cshmtl) : </p>
  
  <pre><code>@model List&lt;Areas.Gameplan.Models.Fixture&gt;
  
  @foreach (var item in this.Model)
  { 
  
  &lt;tr&gt; 
      &lt;td class="teamgrid"&gt;@Html.Encode(item.Week)&lt;/td&gt;
      &lt;td&gt;&lt;img src='@Html.Encode(item.Logo)' alt="Logo" /&gt;&lt;/td&gt;
      &lt;td class="teamgrid"&gt;@Html.Encode(item.Opponent)&lt;/td&gt;
      &lt;td class="teamgrid"&gt;@Html.Encode(item.Result)&lt;/td&gt;
  &lt;/tr&gt; 
  </code></pre>
  
  <p>And this is currently how I am rendering the page :</p>
  
  <pre><code>public ActionResult Cincinnati()
      {
          //renderpartial
          List&lt;Fixture&gt; lstFixtures = _Base.DataRepository.GetFixtureList("2017", "Cincinnati");
  
          return View(lstFixtures);
      }
  </code></pre>
  
  <p>}</p>
  
  <p>And this is the relevant part of my view (Cincinnati.cshtml) :</p>
  
  <pre><code>@model List&lt;Areas.Gameplan.Models.Fixture&gt;
  
  @{
      ViewBag.Title = "Cincinnati Bengals";
      Layout = "~/Areas/Gameplan/Views/Shared/_Layout.cshtml";
  }
  
  
  &lt;div id="bigborder"&gt;
  
      &lt;p&gt;
          &lt;br /&gt;
  
      &lt;div class="sidebarleftteam"&gt;
  
          &lt;div id="divFixtures"&gt;
  
             &lt;table id='tblFixtures' align='center'&gt;&lt;tr&gt;&lt;th&gt;&lt;img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /&gt;&lt;/th&gt;&lt;th&gt;&lt;img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /&gt;&lt;/th&gt;&lt;th/&gt;&lt;th&gt;&lt;img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /&gt;&lt;/th&gt;&lt;/tr&gt; 
  
                  @{ Html.RenderPartial("_FixtureList", this.Model); }
  
             &lt;/table&gt;
  </code></pre>
  
  <p>How would I apply your example to this code?</p>
  
  <p>EDIT :</p>
  
  <p>Figured it out, this is how I did it :</p>
  
  <pre><code>public ActionResult MyPartial()
      {
          List&lt;Fixture&gt; lstFixtures = _Base.DataRepository.GetFixtureList("2016", "Cincinnati");
          return PartialView("_FixtureList", lstFixtures);
      }
  </code></pre>
  
  <p>And in the view : </p>
  
  <pre><code> $.ajax(
   {
       type: 'POST',
       async: true,
       contentType: 'application/json; charset=utf-8',
       dataType: 'html',
       url: 'MyPartial',
       beforeSend: function (xhr) {
           $('#mydiv').addClass('ajaxRefreshing');
           xhr.setRequestHeader('X-Client', 'jQuery');
       },
       success: function (result) {
           $('#mydiv').html("&lt;table id='tblFixtures' align='center'&gt;&lt;tr&gt;&lt;th&gt;&lt;img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /&gt;&lt;/th&gt;&lt;th&gt;&lt;img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /&gt;&lt;/th&gt;&lt;th/&gt;&lt;th&gt;&lt;img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /&gt;&lt;/th&gt;&lt;/tr&gt;" + result + "&lt;/table&gt;");
       },
  
       error: function (error) {
           alert(error);
       },
       complete: function () {
           $('#mydiv').removeClass('ajaxRefreshing');
       }
   });
  </code></pre>