title: Blazor -- access global variables from layout component
body: <p>I need some help on how to architecture a Blazor application to achieve what I need.</p>
  
  <p>All the pages for this application must have the same starting parameter, say AccountId. So a product page could be like "/product/{AccountId}", customer page could be like "/customer/{AccountId}". This AccountId value is used to retrieve basic account information like name, phone.</p>
  
  <p>The site shares global nav bars, here is what the MainLayout looks like:</p>
  
  <pre><code>&lt;TopNav&gt;&lt;/TopNav&gt;
  &lt;LeftNav&gt;&lt;/LeftNav&gt;
  &lt;main class="app-main"&gt;
  &lt;div class="wrapper"&gt;
      &lt;div class="page"&gt;
          &lt;div class="page-inner"&gt;
              @Body
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I need is to display the account name in the TopNav layout component. I've tried to create a BasePage class that they all inherit from and tried to fetch the account info in the OnInitializedAsync() of the BasePage and set a protected variable. However, the TopNav component does not receive this value and always see it as null.</p>
  
  <p>Just how should I structure my application so that both the individual page component, and all the layout component receives this same account info object?</p>
  
  <p>Thanks a lot!</p>