当我的模型状态无效时，如何向输入元素添加 CSS 类？

Posted 2023-03-27

【中文标题】当我的模型状态无效时，如何向输入元素添加 CSS 类？

【英文标题】：How can I add a CSS class to an input element when my modelstate is invalid?

【发布时间】：2019-09-22 05:45:55

【问题描述】：

我是 .NET Core 2.0 Razor 页面的新手，我发现很难以干净的方式解决我的问题。

我创建了一个简单的登录表单，用户必须在其中输入电子邮件和密码。我使用具有电子邮件和密码属性的模型以及相应的数据注释。

public class AuthorizeOrganizationCommand

    [Required(ErrorMessage ="Please fill in your email")]
    public string Email  get; set; 

    [Required(ErrorMessage ="Please fill in your password")]
    public string Password  get; set; 

我的页面模型如下所示：

public class IndexModel : PageModel

    public IndexModel()
    
    
    
    [BindProperty]
    public AuthorizeOrganizationCommand Command  get; set; 
            
    public void OnGet()
    
    

    public IActionResult OnPost()
    
        if (!ModelState.IsValid)
        
            return Page();
        

        // Code to validate the credentials

        return RedirectToPage("/Index");
    

当我的 ModelState 无效时，我想可视化一条错误消息。 这适用于以下代码：

<div class="form-group">
    <label class="form-label" asp-for="Command.Email">Email</label>
    <input type="text" class="form-control" asp-for="Command.Email">
    <small class="invalid-feedback d-block">
        <span asp-validation-for="Command.Email"></span>
    </small>
</div>

此外，当我的 Modelstate 对该特定属性无效时，我想在我的输入元素上添加 CSS 类 .is-invalid。这会产生一个带红边的输入元素（引导程序 4）。我使用以下代码使其工作：

<input type="text" class="form-control @(ModelState["Command.Email"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid ? "is-invalid": string.Empty)" asp-for="Command.Email">

说实话，我不喜欢这种解决方案。

当对类实例名称或属性执行重命名时，硬编码的“Command.Email”会破坏代码。在尝试了几件事后，我没有找到解决这个问题的好方法。

【参考方案1】：

看看用于前端验证的不显眼的 jQuery。您将能够使用 jQuery 来查看表单是否有效，然后应用您认为合适的 CSS 类。

【讨论】：

客户端和服务器端验证都很重要。这是一个关于服务器端验证的问题。

Op 询问有关可视化 ModelState 的问题，因此是客户端的答案。但你是对的，两者都很重要。虽然我怀疑他现在已经离开了......