Почему форма не загружает значения?

В настоящее время я создаю страницу создания учетной записи для своего проекта и пытаюсь выяснить, что не так с моим кодом. Проблема в том, что когда я заполняю все поля и нажимаю кнопку «Создать учетную запись», он отправляет пустые значения. Я понятия не имею, почему это... Надеюсь, кто-нибудь здесь мне поможет. Спасибо!

@page "/CreateAccount"

@using System.Net.Http
@using System.Net.Http.Json
@using WebApp.Models

@inject IHttpClientFactory HttpClientFactory
@inject NavigationManager NavigationManager

<PageTitle>Create Account</PageTitle>

<div class = "d-flex justify-content-center align-items-center vh-100 bg-dark text-white">
    <EditForm Model = "@user" OnValidSubmit = "RegisterAccount" class = "text-center w-25" FormName = "CreateAccount">
        <h1 class = "mb-5">Create an Account</h1>

        <div class = "form-group">
            <label for = "name">Name</label>
            <InputText id = "name" @bind-Value = "user.Name" class = "form-control" />
        </div>

        <div class = "form-group">
            <label for = "email">Email</label>
            <InputText id = "email" @bind-Value = "user.Email" class = "form-control" />
        </div>

        <div class = "form-group">
            <label for = "password">Password</label>
            <InputText id = "password" @bind-Value = "user.Password" type = "password" class = "form-control" />
        </div> 

        <button type = "submit" class = "btn btn-primary mt-4">Create Account</button>
    </EditForm>
</div>

@code {
    private AccountDetails user = new AccountDetails();

    private async Task RegisterAccount()
    {
        Console.WriteLine($"Email: {user.Email}");
        Console.WriteLine($"Username: {user.Name}");
        Console.WriteLine($"Password: {user.Password}");

        var httpClient = HttpClientFactory.CreateClient("ApiClient");
        var response = await httpClient.PostAsJsonAsync("api/AccountDetails", user);
            
            if (response.IsSuccessStatusCode)
            {
                NavigationManager.NavigateTo("/HomeManager");
            }
            else
            {
                Console.WriteLine("Error: " + response.ReasonPhrase);
            }
        }
    }
}

Модель

using System.ComponentModel.DataAnnotations;

namespace WebApp.Models
{
    public class AccountDetails
    {
        [Key]
        public int Id { get; set; }

        [Required(ErrorMessage = "Email is required")]
        [EmailAddress(ErrorMessage = "Invalid email address")]
        public string Email { get; set; } = string.Empty;

        [Required(ErrorMessage = "Username is required")]
        public string Name { get; set; } = string.Empty;

        [Required(ErrorMessage = "Password is required")]
        [MinLength(6, ErrorMessage = "Password must be at least 6 characters long")]
        public string Password { get; set; } = string.Empty;

        public DateTime CreatedAt { get; set; } = DateTime.Now;
    }
}

API

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using WebApp.Data;
using WebApp.Models;
using System.Threading.Tasks;

namespace WebApp.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class AccountDetailsController : ControllerBase
    {
        private readonly AccountDetailsContext _context;

        public AccountDetailsController(AccountDetailsContext context)
        {
            _context = context;
        }

        [HttpPost]
        public async Task<IActionResult> PostAccountDetails([FromBody] AccountDetails accountDetails)
        {
            if (accountDetails == null)
            {
                Console.WriteLine("Received null data.");
                return BadRequest("Invalid data.");
            }

            Console.WriteLine($"Received data: Name = {accountDetails.Name}, Email = {accountDetails.Email}, Password = {accountDetails.Password}");

            try
            {
                _context.AccountDetails.Add(accountDetails);
                await _context.SaveChangesAsync();
                return Ok();
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error: {ex.Message}");
                return StatusCode(500, $"Internal server error: {ex.Message}");
            }
        }
    }
}

Я попробовал метод HTTP Post непосредственно в Visual Studio с помощью расширения REST Client, и данные прекрасно сохраняются в базе данных. Только когда пользователь вводит значения в форму, он отправляет пустые значения.

POST http://localhost:5237/api/AccountDetails
Content-Type: application/json

{
  "Name": "User",
  "Email": "[email protected]",
  "Password": "12345",
  "CreatedAt": "2005-07-21"
}

это должно быть похоже на @[email protected]

D A 19.08.2024 11:55

Нет, та же проблема

kelq 19.08.2024 12:02

Ваш код сработал с моей стороны, он публикует значения. Можете ли вы попробовать добавить точку останова в var response = await httpClient.PostAsJsonAsync("api/AccountDetails", user); и посмотреть, пытается ли она отправить пользовательский объект со значениями?

Jerdine Sabio 19.08.2024 12:33

Также добавьте точку останова на свой контроллер, она действительно достигает PostAccountDetails?

Jerdine Sabio 19.08.2024 12:38

Добавлена ​​точка останова в ответ var и все пусто (адрес электронной почты, имя, пароль).

kelq 19.08.2024 13:43

@kelq Это действительно весь ваш код для страницы CreateAccount? Я скопировал ваш код, и он фиксирует значения и правильно отправляет их с моей стороны.

Jerdine Sabio 19.08.2024 17:49
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
6
60
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Какой это тип режима рендеринга?

Возможно, вам придется добавить

@rendermode = "InteractiveServer"

если глобально не установлен интерактивный режим.

Ответ принят как подходящий

Обязательно добавьте [SupplyParameterFromForm] и измените пользователя на свойство вместо поля, как показано ниже. Атрибут [SupplyParameterFromForm] указывает, что значение связанного свойства должно быть получено из данных формы:

[SupplyParameterFromForm]
private AccountDetails user { get; set; } = new AccountDetails();

Да, вот и все! Спасибо!

kelq 20.08.2024 23:11

Другие вопросы по теме