Data not being passed from Razor page

Question

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:

Razor file

@using Blogs.Shared.Models
@page "/addpost"
@inject HttpClient Http
@inject NavigationManager NavigationManager

    <h2>Create Post</h2>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <form>
                <div class="form-group">
                    <label for="Name" class="control-label">Titles</label>
                    <input for="Name" class="form-control" bind="@posts.title" />
                </div>
                <div class="form-group">
                    <label for="Address" class="control-label">Content</label>
                    <input for="Address" class="form-control" bind="@posts.content" />
                </div>
                <div class="form-group">
                    <input type="button" class="btn btn-default" onclick="@(async () => await tas())" value="Save" />
                    <input type="button" class="btn" onclick="@Cancel" value="Cancel" />
                </div>
            </form>
        </div>
    </div>
    @functions {

        public Posts posts = new();

        protected async Task tas()
        {
            await Http.PostAsJsonAsync("api/Posts/Create", posts);
            NavigationManager.NavigateTo("/listposts");
        }

        void Cancel()
        {
            NavigationManager.NavigateTo("/listposts");
        }
    } 

What I would expect this to do, is when Save is pressed, the data from Title and Content is assigned to posts and then passed to my POST method:

Controller:

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("PostsController");
            _dataAccessProvider = dataAccessProvider;
        }

        [HttpPost]
        [Route("api/Posts/Create")]
        public void Create(Posts post)
        {
            _logger.LogCritical("Data 1", post);
            _logger.LogCritical("Data 2", post.content);
            _logger.LogCritical("Data 3", post.title);
            _dataAccessProvider.AddPosts(post);
        }
    }
}

All of my _logger.LogCritical lines just return blank, and when the write to the DB occurs it complains that title is empty (this field in my DB is set to NOT NULL).

Can anyone help as to why this is not working?

Answer 1

To bind a value to an input component you must add an @ before the bind property, like following @bind="posts.title" (see https://docs.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-6.0 )

That's what's not working for you.

I also don't recommend you to use the @functions because it is not recommended by Microsoft for razor files (see https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-3.0#functions )

@code {

    public Posts posts = new();

    protected async Task tas()
    {
        await Http.PostAsJsonAsync("api/Posts/Create", posts);
        NavigationManager.NavigateTo("/listposts");
    }

    void Cancel()
    {
        NavigationManager.NavigateTo("/listposts");
    }
    
}

I hope it helped you