如何将React.js表单与C#模型属性进行关联对接？

一、后端API调整 #

1. 完善API控制器与模型 #

首先给你的LembreteModel添加主键字段（EF Core需要主键才能正常进行数据持久化）：

namespace PersonalReminders.Models
{
    public class LembreteModel
    {   
        public int Id { get; set; } // 添加主键
        public string? Descricao { get; set; }
        public DateTime Data { get; set; }
    }
}

然后编写API控制器，确保标注[ApiController]和路由属性，实现创建与查询接口：

using Microsoft.AspNetCore.Mvc;
using PersonalReminders.Models;
using Microsoft.EntityFrameworkCore;

namespace PersonalReminders.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class LembretesController : ControllerBase
    {
        private readonly YourDbContext _dbContext;

        // 注入数据库上下文（假设你已经配置好EF Core上下文）
        public LembretesController(YourDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        // 创建提醒的POST接口
        [HttpPost]
        public async Task<IActionResult> Create(LembreteModel lembrete)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            _dbContext.Lembretes.Add(lembrete);
            await _dbContext.SaveChangesAsync();

            // 返回创建成功的资源和201状态码
            return CreatedAtAction(nameof(GetById), new { id = lembrete.Id }, lembrete);
        }

        // 获取单个提醒的GET接口
        [HttpGet("{id}")]
        public async Task<IActionResult> GetById(int id)
        {
            var lembrete = await _dbContext.Lembretes.FindAsync(id);
            if (lembrete == null) return NotFound();
            return Ok(lembrete);
        }

        // 获取所有提醒的GET接口
        [HttpGet]
        public async Task<IActionResult> GetAll()
        {
            var lembretes = await _dbContext.Lembretes.ToListAsync();
            return Ok(lembretes);
        }
    }
}

2. 配置跨域（CORS） #

因为React前端和ASP.NET Core后端运行在不同端口，必须配置CORS允许前端请求：
在Program.cs中添加CORS服务与中间件：

var builder = WebApplication.CreateBuilder(args);

// 添加CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReact",
        policy => policy.WithOrigins("http://localhost:3000") // React默认开发端口
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 注册数据库上下文、控制器等服务
builder.Services.AddDbContext<YourDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));
builder.Services.AddControllers();

var app = builder.Build();

// 启用CORS（必须放在UseRouting之后，UseAuthorization之前）
app.UseCors("AllowReact");

app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();

app.Run();

二、React前端改造 #

将表单改为受控组件，管理输入状态并实现提交、列表渲染逻辑：

import { useState, useEffect } from 'react';

function TelaInicial() {
    // 表单状态管理
    const [descricao, setDescricao] = useState('');
    const [data, setData] = useState('');
    // 提醒列表状态
    const [lembretes, setLembretes] = useState([]);

    // 页面加载时获取已有提醒列表
    useEffect(() => {
        fetch('https://localhost:5001/api/lembretes') // 替换为你的后端API地址
            .then(res => res.json())
            .then(data => setLembretes(data))
            .catch(err => console.error('加载列表失败:', err));
    }, []);

    // 表单提交处理
    const handleSubmit = async (e) => {
        e.preventDefault();

        const novoLembrete = {
            descricao,
            data // 前端date输入返回YYYY-MM-DD格式，ASP.NET Core可自动解析为DateTime
        };

        try {
            const response = await fetch('https://localhost:5001/api/lembretes', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(novoLembrete),
            });

            if (!response.ok) throw new Error('创建失败');

            const lembreteCriado = await response.json();
            // 更新本地列表
            setLembretes([...lembretes, lembreteCriado]);
            // 重置表单
            setDescricao('');
            setData('');
            alert('提醒创建成功！');
        } catch (err) {
            console.error('错误:', err);
            alert('创建提醒失败，请重试');
        }
    };

    return (
        <div className='telaInicial'>
            <h4>Novo lembrete</h4>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>Lembrete:</label>
                    <input 
                        type='text' 
                        name='descricao' 
                        placeholder='digite o lembrete'
                        value={descricao}
                        onChange={(e) => setDescricao(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label>Data:</label>
                    <input 
                        type='date' 
                        name='data' 
                        placeholder='digite a data do lembrete.'
                        value={data}
                        onChange={(e) => setData(e.target.value)}
                        required
                    />
                </div>
                <button type='submit'>Criar lembrete</button>
            </form>
            <h4>lista de Lembretes</h4>
            <ul>
                {lembretes.map(lembrete => (
                    <li key={lembrete.id}>
                        <p>{lembrete.descricao}</p>
                        <p>{new Date(lembrete.data).toLocaleDateString('pt-BR')}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default TelaInicial;

三、关键注意事项 #

• 后端API地址要与实际运行地址匹配，注意HTTPS/HTTP的区别，开发环境可暂时关闭HTTPS简化配置。
• 模型验证：后端通过ModelState.IsValid校验数据合法性，前端通过required属性做基础校验。
• 生产环境CORS配置：不要使用AllowAnyOrigin，应指定具体的前端域名，避免安全风险。

内容的提问来源于stack exchange，提问作者Dropped3222