title: Ajax Reload of MVC 5 PartialView Returns Invalid Html
body: <p>Newbie to MVC here (about a week or two in)...</p>
  
  <p>I'm trying to reload an MVC 5 partial view using Ajax. I've found a number of examples on how to do this, and I've decided to go with using the jQuery load() function.</p>
  
  <p>Here's the code for the controller:</p>
  
  <pre><code>public class NotificationController : Controller
  {
      //
      // GET: /Notification/
      public ActionResult Get()
      {
          return PartialView();
      }
  }
  </code></pre>
  
  <p>Here's the html for rendering the partial view:</p>
  
  <pre><code>&lt;div id="notificationArea"&gt;
      @Html.Action("Get", "Notification")
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the call I'm making to reload the partial view (on a timer):</p>
  
  <pre><code> $('#notificationArea').load('@Url.Action("Get","Notification")');
  </code></pre>
  
  <p>When the partial view is initially rendered using <code>Html.Action</code> everything looks good</p>
  
  <p>Once the timer starts up, calls are made to the Notification controller without a problem, but what's returned is not valid html. It looks something like this:</p>
  
  <pre><code>&lt;$A$&gt; &lt;$B$&gt; id="notificationDropdown"&lt;$C$&gt; class="notificationDropdown"&lt;$D$&gt;&gt; &lt;$E$&gt;
  class="notificationsTable"&lt;$F$&gt;&gt;   Operation Title File &lt;$G$&gt; src="/Images/online.png
  &lt;$H$&gt; alt="Online"&lt;$I$&gt; /&gt; Operation Test #1 TestFile2.mp4 &lt;$$$&gt;
  </code></pre>
  
  <p>If I throw in a link created using <code>Url.Action</code> at the bottom of the page and click that link, I get back the same invalid html as above:</p>
  
  <pre><code>&lt;a href="@Url.Action("Get", "Notification")"&gt;@Url.Action("Get", "Notification")&lt;/a&gt;
  </code></pre>
  
  <p>I have to assume the call to <code>Html.Action</code> is doing some extra work that isn't done when you just hit the controller url directly, but I have no idea what that is.</p>
  
  <p>I've tried looking through MSDN documentation on the <code>Html.Action</code> without any luck. Could anyone shed some light on what's happening here? What am I missing?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I realized that I was only capturing what was being rendered by the browser, rather than the full response returned by the call to the Action.</p>
  
  <p>Here is the partial view html:</p>
  
  <pre><code>@model IEnumerable&lt;MyApp.Models.Notification&gt;
  
  &lt;style type="text/css"&gt;
  
  .notificationDropdown {
      background-color: #eeeeee;
      position: absolute;
      left: 210px;
      border-left: 3px;
      border-bottom: 3px;
      border-right: 3px;
      border-top: 0px;
      border-style: ridge;
      border-color: #aaaaaa;
  }
  
  .notificationsTable {
      margin: 5px;
      border-collapse: collapse;
      border: 1px solid #aaaaaa;
  }
  
      .notificationsTable td {
          border: 1px solid #aaaaaa;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 3px;
      }
  
      .notificationsTable th {
          color: #ffffff;
          background-color: #000000;
          border: 1px solid #aaaaaa;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 3px;
      }
  &lt;/style&gt;
  
  
  
  &lt;div id="notificationDropdown" class="notificationDropdown"&gt;
  &lt;table class="notificationsTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
              &lt;th&gt;Operation&lt;/th&gt;
              &lt;th&gt;Title&lt;/th&gt;
              &lt;th&gt;File&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;img src="/Images/online.png" alt="Online" /&gt;
              &lt;/td&gt;
              &lt;td&gt;Operation&lt;/td&gt;
              &lt;td&gt;Test #1&lt;/td&gt;
              &lt;td&gt;TestFile2.mp4&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is the full response I get trying to access the partial view from the action:</p>
  
  <pre><code>&lt;$A$&gt;&lt;style&gt;
  
  .notificationDropdown {
      background-color: #eeeeee;
      position: absolute;
      left: 210px;
      border-left: 3px;
      border-bottom: 3px;
      border-right: 3px;
      border-top: 0px;
      border-style: ridge;
      border-color: #aaaaaa;
  }
  
  .notificationsTable {
      margin: 5px;
      border-collapse: collapse;
      border: 1px solid #aaaaaa;
  }
  
      .notificationsTable td {
          border: 1px solid #aaaaaa;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 3px;
      }
  
      .notificationsTable th {
          color: #ffffff;
          background-color: #000000;
          border: 1px solid #aaaaaa;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 3px;
      }
  &lt;/style&gt;
  
  
  
  &lt;div&lt;/$A$&gt;&lt;$B$&gt; id="notificationDropdown"&lt;/$B$&gt;&lt;$C$&gt; class="notificationDropdown"&lt;/$C$&gt;&lt;$D$&gt;&gt;
  &lt;table&lt;/$D$&gt;&lt;$E$&gt; class="notificationsTable"&lt;/$E$&gt;&lt;$F$&gt;&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&amp;nbsp;&lt;/th&gt;
              &lt;th&gt;Operation&lt;/th&gt;
              &lt;th&gt;Title&lt;/th&gt;
              &lt;th&gt;File&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;img&lt;/$F$&gt;&lt;$G$&gt; src="/Images/online.png"&lt;/$G$&gt;&lt;$H$&gt; alt="Online"&lt;/$H$&gt;&lt;$I$&gt; /&gt;
              &lt;/td&gt;
              &lt;td&gt;Operation&lt;/td&gt;
              &lt;td&gt;Test #1&lt;/td&gt;
              &lt;td&gt;TestFile2.mp4&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;&lt;/$I$&gt;&lt;$$$&gt;&lt;map&gt;&lt;file path="~/Views/Notification/Get.cshtml" encoding="Windows-1252"&gt;&lt;node id="A" start="70" length="895" literal="true" /&gt;&lt;node id="B" start="965" length="26" literal="true" /&gt;&lt;node id="C" start="991" length="29" literal="true" /&gt;&lt;node id="D" start="1020" length="13" literal="true" /&gt;&lt;node id="E" start="1033" length="27" literal="true" /&gt;&lt;node id="F" start="1060" length="288" literal="true" /&gt;&lt;node id="G" start="1348" length="25" literal="true" /&gt;&lt;node id="H" start="1373" length="13" literal="true" /&gt;&lt;node id="I" start="1386" length="202" literal="true" /&gt;&lt;/file&gt;&lt;/map&gt;
  </code></pre>
  
  <p>The html is largely preserved, but with what seems to be almost random insertions of  tags.</p>
  
  <p>I suppose it's worth noting that the view is currently static, and no data from the model is being used. I'm going to try a real implementation of this, that actually uses the model and the Razor engine, but I still would really love to understand what's happening here...</p>