title: Data not being passed from Razor page
body: <p>I have a Blazor app that takes user input via a form field and puts it into a database.
  However, the data is not being passed from the front end correctly:</p>
  <p>Razor file</p>
  <pre><code>@using Blogs.Shared.Models
  @page &quot;/addpost&quot;
  @inject HttpClient Http
  @inject NavigationManager NavigationManager
  
      &lt;h2&gt;Create Post&lt;/h2&gt;
      &lt;hr /&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;form&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;Name&quot; class=&quot;control-label&quot;&gt;Titles&lt;/label&gt;
                      &lt;input for=&quot;Name&quot; class=&quot;form-control&quot; bind=&quot;@posts.title&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;Address&quot; class=&quot;control-label&quot;&gt;Content&lt;/label&gt;
                      &lt;input for=&quot;Address&quot; class=&quot;form-control&quot; bind=&quot;@posts.content&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;input type=&quot;button&quot; class=&quot;btn btn-default&quot; onclick=&quot;@(async () =&gt; await tas())&quot; value=&quot;Save&quot; /&gt;
                      &lt;input type=&quot;button&quot; class=&quot;btn&quot; onclick=&quot;@Cancel&quot; value=&quot;Cancel&quot; /&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      @functions {
  
          public Posts posts = new();
  
          protected async Task tas()
          {
              await Http.PostAsJsonAsync(&quot;api/Posts/Create&quot;, posts);
              NavigationManager.NavigateTo(&quot;/listposts&quot;);
          }
  
          void Cancel()
          {
              NavigationManager.NavigateTo(&quot;/listposts&quot;);
          }
      } 
  </code></pre>
  <p>What I would expect this to do, is when <code>Save</code> is pressed, the data from Title and Content is assigned to <code>posts</code> and then passed to my POST method:</p>
  <p>Controller:</p>
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Blogs.Shared.Models;
  using Microsoft.AspNetCore.Mvc;
  
  namespace Blogs.Server.Controllers
  {
      public class PostsController : Controller
      {
          private readonly IDataAccessProvider _dataAccessProvider;
          private readonly ILogger _logger;
  
          public PostsController(IDataAccessProvider dataAccessProvider, ILoggerFactory loggerFactory)
          {
              _logger = loggerFactory.CreateLogger(&quot;PostsController&quot;);
              _dataAccessProvider = dataAccessProvider;
          }
  
          [HttpPost]
          [Route(&quot;api/Posts/Create&quot;)]
          public void Create(Posts post)
          {
              _logger.LogCritical(&quot;Data 1&quot;, post);
              _logger.LogCritical(&quot;Data 2&quot;, post.content);
              _logger.LogCritical(&quot;Data 3&quot;, post.title);
              _dataAccessProvider.AddPosts(post);
          }
      }
  }
  </code></pre>
  <p>All of my <code>_logger.LogCritical</code> lines just return blank, and when the write to the DB occurs it complains that <code>title</code> is empty (this field in my DB is set to NOT NULL).</p>
  <p>Can anyone help as to why this is not working?</p>
  <p><strong>EDIT</strong>
  I have updated the code to better match Antoine B's suggestions but its still  not working:</p>
  <pre><code>@page &quot;/newpost&quot;
  @using Blogs.Shared.Models
  @inject HttpClient Http
  @inject NavigationManager NavigationManager
  
  &lt;h1&gt;@Title Post&lt;/h1&gt;
  &lt;hr /&gt;
  &lt;EditForm Model=&quot;@posts&quot; OnValidSubmit=&quot;SaveUser&quot;&gt;
      &lt;DataAnnotationsValidator /&gt;
      &lt;div class=&quot;mb-3&quot;&gt;
          &lt;label for=&quot;Name&quot; class=&quot;form-label&quot;&gt;Title&lt;/label&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;InputText class=&quot;form-control&quot; @bind-Value=&quot;posts.title&quot; /&gt;
          &lt;/div&gt;
          &lt;ValidationMessage For=&quot;@(() =&gt; posts.title)&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;mb-3&quot;&gt;
          &lt;label for=&quot;Address&quot; class=&quot;form-label&quot;&gt;Content&lt;/label&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;InputText class=&quot;form-control&quot; @bind-Value=&quot;posts.content&quot; /&gt;
          &lt;/div&gt;
          &lt;ValidationMessage For=&quot;@(() =&gt; posts.content)&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Save&lt;/button&gt;
          &lt;button class=&quot;btn btn-light&quot; @onclick=&quot;Cancel&quot;&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/EditForm&gt;
  @code {
      protected string Title = &quot;Add&quot;;
      protected Posts posts = new();
  
      protected async Task SaveUser()
      {
              await Http.PostAsJsonAsync(&quot;api/Posts/Create&quot;, posts);
          Cancel();
      }
      public void Cancel()
      {
          NavigationManager.NavigateTo(&quot;/listposts&quot;);
      }
  }
  </code></pre>