React与.NET API提交FormData及外键参数问题求助

核心问题 #

1. 请求体格式损坏：React端将FormData与Guid直接拼接，导致请求体变成无效字符串（[object FormData]xxxxxx），后端无法解析正确的表单结构。
2. 参数绑定不匹配：.NET Core Action中的Guid参数默认从URL QueryString绑定，但实际参数被放在请求体的FormData中，未显式指定绑定来源，导致无法识别。

修复步骤 #

1. 修正React表单提交逻辑 #

将外键Guid直接追加到FormData中，参数名需与后端Action参数完全一致：

const handleFormSubmit = e => {
    e.preventDefault();
    let formData = new FormData();
    // 候选者基础信息
    formData.append('Nome', selectedCandidato.Nome);
    formData.append('Sobrenome', selectedCandidato.Sobrenome);
    formData.append('NomePai', selectedCandidato.NomePai);
    formData.append('NomeMae', selectedCandidato.NomeMae);
    formData.append('DataNascimento', selectedCandidato.DataNascimento);
    formData.append('Rupe', selectedCandidato.Rupe);
    formData.append('NumeroBilhete', selectedCandidato.NumeroBilhete);
    formData.append('Sexo', selectedCandidato.Sexo);
    formData.append('EstadoCivil', selectedCandidato.EstadoCivil);
    formData.append('Email', selectedCandidato.Email);
    formData.append('Telefone', selectedCandidato.Telefone);
    formData.append('Provincia', selectedCandidato.Provincia);
    formData.append('Municipio', selectedCandidato.Municipio);
    formData.append('Rua', selectedCandidato.Rua);

    // 追加外键参数，与后端参数名严格对应
    formData.append('classe', selectedCandidato.ClasseId);
    formData.append('curso', selectedCandidato.CursoId);
    formData.append('ano', selectedCandidato.AnoLectivoId);
    formData.append('periodo', selectedCandidato.PeriodoId);

    // 直接传递完整FormData
    insertInscrito(dispatch, formData);
}

2. 修正Redux请求函数 #

直接发送FormData作为请求体，axios会自动识别并设置正确的Content-Type: multipart/form-data：

export const insertInscrito = async (dispatch, candidato) => {
    dispatch(actionCreators.reqInsertInscrito());
    
    try {
        const { data } = await axios.post(baseUrl, candidato);
        dispatch(actionCreators.insertInscrito(data));
    } catch (error) {
        dispatch(actionCreators.errorInsertInscrito(error.message));
    }
}

3. 修正.NET Core Action参数绑定 #

为每个Guid参数添加[FromForm]标记，明确指定从FormData中绑定：

[HttpPost]
public async Task<IActionResult> AdicionarCandidato(
    [FromForm]AddCandidatoDTO candidato, 
    [FromForm]Guid classe, 
    [FromForm]Guid curso, 
    [FromForm]Guid ano, 
    [FromForm]Guid periodo)
{
    try
    {
        // candidato.DescricaoFoto = Upload(candidato.FileFoto).ToString();               
        await _inscricao.Adicionar(candidato, classe, curso, ano, periodo);
        await _inscricao.Persistir();
        
        return Created();
    }
    catch(Exception ex)
    {
        return BadRequest($"Erro ao inserir candidato: {ex.Message}");
    }
}

可选优化方案 #

将外键字段整合到AddCandidatoDTO中，减少独立参数，使代码更规范：

1. 更新DTO：

public class AddCandidatoDTO
{
    // 原有字段...
    public Guid ClasseId { get; set; }
    public Guid CursoId { get; set; }
    public Guid AnoLectivoId { get; set; }
    public Guid PeriodoId { get; set; }
}

2. 简化Action：

[HttpPost]
public async Task<IActionResult> AdicionarCandidato([FromForm]AddCandidatoDTO candidato)
{
    try
    {
        await _inscricao.Adicionar(candidato, candidato.ClasseId, candidato.CursoId, candidato.AnoLectivoId, candidato.PeriodoId);
        await _inscricao.Persistir();
        
        return Created();
    }
    catch(Exception ex)
    {
        return BadRequest($"Erro ao inserir candidato: {ex.Message}");
    }
}

3. 前端对应调整FormData字段名：

formData.append('ClasseId', selectedCandidato.ClasseId);
formData.append('CursoId', selectedCandidato.CursoId);
// ...其他外键字段

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