Vue+Axios提交空值至.NET Web API可空属性时400错误解决咨询

问题原因 #

当Vue输入框未输入内容时，v-model绑定的someNumber会被设为空字符串""，而.NET默认的System.Text.Json序列化器不会将空字符串自动转换为可空decimal类型的null，导致模型验证失败，返回400 Bad Request。

解决方案：在API端配置自定义JSON转换器 #

通过添加自定义JSON转换器，将空字符串（或空白字符串）转换为null，从而让模型绑定正常工作。

.NET 6+（Program.cs）

在配置控制器服务时添加Json选项及自定义转换器：

var builder = WebApplication.CreateBuilder(args);

// 添加控制器并配置JSON选项
builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.Converters.Add(new NullableDecimalConverter());
    });

var app = builder.Build();

// 其他中间件配置...
app.MapControllers();
app.Run();

// 自定义可空decimal转换器
public class NullableDecimalConverter : JsonConverter<decimal?>
{
    public override decimal? Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
    {
        if (reader.TokenType == JsonTokenType.String)
        {
            var stringValue = reader.GetString();
            if (string.IsNullOrWhiteSpace(stringValue))
                return null;
            
            return decimal.TryParse(stringValue, out var result) ? result : null;
        }
        else if (reader.TokenType == JsonTokenType.Number)
        {
            return reader.GetDecimal();
        }
        return null;
    }

    public override void Write(Utf8JsonWriter writer, decimal? value, JsonSerializerOptions options)
    {
        if (value.HasValue)
            writer.WriteNumberValue(value.Value);
        else
            writer.WriteNullValue();
    }
}

.NET Core 3.x/.NET 5（Startup.cs）

在ConfigureServices方法中配置：

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers()
            .AddJsonOptions(options =>
            {
                options.JsonSerializerOptions.Converters.Add(new NullableDecimalConverter());
            });
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // 其他中间件配置...
        app.UseRouting();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

// 自定义可空decimal转换器
public class NullableDecimalConverter : JsonConverter<decimal?>
{
    public override decimal? Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
    {
        if (reader.TokenType == JsonTokenType.String)
        {
            var stringValue = reader.GetString();
            if (string.IsNullOrWhiteSpace(stringValue))
                return null;
            
            return decimal.TryParse(stringValue, out var result) ? result : null;
        }
        else if (reader.TokenType == JsonTokenType.Number)
        {
            return reader.GetDecimal();
        }
        return null;
    }

    public override void Write(Utf8JsonWriter writer, decimal? value, JsonSerializerOptions options)
    {
        if (value.HasValue)
            writer.WriteNumberValue(value.Value);
        else
            writer.WriteNullValue();
    }
}

说明 #

• 该转换器会处理三种情况：空字符串/空白字符串转null、有效的decimal字符串转对应数值、JSON数字类型直接转decimal。
• 写入JSON时会将null输出为JSON null，与Get接口返回的格式保持一致，避免前后端数据格式不一致的问题。

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