Blazor中@bind-Value绑定输入值自动带单引号问题排查

你的代码本身不会导致模型值被单引号包裹，问题出在以下几个可能的地方，逐一排查：

1. 检查LoginModel的ToString()方法 #

如果你的LoginModel类重写了ToString()，且在方法里给字段值套了单引号，那输出时就会带单引号。比如：

public class LoginModel
{
    public string Email { get; set; }
    public string Password { get; set; }

    // 这种写法会导致输出带单引号
    public override string ToString()
    {
        return $"Email: '{Email}', Password: '{Password}'";
    }
}

解决：修改ToString()方法，去掉单引号即可。

2. 检查值的展示代码 #

你看到的带单引号的输出，大概率是在页面渲染时手动加了单引号。比如你可能写了：

<p><strong>Email</strong>: '@loginModel.Email' , <strong>Password</strong>: '@loginModel.Password'</p>

Blazor中，插值表达式外面的单引号会被直接渲染出来。正确的写法是去掉单引号：

<p><strong>Email</strong>: @loginModel.Email , <strong>Password</strong>: @loginModel.Password</p>

3. 调试确认原始值 #

在ExecuteLogin里加调试代码，直接输出模型的原始值：

public void ExecuteLogin()
{
    Console.WriteLine($"Email: {loginModel.Email}");
    Console.WriteLine($"Password: {loginModel.Password}");
}

如果控制台输出的是不带单引号的纯值，说明问题完全在展示逻辑；如果控制台输出也带单引号，那就是LoginModel的定义问题。

补充：绑定语法规范 #

你的代码里用了@bind-value，Blazor推荐用简化的@bind语法，或者标准的@bind-Value（注意首字母大写），不过这个不会导致单引号问题，只是代码规范：

<input @bind="loginModel.Email" type="text"/>
<input @bind="loginModel.Password" type="password" />

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