title: How to Separate Code From UI In Blazor.Net
body: <p>Reference to this <a href="https://visualstudiomagazine.com/articles/2018/12/01/creating-web-pages-with-blazor.aspx" rel="noreferrer">VisualStudioMagazine</a> article, I am trying to have code in a separate file instead of razor view.</p>
  
  <p>I tried:</p>
  
  <pre><code>@page "/Item"
  @using WebApplication1.Shared
  @using WebApplication1.Client.Services;
  @inject HttpClient Http
  @inherits ItemComponent
  
  @if (ItemList != null)
  {
      &lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Category&lt;/th&gt;
                  &lt;th&gt;Metal&lt;/th&gt;
                  &lt;th&gt;Price&lt;/th&gt;
                  &lt;th&gt;Quantity&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @foreach (var item in ItemList)
              {
                  &lt;tr&gt;
                      &lt;td&gt;@item.ID&lt;/td&gt;
                      &lt;td&gt;@item.Name&lt;/td&gt;
                      &lt;td&gt;@item.Category&lt;/td&gt;
                      &lt;td&gt;@item.Metal&lt;/td&gt;
                      &lt;td&gt;@item.Price&lt;/td&gt;
                      &lt;td&gt;@item.Quantity&lt;/td&gt;
                  &lt;/tr&gt;
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
  }
  
  @functions{
      public ItemModel[] ItemList;
      ItemComponent IC = new ItemComponent();
  
      protected override async Task OnInitAsync()
      {
          ItemList = IC.GetItems().Result;
          //ItemList = await Http.GetJsonAsync&lt;ItemModel[]&gt;("api/Item/GetItems");
          StateHasChanged();
      }
  }
  </code></pre>
  
  <p>And ItemComponent:</p>
  
  <pre><code>using System.Threading.Tasks;
  using WebApplication1.Shared;
  using System.Net.Http;
  using Microsoft.AspNetCore.Components;
  using Microsoft.AspNetCore.Blazor;
  
  namespace WebApplication1.Client.Services
  {
      public class ItemComponent
      {
          public async Task&lt;ItemModel[]&gt; GetItems()
          {
              ItemModel[] ItemList;
              HttpClient Http = new HttpClient();
              ItemList = await Http.GetJsonAsync&lt;ItemModel[]&gt;("api/Item/GetItems");
              return ItemList;
          }
  
      }
  }
  </code></pre>
  
  <p>But it does not work , it shows that:</p>
  
  <blockquote>
    <p>Severity  Code    Description Project File    Line    Suppression State
    Error   CS0115  'Item.BuildRenderTree(RenderTreeBuilder)': no suitable method found to override WebApplication1.Client  D:\Other\blazor\WebApplication1.Client\obj\Debug\netstandard2.0\RazorDeclaration\Pages\ItemModule\Item.razor.g.cs   30  Active</p>
  </blockquote>
  
  <p>Also as per  tutorial page can not inherit <code>BlazorComponent</code> to <code>ItemComponent</code> because it failed to have reference.</p>
  
  <p>Is there any way to separate most of the code from Blazor view to a separate code file?</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>After Making changes as per Chris Answer, it show exception </p>
  
  <blockquote>
    <p>System.Net.Http.HttpRequestException: No connection could be made because the target machine actively refused it. --->
    System.Net.Sockets.SocketException: No connection could be made
    because the target machine actively refused it.    at
    System.Net.Http.ConnectHelper.ConnectAsync(String host, Int32 port,
    CancellationToken cancellationToken)    --- End of inner exception
    stack trace ---    at
    System.Net.Http.ConnectHelper.ConnectAsync(String host, Int32 port,
    CancellationToken cancellationToken)    at
    System.Threading.Tasks.ValueTask<code>1.get_Result()    at
    System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage
    request, Boolean allowHttp2, CancellationToken cancellationToken)<br>
    at System.Threading.Tasks.ValueTask</code>1.get_Result()    at
    System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync(HttpRequestMessage
    request, CancellationToken cancellationToken)    at
    System.Threading.Tasks.ValueTask<code>1.get_Result()    at
    System.Net.Http.HttpConnectionPool.GetHttpConnectionAsync(HttpRequestMessage
    request, CancellationToken cancellationToken)    at
    System.Threading.Tasks.ValueTask</code>1.get_Result()    at
    System.Net.Http.HttpConnectionPool.SendWithRetryAsync(HttpRequestMessage
    request, Boolean doRequestAuth, CancellationToken cancellationToken)<br>
    at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage
    request, CancellationToken cancellationToken)    at
    System.Net.Http.HttpClient.FinishSendAsyncUnbuffered(Task<code>1 sendTask,
    HttpRequestMessage request, CancellationTokenSource cts, Boolean
    disposeCts)    at System.Net.Http.HttpClient.GetStringAsyncCore(Task</code>1
    getTask)    at
    Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs(String
    debuggerHost)    at
    Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.DebugHome(HttpContext
    context)</p>
  </blockquote>