title: Why is header content rendered twice in ASP.NET MVC
body: <p>I have a pretty basic ASP.NET MVC website and I cannot work out why my header content is getting rendered twice.</p>
  
  <pre><code>&lt;!-- ViewStart --&gt;
  @{
     Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;!-- _Layout.cshtml --&gt;
  &lt;body&gt;
      &lt;div class="container body-content"&gt;
          @RenderPage("~/Views/Shared/_Header.cshtml")
          @RenderBody()
      &lt;/div&gt;
  &lt;body&gt;
  
  &lt;!-- _Header.cshtml --&gt;
  @{
      Layout = null;
  }
  &lt;h1&gt; Header Content&lt;/h1&gt;
  
  &lt;!-- View--&gt;
  &lt;h2&gt;
      &lt;div class="well"&gt;
          Body Content
      &lt;/div&gt;
  &lt;/h2&gt;
  </code></pre>
  
  <p>What I end up with is the header content rendered twice; once in above the view and once in the view. </p>
  
  <p><img src="https://i.stack.imgur.com/DViAH.png" alt="enter image description here"></p>
  
  <p>Rendered Source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt; - My ASP.NET Application&lt;/title&gt;
          &lt;link href="/Content/bootstrap.css" rel="stylesheet"/&gt;
  
          &lt;script src="/Scripts/modernizr-2.6.2.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              window.apiUrl = '';
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="container body-content"&gt;
              &lt;h1&gt; Header Content&lt;/h1&gt;        
              &lt;div class="document-root" ng-app="AppHome"&gt;
  
                  &lt;div ng-view&gt;&lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src="/Scripts/Vendor/Bootstrap/bootstrap-without-jquery.js"&gt;&lt;/script&gt;
          &lt;script src="/Scripts/respond.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas why!?</p>
  
  <p>Note 1: On navigation to view, what I am expecting is:</p>
  
  <ul>
  <li>viewstart calls layout page</li>
  <li>Layout page adds header layout page</li>
  <li>Layout page inserts view into body</li>
  </ul>
  
  <p>Note 2: As you can see from the source, this is an Angular App. I've replace the view that would be rendered with the content as shown above - this results in the picture above. But the rendered source does not include the second H1 so this would imply that the second H1 is somehow coming from the angular injected view</p>
  
  <p>Note 3: In the real issue I am trying to display a menu and that gets displayed twice. As a sanity check I stripped everything down to the bare minimum as shown above; and still no dice.</p>